本文提供範例，說明如何為 Google Cloud Armor 導入 reCAPTCHA for WAF 的功能。
您可以在單一應用程式中使用一或多項 reCAPTCHA for WAF 功能。
如要使用多項功能，請為每項功能建立 reCAPTCHA 金鑰，並在應用程式中使用。舉例來說，如果您想使用 reCAPTCHA 動作符記和 reCAPTCHA 驗證頁面，就必須建立動作符記金鑰和驗證頁面金鑰，並在應用程式中使用這些金鑰。範例 1：使用 reCAPTCHA 工作階段符記和 reCAPTCHA 驗證頁面
您可以在使用者可能會存取的網頁上新增 reCAPTCHA 工作階段權杖，定期重新整理 Cookie，例如登入頁面。設定 Google Cloud Armor 安全性政策規則，在分數偏低時將要求重新導向至 reCAPTCHA 驗證頁面。
下圖顯示使用 reCAPTCHA 工作階段符記和 reCAPTCHA 挑戰頁面功能的流程：
範例 2：使用 reCAPTCHA 動作符記和 reCAPTCHA 驗證頁面
您可以新增 reCAPTCHA 動作權杖，保護使用者動作，例如結帳。設定 Google Cloud Armor 安全性政策規則，在下列任一情況下將要求重新導向至 reCAPTCHA 驗證頁面：
- 分數偏低。
- 動作權杖的
action_name屬性與受保護的使用者動作不符。
下圖顯示使用 reCAPTCHA 動作符記和 reCAPTCHA 驗證問題頁面功能的流程：
下列範例指令碼說明如何使用 reCAPTCHA 動作符記，並重新導向至 reCAPTCHA 驗證頁面，且動作符記會附加為標頭：
<script src="https://www.google.com/recaptcha/enterprise.js?render=ACTION_TOKEN_SITE_KEY"></script>
<script>
function onSuccess(token) {
const xhr = new XMLHttpRequest();
xhr.open('GET','http://www.example.com/checkout', false);
xhr.setRequestHeader("X-Recaptcha-Token", token);
xhr.onreadystatechange = function() {
// Make sure that the request is finished and response is ready with 200
if (this.readyState == 4 && this.status == 200) {
// Display the response, it could be a reCAPTCHA challenge
// page based on your Google Cloud Armor security rule settings.
document.open();
document.write(xhr.responseText);
document.close();
}
};
xhr.send(null);
}
grecaptcha.enterprise.ready(function () {
document.getElementById("execute-button").onclick = () => {
grecaptcha.enterprise.execute('ACTION_TOKEN_SITE_KEY', {
}).then(onSuccess, onError);
};
});
</script>