0

I'm developing an app on my Force.com site (https://desaeveris-unav.cs107.force.com/rentawayapp) and I'm trying too add RECATPCHAv2 to my create account form. The goal is to keep the 'Register' button disabled unless the user clicks on Captcha, however, even when the button is pressed it stays disabled.

Here's my code.

GoogleRecatpcha VF

<apex:page sidebar="false" showHeader="false" standardStylesheets="false" cache="false" id="pg" applyBodyTag="false" applyHtmlTag="false" >
<html>
    <head>
        <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async="" defer=""/>
        <script type='text/javascript'>
            var verifyCallback = function(response){
                parent.postMessage("VALID", "https://desaeveris-unav.cs107.force.com/rentawayapp/Pagina_Registro");
            };
         
        var onloadCallback = function() {
            grecaptcha.render('reCAPTCHAWidget', {
                'sitekey' : '6LfZs00bAAAAAOeeE3sfyxsE0pxJo3Pmuu76GZwo', 
                'callback' : verifyCallback
            });
        };
        </script>
    </head>
    <body>
         <form action="?" method="POST">
         <div id="reCAPTCHAWidget"></div>
            <br/>
        <input type="submit" value="Submit" style="display:none"/>
    </form>
        
    </body>
</html>
 </apex:page>

Aura component.cmp

<aura:component controller ="CTR_Registro" implements="force:hasRecordId,flexipage:availableForAllPageTypes,lightning:isUrlAddressable,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
<aura:attribute name="nombre" type="string" default=""/>
<aura:attribute name="apellido" type="string" default=""/>
<aura:attribute name="bday" type="Date" default=""/>
<aura:attribute name="movil" type="Integer" default=""/>
<aura:attribute name="email" type="string" default=""/>
 <aura:attribute name="isDisable" type="Boolean" default="true"/>
 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>


    <h1 class="slds-page-header__title slds-m-right_small
                  slds-truncate slds-align-left">Crear cuenta en RentAway</h1>
   
       
    <lightning:input fieldName="Nombre" type="text" required="true" label ="Nombre" value="{!v.nombre}"/>
  <br/>
  <lightning:input fieldName="Apellido" type="text" label ="Apellido" value="{!v.apellido}"/>
    <br/>
  <lightning:input type="date" label="Fecha de nacimiento" placeholder="La edad mínima es de 18 años" name="date" max="2003-12-31" value="{!v.bday}" />
   <br/>
  <lightning:input fieldName="Teléfono móvil" type="number" width="40px" maxlength ="9" label ="Movil" value="{!v.movil}"/>
   <br/>
  <lightning:input fieldName="Dirección de correo" maxlength ="80" type="email" required="true" label ="Email" value="{!v.email}" />
   
  <br/>
<iframe src="/rentawayapp/GoogleReCaptcha" scrolling="no" frameborder="0" width="100%" allowtransparency="true"></iframe>
        <lightning:button label="Cancelar" onclick="{!c.handleCancel}" />
        <lightning:button type="submit" aura:id ="boton-submit" class="slds-button slds-button_brand slds-float--center" label="Registrarse" variant="brand" onclick="{!c.registrarse}" disabled="true"/>
  </aura:component>

Aura component controller.js

 doInit : function(component, event, helper) {
  //  let vfURL ="https://desaeveris-unav.cs107.force.com/rentawayapp";
   // window.addEventListener('message', function(event){
     //   if(event.origin !== vfURL){
       //     return;
       // }
        if(event.data === 'VALID'){
            var button = component.find("boton-submit");
            button.set('v.disabled',false);
           // component.set('v.isDisable', false); 
        }
    },

Here's what my page looks like:

enter image description here

***NOTE: The Aura component which contains the lightning inputfields and lightning is included in 'Pagina_Registro' .vf (as you can see in the URL)

I have followed every step i came across the forums but it doesn't seem to work, i think it might be the callback function ?

Help me please!

Improve this question

1 Answer 1

Reset to default
0

Ok, I solved it.

The addEventListener line had to be uncommented Aura component controller.js

 doInit : function(component, event, helper) {
  window.addEventListener('message', function(event){
      console.log(event.data);
        if(event.data === "VALID"){
            var button = component.find("boton-submit");
            button.set('v.disabled',false);
        }
    },false);
},
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .