テスト目的のreCAPTCHAキーとその使用方法

2024-02-10 04:35 reCAPTCHA キーの取得ウェブ開発

Google reCAPTCHAの公式ウェブサイトにアクセスします。
サインインし、Googleアカウントを使用してGoogle reCAPTCHAのダッシュボードに入ります。
新しいサイトを追加するために、「+ サイトを追加」または同様のボタンをクリックします。
サイトのドメイン情報を入力し、reCAPTCHAのタイプを選択します。テスト目的で使用する場合は、「reCAPTCHA v2」または「Invisible reCAPTCHA」を選択することが一般的です。
サイトキーとシークレットキーが生成されます。テスト目的で使用するためのキーが必要なので、これらのキーを控えておいてください。
ウェブページやアプリケーションでreCAPTCHAを使用するには、生成されたサイトキーを適切な場所に埋め込む必要があります。具体的なコード例は以下の通りです。

HTML:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="ここにサイトキーを入力"></div>

JavaScript(jQuery)を使用してフォーム送信時にreCAPTCHAをチェックする場合の例:

$("#myForm").submit(function(event) {
  event.preventDefault();

  grecaptcha.ready(function() {
    grecaptcha.execute('ここにサイトキーを入力', {action: 'submit'}).then(function(token) {
      // reCAPTCHA検証が成功した場合の処理
      // サーバーサイドでトークンを検証し、フォームの処理を続行する
    });
  });
});

これらのコード例は、reCAPTCHAをウェブページやアプリケーションに統合するための基本的なものです。サイトキーを適切に設定し、reCAPTCHAの機能をテストすることができます。

なお、reCAPTCHAの詳細な使い方やカスタマイズについては、Google reCAPTCHAの公式ドキュメントを参照してください。