【HTML】Googleフォーム連携した静的なHTMLにreCAPTCHAを設置する方法

Googleフォーム連携した静的なHTML
reCAPTCHAを設置する方法です。
※この設定では、よくあるオリジナルの完了画面へのリダイレクトが出来ないかも…

reCAPTCHAのバージョンはV2での実装方法になります。
reCAPTCHA公式サイトよりV2でそれぞれサイトキーとシークレットキーを発行します。

HTML

必要な項目のinputタグを設定し、entry.0000000など該当する値に変えます。
formタグのactionは認証が完了したらPHP内に記述されたURLへ送信するのでhtmlへの直接的な記述は不要です。

<form name="gr_form">
    名前:<input type="text" name="entry.0000000" value="" placeholder="山田太郎"><br>
    メールアドレス:<input type="text" name="entry.0000000" value="" placeholder="メールアドレス"><br>
    <div id="gr_checkbox"></div>
    <input type="button" value="送信" disabled="disabled" id="gr_submit" onclick="trySubmit();" />
</form>

CSS

#gr_checkboxreCAPTCHA自体の表示に関するCSS、#gr_submit:disabledreCAPTCHA認証前の送信ボタン(非活性)のCSSです。

#gr_checkbox {
    display: table;
    margin: 10px auto;
}

#gr_submit:disabled {
    pointer-events: none;
    opacity: 0.5;
}

JS

最初に発行したサイトキーをxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxに記述します。
22行目の./gr_check.phpは設置場所に合わせてパスを修正してください。(同じ階層の場合はこのままで可)

<script src="https://www.google.com/recaptcha/api.js?onload=grOnloadCallback&render=explicit" async defer></script>
<script type="text/javascript">
    var grOnloadCallback = function() {
        grecaptcha.render('gr_checkbox', {
            'sitekey' : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            'callback' : grCallback,
            'expired-callback' : grExpiredCallback
        });
    };

    var grCallback = function(response) {
        document.getElementById('gr_submit').removeAttribute('disabled');
    };

    var grExpiredCallback = function(response) {
        document.getElementById('gr_submit').setAttribute('disabled', 'disabled');
    };
    
    var trySubmit = function() {
        if( document.gr_form.reportValidity() ) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', './gr_check.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4 && xhr.status === 200) {
                    if('' != xhr.responseText) {
                        document.gr_form.action = xhr.responseText;
                        document.gr_form.method = 'POST';
                        document.gr_form.submit();
                    }
                }
            }
            var gr_response = document.getElementById('g-recaptcha-response').value;
            xhr.send('response=' + gr_response);
        }
    }
</script>

PHP

最初に発行したシークレットキーをxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxに記述し、
https://docs.google.com/forms/u/0/d/e/zzzzzzzzzz/formResponseを該当する値に変え、
ファイル名をgr_check.phpにして下記のコードを記述し保存します。

<?php
    $token = $_POST['response'];
    if($token) {
        $url = 'https://www.google.com/recaptcha/api/siteverify';
        $secret_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
        $response = file_get_contents("{$url}?secret={$secret_key}&response={$token}");
        $json = json_decode($response, true);
        if($json['success'] == 'true') {
            echo 'https://docs.google.com/forms/u/0/d/e/zzzzzzzzzz/formResponse';
        }
    }
?>

参考:https://migi.me/javascript/google-recaptcha-ajax/

関連記事

コメントを残す

*