2

I am using google Re captcha in my Visual force Page as below

<apex:page sidebar="false" showHeader="false">
    <apex:slds />    
    <html>  
        <head> 
            <script type="text/javascript">
            var verifyCallback = function(response) {
                parent.postMessage("formvalidated", "{!$Site.BaseSecureUrl}");
            }; 
            var onloadCallback = function() {                
                grecaptcha.render('html_element', {
                    'sitekey' :'XXXXXXXXXXXXXXXXX',
                    'callback' : verifyCallback,
                });
            };
            </script>
        </head>
        <body>
            <form action="?" method="POST">
                <div id="html_element"></div>
                <br/>
                <input type="submit" value="Submit" style="display:none"/>
            </form>
            <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async="" defer="">
            </script>
        </body>
    </html> 
</apex:page>

The above Code working fine.

Now i am trying to Use Static resourceinstead of loading the js URL in the script tag as below.

This is not working

<apex:includeScript value="{! $Resource.RecaptchaAPI}"/>

i hit this URL https://www.google.com/recaptcha/api.js in browser and saved the js as recaptchaApi.js and created the New static Resource with the Name as below

enter image description here

Can you guide me what I am missing here.

  • Are you triggering the callback function? – Matt Lacey Sep 9 at 5:12
  • Yes, I was triggering the onloadCallback like this ?onload=onloadCallback&render=explicit – SFDC_Beginner Sep 9 at 5:17
2

By loading the static resource (using the code given below), you are not instructing the VF page specifically what should happen or execute after the JS file is loaded.

<apex:includeScript value="{! $Resource.RecaptchaAPI}"/>

& ?onload=onloadCallback&render=explicit at the end of your page URL won't do that either (unlike the script tag that has explicit onload attribute wired into it). So, you need to update your code as shown below.

<apex:page sidebar="false" showHeader="false">
    <apex:slds />
    <apex:includeScript value="{! $Resource.RecaptchaAPI }"/>
    <script type="text/javascript">
    grecaptcha.ready(function(){
        grecaptcha.render('html_element', {
            'sitekey' :'<Place your site key here>',
            'callback' : verifyCallback,
        });
    });
    
    var verifyCallback = function(response) {
        console.log('inside verifyCallback');
        parent.postMessage("formvalidated", "{!$Site.BaseSecureUrl}");
    };
    </script>
    <form action="?" method="POST">
        <div id="html_element"></div>
        <br/>
        <input type="submit" value="Submit" style="display:none"/>
    </form>
</apex:page>

grecaptcha.ready function executes after the static resource is loaded and the google recaptcha api is ready. The callback function passed to it should be used to handle rest of the logic.

Alternate solution: You can also do the following (here you can utilize g-recaptcha tag attributes such as data-sitekey & data-callback):

<apex:page sidebar="false" showHeader="false">
    <apex:slds />
    <apex:includeScript value="{! $Resource.RecaptchaAPI }"/>
    <script type="text/javascript">    
        function verifyCallback(response) {
            console.log('inside verifyCallback');
            parent.postMessage("formvalidated", "{!$Site.BaseSecureUrl}");
        };
    </script>
    <form action="?" method="POST">
        <div class="g-recaptcha" data-sitekey="<Place your site key here>" data-callback="verifyCallback"></div>
        <br/>
        <input type="submit" value="Submit" style="display:none"/>
    </form>
</apex:page>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.