2019-01-07T13:04:01Z

reCAPTCHA v2 をお問い合わせフォームに設定する

GoogleAppsScriptでお問い合わせフォームを作成するで作成したお問い合わせフォームにreCAPTCHAv2を設置する。

導入手順

  1. reCAPTCHAのAPIキーを取得する
    • reCAPTCHA
    • reCAPTCHAv2のチェックボックスを選択してドメインを指定して完了
  2. クライアント側を実装する
  3. サーバ側を実装する

クライアント側を実装する

  • <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) {}

  // ...メイン処理
}

関連

  1. GoogleAppsScriptでお問い合わせフォームを作成する
  2. reCAPTCHAv2をお問い合わせフォームに設定する
 コメントを書く