このページでは、スコアベースのキーをチャレンジなしでウェブサイトにインストールする方法について説明します。スコアベース キーを使用すると、ユーザーに CAPTCHA チャレンジの解決を求めることなく、サイト全体に reCAPTCHA を含めることができます。
スコアベース キーをインストールしたら、評価を作成し、リクエストごとにスコアを取得する必要があります。このスコアに基づいて、ユーザー インタラクションのリスクレベルを把握し、適切なレスポンス(複数可)を構成できます。また、スコアベース キーは、新しい攻撃または対象にされていることを早期に警告するために bot アクティビティ テレメトリーを収集できます。
reCAPTCHA のリスクモデルを向上させるには、サイトの各ページに reCAPTCHA を含めることをおすすめします。reCAPTCHA は、実際のユーザーや bot がさまざまなページやアクション間をどのように遷移するかを理解するのに役立ちます。
始める前に
-
あるいは、次のいずれかの手順で、既存のスコアベースのキーの ID をコピーできます。
Google Cloud コンソールから既存のチェックボックスのキーの ID をコピーするには、次の操作を行います。
[reCAPTCHA] ページに移動します。
- reCAPTCHA キーのリストで、コピーするキーの上にポインタを置き、[ ] をクリックします。
- REST API を使用して既存のキーの ID をコピーするには、projects.keys.list メソッドを使用します。
- gcloud CLI を使用して既存のキーの ID をコピーするには、gcloud recaptcha keys list コマンドを使用します。
キーをウェブサイトに配置する
reCAPTCHA は、サイト上でのインタラクションに関するコンテキストがある場合に最も効果的です。reCAPTCHA は、サイト上のインタラクションを調査するために、正当な動作と不正な動作の両方を監視します。
最適な結果を得るには、スコアベース キーをウェブサイトの次の場所にインストールします。
- フォーム
- アクション(ユーザー インタラクション)
- すべてのウェブページのバックグラウンド
スコアベース キーはユーザーの作業を中断しないため、コンバージョンに影響を与えることなく、必要に応じてスコアベース キーを使用して reCAPTCHA を実行できます。
キーをフロントエンドへ統合する
reCAPTCHA による確認を追加する場所に応じて、適切なオプションを選択します。
各オプションの例は、デモウェブサイトのソースコードをご覧ください。
ユーザーの操作に関する確認を追加する
ウェブページに reCAPTCHA を読み込むには、スコアベース キーを使用して JavaScript API をウェブページの
<head></head>
要素内に追加します。<head> <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script> .... </head>
reCAPTCHA は、デフォルトでブラウザの言語を使用します。別の言語を指定する場合は、スクリプトで
hl=LANG
属性を使用します。たとえば、フランス語を使用するには、<script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>
で指定します。サポートされている言語については、reCAPTCHA の言語コードをご覧ください。バッジのロケーションを指定する場合は、スクリプト タグでクエリ パラメータとして
badge=LOCATION
を使用します。例:www.google.com/recaptcha/enterprise.js?sitekey=KEY_ID&badge=bottomleft
。デフォルトの場所はbottomright
に設定されています。その他の可能な値はinline
とbottomleft
です。ユーザー操作に reCAPTCHA による確認を追加する手順は次のとおりです。
reCAPTCHA ライブラリの読み込み時に
grecaptcha.enterprise.execute()
が実行されるようにするため、grecaptcha.enterprise.ready()
を使用します。スコアベースのキーを使用して、保護対象のインタラクションごとに
grecaptcha.enterprise.execute()
を呼び出します。action
パラメータで、ユーザー インタラクションに意味のある名前を指定します。詳しいガイダンスについては、アクションをご覧ください。次の例では、ログイン アクションで
grecaptcha.enterprise.execute()
を呼び出す方法を示します。<script> function onClick(e) { e.preventDefault(); grecaptcha.enterprise.ready(async () => { const token = await grecaptcha.enterprise.execute('KEY_ID', {action: 'LOGIN'}); // IMPORTANT: The 'token' that results from execute is an encrypted response sent by // reCAPTCHA to the end user's browser. // This token must be validated by creating an assessment. // See https://cloud.google.com/recaptcha/docs/create-assessment }); } </script>
grecaptcha.enterprise.execute()
によって、次の例のようにトークンが生成されます。03AGdBq27tvcDrfiRuxQnyKs-SarXVzPODXLlpiwNsLqdm9BSQQRtxhkD-Wv6l2vBSnL_JQd80FZp3IeeF_TxNMrqhyQchk7hmg_ypDctt_F5RTr9zNO9TSDX3Fy0qHQTuaM9E3hrAkA1v1l7D-fCreg7uq8zoudfh1ZRmN49-2iAMAn4E8_ff-nmlLTNGVZmCSyeze-5xM24pM_JhhUVcCMIDKYtDUnr2imxg2ubIqMscCZGUtdXNUO_LRSzuwWDlLyAr3V2nVn29Z48PQa2QzbymEXzO9pCtoGQmY7kiZ8ILfD9DAJSSyUTMwJXVJptUeBmLM341fq_STYZBbPQJ0zYOEDvJoFsIwGMfuphkDet0nK56b0mkzaL8RCRy2oK31Mcx6n3PhGkCnQ6QIhiV5ZVmV1Hz9M3w99zYw6ekc3wPCNMZ6V6x1ApVpIk3reFfByRQ0C0_pRWwbKZHLXQ_oSTI1UI7kyH1VeXngsJAx2l7zcp0hQNipajC4YwL7Jb8X4cCD0NeiaY1YCrI5j87mK5axcMikq460I4niIFeDBlHGF-ndqu3CJstosAur-C_x827f-dPPjA9Vrw8MDb3x4KUb0vbA8xE9mJxPYGY0rPCR27vJ38Voa7DjEBGX9c-iufv5_wfj-yIfIAHy0iijnRLI0CVkWF2-iPdWv7LnkTwL3WKbF_MrEGZXmtyLX9dEZArfxmToeMuSdYkfikkgR2-k4Xzxlz15RbHJuWSAYqEyTTnpUXmOvDuTN92b0kYqbRelcLUI_Shm-8dq9e-L7K6YWQv32gV6NukZKY15dyrJaW10frBgTOGSTTpIyB7MNEL8S27WjWtOb-zWsgimIhoRNfS8BiJWkmK4gTj51m7Wur-qsDbHgV6gXlMvjJs_B7oXX-mKsKhY9ACtwukotBelGYQOvf1RDHjH3Yi1RDfELBY6AkwUK4tq8cACVGpCwa0gKUo-sbORTsGu_r7VTzYo1AaZD5HV4XUm8yoqszel6DmIfkJcI7PfzzvfUJuvMQ1itZSzpzuth3glbKBYsIjbKqG-q8cxtZ7u0l32j46ASo2zlCJWUjwP3W1P7MUenEoIZtjlyTB_tT6Fk8RxGgRv3oLP7NPFJGs9ZGOAl6tBHpZF8Y_FqEOCMKtBl2JYOE5h6_Es3buSdiMm7mtLr64pboGiEColF1vbVvYpyaaqGFPXBM6ekZSXEXLAI0_7rj_fCLgnB21KXfac95vZbM9vyJCASvDcWKwqajQwy5aGMNe9GtbMogYbZfz5UGWAIi24Vd8KSv3qKOOwvzbcw4H0HYdsBXA
トークンが生成された後、reCAPTCHA トークンをバックエンドに送信し、2 分以内に評価を作成します。
WAF 統合でアクション トークン キーを統合する場合は、事前定義されたリクエスト ヘッダーにトークンを添付する必要があり、評価を作成する必要はありません。詳細については、reCAPTCHA アクション トークンを実装するをご覧ください。
HTML ボタンに reCAPTCHA を追加する
ウェブページに reCAPTCHA を読み込むには、スコアベース キーを使用して JavaScript API をウェブページの
<head></head>
要素内に追加します。<head> <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script> .... </head>
reCAPTCHA は、デフォルトでブラウザの言語を使用します。別の言語を指定する場合は、スクリプトで
hl=LANG
属性を使用します。たとえば、フランス語を使用するには、<script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>
で指定します。サポートされている言語については、reCAPTCHA の言語コードをご覧ください。単純な HTML ボタンに reCAPTCHA を追加する手順は次のとおりです。
トークンを処理するコールバック関数を定義します。
<script> function onSubmit(token) { document.getElementById("demo-form").submit(); } // Use `requestSubmit()` for extra features like browser input validation. </script>
詳細については、requestSubmit() メソッドをご覧ください。
html ボタンに属性を追加します。
<button class="g-recaptcha" data-sitekey="KEY_ID" data-callback='onSubmit' data-action='submit'>Submit</button>
バッジの位置を指定する場合は、
class=g-recaptcha
を含む要素にdata-badge=LOCATION
属性を使用します。デフォルトの場所はbottomright
に設定されています。その他の可能な値はinline
とbottomleft
です。サイトでのフォームの送信にこのボタンを使用すると、
g-recaptcha-response
POST パラメータにレスポンス トークンが含まれます。
トークンが生成された後、reCAPTCHA トークンをバックエンドに送信し、2 分以内に評価を作成します。
WAF 統合でアクション トークン キーを統合する場合は、事前定義されたリクエスト ヘッダーにトークンを添付する必要があり、評価を作成する必要はありません。詳細については、reCAPTCHA アクション トークンを実装するをご覧ください。
次のステップ
- reCAPTCHA の応答トークンを評価するため、評価を作成する。