Ressource statique dans la page VisualForce

Question

J'utilise google Re captcha dans ma page Visual Force comme ci-dessous

<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>

Le code ci-dessus fonctionne bien.

Maintenant, j'essaie d'utiliser Static resourceau lieu de charger l'URL js dans la balise de script comme ci-dessous.

Ça ne marche pas

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

J'ai frappé cette URL https://www.google.com/recaptcha/api.jsdans le navigateur et enregistré les js en tant que recaptchaApi.jset créé la nouvelle ressource statique avec le nom ci-dessous

Pouvez-vous me guider ce qui me manque ici.

Answer 1

En chargeant la ressource statique (en utilisant le code donné ci-dessous), vous n'indiquez pas spécifiquement à la page VF ce qui doit se passer ou exécuter après le chargement du fichier JS.

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

& ?onload=onloadCallback&render=explicità la fin de votre page, l'URL ne le fera pas non plus (contrairement à la balise de script qui a un onloadattribut explicite câblé). Vous devez donc mettre à jour votre code comme indiqué ci-dessous.

<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.readyLa fonction s'exécute après le chargement de la ressource statique et l'api google recaptcha est prêt. La fonction de rappel qui lui est passée doit être utilisée pour gérer le reste de la logique.

Solution alternative: vous pouvez également effectuer les opérations suivantes (ici, vous pouvez utiliser desg-recaptchaattributs de balise tels quedata-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>