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