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_checkboxがreCAPTCHA自体の表示に関するCSS、#gr_submit:disabledはreCAPTCHA認証前の送信ボタン（非活性）の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';
}
}
?>
