reCAPTCHA v3 の使い方

サイトのお問い合わせフォームでスパム対策にreCAPTCHA3を使いたいっていうときの設定方法。

Google reCAPTCHAへ登録する

Web サイトと連携するためにサイトキーが必要になるのでGoogleログイン後に以下のサイトからサイトを登録してキーを取得します。

Google reCAPTCHA - 新しいサイトを登録する

ラベル名つけて対象のドメインを入力。
送信ボタンを押すとサイトキーとシークレットキーが発行されます。

設置する（手動編）

最初にAPI を読み込んで、トークン処理のコールバック関数を追加します。

<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
  function onSubmit(token) {
    document.getElementById("form-Id").submit();
  }
 </script>

次にフォームへ属性を追加します。
"form-Id" は先の form-Id と揃え、"reCAPTCHA_site_key" は発行されたサイトキーを入れればOK。

<form id="form-Id">
  <button class="g-recaptcha" 
    data-sitekey="reCAPTCHA_site_key" 
    data-callback='onSubmit' 
    data-action='submit'>Submit</button>
</form>

設置する（Contact Form 7 編）

WordPress サイトで Contact Form 7 を利用している場合はもっとシンプルです。設定からキーを入力するだけ。

reCAPTCHA ロゴバッジを非表示にする場合

reCAPTCHAを適用すると reCAPTCHA ロゴのバッジが表示されます。

これを非表示にする場合は以下のように対応してください。

まず一文加える

本サイトはreCAPTCHAによって保護されています。Googleの<a href="https://policies.google.com/privacy" target="_blank">プライバシーポリシー</a>と<a href="https://policies.google.com/terms" target="_blank">利用規約</a>が適用されます。

CSSでバッジを非表示にする

.grecaptcha-badge { visibility: hidden; }

以上、こんな感じで設定します。