在網站上安裝分數制金鑰

本頁面說明如何在網站上安裝無驗證問題的分數型金鑰。使用評分金鑰，即可在整個網站中加入 reCAPTCHA，使用者不必完成 CAPTCHA 驗證。

安裝分數型金鑰後，當使用者觸發互動時，reCAPTCHA 會傳送加密回應，也就是 reCAPTCHA 回應權杖 (也稱為權杖)。產生權杖後，您必須在兩分鐘內建立評估作業，才能取得每項要求的評分。您可以根據分數瞭解使用者互動帶來的風險等級，並設定適當的回應。此外，評分式金鑰可收集機器人活動遙測資料，提早預警新的攻擊或目標。

為改善 reCAPTCHA 的風險模型，建議您在網站的每個頁面加入 reCAPTCHA，這有助於瞭解真實使用者和機器人在不同頁面和動作之間的轉換。

事前準備

  1. 準備 Google Cloud Fraud Defense 環境。

  2. 建立分數型金鑰。

    或者，您也可以複製現有評分式金鑰的 ID，步驟如下：

    • 如要從 Google Cloud 控制台複製現有金鑰的 ID，請按照下列步驟操作：

      1. 前往 Google Cloud Fraud Defense 頁面。

        前往 Google Cloud Fraud Defense

      2. 選取「金鑰」分頁標籤。
      3. 在 reCAPTCHA 金鑰清單中，找出要複製的金鑰，然後按一下 。
    • 如要使用 REST API 複製現有金鑰的 ID，請使用 projects.keys.list 方法。
    • 如要使用 gcloud CLI 複製現有金鑰的 ID，請使用 gcloud recaptcha keys list 指令。

在網站上放置金鑰

reCAPTCHA 必須掌握網站互動的背景資訊，才能發揮最佳效果。reCAPTCHA 會監控合法和濫用行為，瞭解網站上的互動情形。

為獲得最佳結果，請在網站的下列位置安裝分數制金鑰：

  • 表單
  • 動作 (使用者互動)
  • 所有網頁的背景

分數型金鑰不會干擾使用者，因此您可以在必要時執行 reCAPTCHA，而不影響轉換。

將金鑰與前端整合

建議您在需要驗證的使用者互動中加入 reCAPTCHA 驗證。舉例來說，如要驗證表單的提交動作，就必須在提交動作中加入 reCAPTCHA 驗證。

請根據要新增 reCAPTCHA 驗證的位置，選擇適當的選項：

如需各選項的範例，請查看示範網站的原始碼。

在使用者互動中加入驗證

  1. 如要在網頁上載入 reCAPTCHA，請在網頁的 <head></head> 元素中，加入含有評分金鑰的 JavaScript API。

        <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?render=KEY_ID&badge=bottomleft。位置預設為 bottomright。其他可能的值為 inline 和 bottomleft。

  2. 如要在使用者互動中加入 reCAPTCHA 驗證，請按照下列步驟操作：

    1. 為確保 grecaptcha.enterprise.execute() 在 reCAPTCHA 程式庫載入後執行，請使用 grecaptcha.enterprise.ready()。

    2. 針對要使用評分金鑰保護的每項互動，呼叫 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

  3. 系統產生權杖後，請將 reCAPTCHA 權杖傳送至後端，並在兩分鐘內建立評估。

    如果是 WAF 整合，整合動作權杖金鑰時，必須將權杖附加至預先定義的要求標頭，且不必建立評估。詳情請參閱「導入 reCAPTCHA 動作權杖」。

在 HTML 按鈕上新增 reCAPTCHA

  1. 如要在網頁上載入 reCAPTCHA，請在網頁的 <head></head> 元素中，加入含有評分金鑰的 JavaScript API。

        <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 的語言代碼。

  2. 如要在 HTML 按鈕上新增 reCAPTCHA，請按照下列步驟操作：

    1. 定義用來處理權杖的回呼函式。

      <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   } // Use `requestSubmit()` for extra features like browser input validation.
</script>

      詳情請參閱 requestSubmit() 方法。

    2. 為 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。

    3. 如果有人使用這個按鈕在網站上提交表單，g-recaptcha-response POST 參數就會包含回應權杖。

  3. 系統產生權杖後，請將 reCAPTCHA 權杖傳送至後端，並在兩分鐘內建立評估。

    如果是 WAF 整合，整合動作權杖金鑰時，必須將權杖附加至預先定義的要求標頭，且不必建立評估。詳情請參閱「導入 reCAPTCHA 動作權杖」。

後續步驟