Solución:
Tengo una solución que puedes probar.
Cargue un recurso estático: 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>
Deberá crear un archivo de recursos llamado: 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>
Cree un componente LWC: captcha.html
<template>
<iframe src={navigateTo} name="captchaFrame" onload={captchaLoaded} width="350" height="500" style="border:1px solid red"></iframe>
</template>
y 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);
}
}
No había usado un captcha antes, al registrar el dominio no me di cuenta de que debía dejar el https: //.
No para auto promocionarse, pero me gustaría compartir algunas soluciones nuevas para considerar que no requieren un iframe de VisualForce en esta publicación de blog recién publicada: https://www.learncommunitycloud.com/s/article/Implementing-reCAPTCHA-in -Comunidad-Nube
Para la versión 3, puede aprovechar los eventos de JavaScript y el marcado principal de Lightning Community, como:
<!--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>
* Reemplace reCAPTCHA_site_key con su clave de sitio v3 en 2 lugares en el ejemplo anterior