VisualForceページの静的リソース

Question

私は以下のように私のビジュアルフォースページでグーグルReキャプチャを使用しています

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

上記のコードは正常に機能しています。

今、私はStatic resource以下のようにスクリプトタグにjsURLをロードする代わりに使用しようとしています。

これは機能していません

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

私https://www.google.com/recaptcha/api.jsはブラウザでこのURLをヒットし、jsをとして保存し、recaptchaApi.js以下のような名前で新しい静的リソースを作成しました

私がここで欠けているものを教えてくれませんか。

Answer 1

静的リソースをロードすることにより（以下のコードを使用）、JSファイルがロードされた後に何が発生または実行されるかをVFページに具体的に指示する必要はありません。

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

＆?onload=onloadCallback&render=explicitページの最後にあるURLもそれを行いません（明示的なonload属性が組み込まれているスクリプトタグとは異なります）。したがって、以下に示すようにコードを更新する必要があります。

<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関数は、静的リソースが読み込まれ、google recaptchaapiの準備ができた後に実行されます。渡されたコールバック関数は、残りのロジックを処理するために使用する必要があります。

別の解決策：次のこともできます（ここではg-recaptcha、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>