Google Recaptcha V3 Implementation in Lightning Web Component

I have a solution that you can try.

Upload a static resource: recaptcha2.html

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" onsubmit="return validateForm()" method="POST">
      <div class="g-recaptcha" data-sitekey="6LdIAZgUAAAAAFX4gX_8CQrVXT-5kPka0w_i2bnY"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>

    <script type="text/javascript">
        function validateForm(){

            if(grecaptcha.getResponse().length == 0){
                alert('Please click the reCAPTCHA checkbox');
                parent.postMessage("captcha failed", location.origin);
                return false;
            }
            parent.postMessage("captcha success", location.origin);
            return true;
        }
    </script>
  </body>
</html>

You will need to create a resource file called: recaptcha2.resource-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
    <cacheControl>Private</cacheControl>
    <contentType>text/html</contentType>
</StaticResource>

Make an LWC component: captcha.html

<template>
    <iframe src={navigateTo} name="captchaFrame" onload={captchaLoaded} width="350" height="500" style="border:1px solid red"></iframe>
</template>

and the JavaScript: captcha.js

import { LightningElement, track } from 'lwc';
import pageUrl from '@salesforce/resourceUrl/recaptcha2';

export default class GoogleCapatcha extends LightningElement {
    @track navigateTo;
    captchaWindow = null;

    constructor(){
        super();

        this.navigateTo = pageUrl;

        window.addEventListener("message", this.listenForMessage);
    }

    captchaLoaded(evt){
        var e = evt;
        console.log(e.target.getAttribute('src') + ' loaded');
        if(e.target.getAttribute('src') == pageUrl){
            // You know that your captcha is loaded
        } 
    }

    listenForMessage(message){
        console.log(message);
    }
}

I hadn't used a captcha prior, when registering the domain I didn't realize that I should leave off the https://.


Not to self promote, but I would like to share some new solutions to consider that don't require a VisualForce iframe in this just published blog post: https://www.learncommunitycloud.com/s/article/Implementing-reCAPTCHA-in-Community-Cloud

For v3, you can leverage JavaScript Events and Lightning Community head markup such as:

<!--reCaptcha v3-->
<script>
    document.addEventListener('grecaptchaExecute', function(e) {
        grecaptcha.execute('reCAPTCHA_site_key', {action: e.detail.action}).then(function(token) {
            document.dispatchEvent(new CustomEvent('grecaptchaVerified', {'detail': {response: token, action:e.detail.action}}));
        });
    }); 
</script>
<script src='https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key'></script>

*Replace reCAPTCHA_site_key with your v3 site key in 2 places in the example above

Tags:

Lightning

Lightning Web Components

Recent Posts