Risorsa statica nella pagina VisualForce

Question

Sto usando google Re captcha nella mia pagina di forza visiva come di seguito

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

Il codice di cui sopra funziona bene.

Ora sto cercando di utilizzare Static resourceinvece di caricare l'URL js nel tag script come di seguito.

Questo non sta funzionando

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

Ho colpito questo URL https://www.google.com/recaptcha/api.jsnel browser e ho salvato js come recaptchaApi.jse ho creato la Nuova risorsa statica con il nome come sotto

Puoi guidarmi cosa mi manca qui.

Answer 1

Caricando la risorsa statica (utilizzando il codice fornito di seguito), non si istruisce specificamente la pagina VF su cosa dovrebbe accadere o eseguire dopo il caricamento del file JS.

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

E ?onload=onloadCallback&render=explicitalla fine dell'URL della tua pagina non lo farà neanche questo (a differenza del tag script che ha un onloadattributo esplicito collegato al suo interno). Quindi, è necessario aggiornare il codice come mostrato di seguito.

<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 funzione viene eseguita dopo che la risorsa statica è stata caricata e l'API recaptcha di Google è pronta. La funzione di callback passata dovrebbe essere utilizzata per gestire il resto della logica.

Soluzione alternativa: puoi anche eseguire le seguenti operazioni (qui puoi utilizzareg-recaptchaattributi di tag comedata-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>