reCAPTCHA v2 をお問い合わせフォームに設定する
GoogleAppsScriptでお問い合わせフォームを作成するで作成したお問い合わせフォームにreCAPTCHAv2を設置する。
導入手順
- reCAPTCHAのAPIキーを取得する
- reCAPTCHA
- reCAPTCHAv2のチェックボックスを選択してドメインを指定して完了
- クライアント側を実装する
- サーバ側を実装する
クライアント側を実装する
<script src='https://www.google.com/recaptcha/api.js' async defer></script>- reCAPTCHAのスクリプトコードを追加する
<div class="g-recaptcha" data-sitekey="サイトキー"></div>- reCAPTCHAの表示位置に追加する
</form>タグの直前辺りdata-callback属性で認証成功時のコールバック関数を設定する
クライアント側サンプル<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<script>
function onReCaptcha(code) {
if (code != '') {
document.querySelector('.contact-form-button-submit').style.display = '';
}
}
function onFormSubmit() {
document['contact-form'].submit();
}
</script>
<form name='contact-form' action="ウェブ アプリケーションの URL" method="post">
<div>お名前</div>
<input class='contact-form-name' name='name' size='30' type='text' value='' placeholder='匿名'/>
<div>メールアドレス </div>
<input class='contact-form-email' name='email' size='30' type='text' value='' placeholder='email@example.com'/>
<div>お問い合わせ内容 </div>
<textarea class='contact-form-message' name='message' rows='10' placeholder='本文'></textarea>
<br/>
<div class="g-recaptcha" data-sitekey="サイトキー" data-callback="onReCaptcha"></div>
<button class='contact-form-button-submit' type='button' onclick="onFormSubmit();" style="display:none;">送信</button>
</form>サーバ側を実装する
- Googleがユーザを確認したかサーバ側から再確認する
- 秘密鍵とクライアント側から受信した
g-recaptcha-responseを送付する - 結果の
successの値(true/false)で結果を確認する
- 秘密鍵とクライアント側から受信した
サーバ側サンプルfunction doPost(e) {
// reCAPTCHA認証確認
var robot = true;
try {
var url = 'https://www.google.com/recaptcha/api/siteverify';
var option = {
method: 'POST',
payload: {
secret: '秘密鍵',
response: e.parameter["g-recaptcha-response"]
}
};
var response = UrlFetchApp.fetch(url, option);
if (response != null) {
var html = response.getContentText('UTF-8');
var json = JSON.parse(html);
robot = (json.success != true);
}
} catch (e) {}
// ...メイン処理
}