Recaptcha in Salesforce Lightning component

My requirement was to create a custom lightning component, which will be hosted in a community and will allow users to create cases. Before submitting the case, users have to successfully pass ‘I am not a robot‘ test.

I have followed this blog and successfully inserted a google recaptcha in lightning component. (…Since Salesforce’s security policy doesn’t allow direct reference to 3rd party CDNs.)

The issue description is as follows.

  • When google asks the user to identify some traffic signals(or cars or whatever), it pops up the window within the iframe. since the iframe is not dynamically scaling, only the last row of pop up becomes visible. Please check the screenshot below. Also note that the Submit button appears on TOP of the iframe popup.

    first few rows are hidden

  • To Overcome this effect, I have added height=500px to the iframe. pop-up now shows in full But, Submit button is appearing as if it is from some other planet.

    looks good when the pop-up is displayed

  • When popup is not displayed, my page looks like this.

    note the alienated button

Code for pulling VFpage into the iframe is

<div class="slds-form-element" >
    <iframe aura:id="vfFrame" src="/apex/reCAPTCHA" scrolling="no" height="500px" frameborder="0" width="100%" allowtransparency="true"/>
</div>

Would you please suggest how can I make it look better?

Answer

Attribution
Source : Link , Question Author : Hareesh Mohan , Answer Author : Community

Leave a Comment