Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Dokumen ini menunjukkan contoh cara menerapkan fitur reCAPTCHA untuk WAF untuk Cloud Armor.
Anda dapat menggunakan satu atau beberapa fitur reCAPTCHA untuk WAF dalam satu aplikasi.
Jika ingin menggunakan lebih dari satu fitur, Anda harus membuat kunci reCAPTCHA
untuk setiap fitur tersebut dan menggunakannya di aplikasi Anda. Misalnya, jika Anda ingin menggunakan token tindakan reCAPTCHA dan halaman tantangan reCAPTCHA, Anda harus membuat kunci token tindakan dan kunci halaman tantangan, lalu menggunakannya di aplikasi Anda.
Contoh 1: Menggunakan token sesi reCAPTCHA dan halaman tantangan reCAPTCHA
Anda dapat menambahkan token sesi reCAPTCHA di halaman yang mungkin diakses pengguna sehingga cookie diperbarui secara berkala, misalnya, halaman login.
Konfigurasi aturan kebijakan keamanan Cloud Armor untuk mengalihkan permintaan ke halaman tantangan reCAPTCHA saat skor rendah.
Ilustrasi berikut menunjukkan alur kerja yang menggunakan fitur halaman tantangan reCAPTCHA dan token sesi reCAPTCHA:
Contoh 2: Menggunakan token tindakan reCAPTCHA dan halaman tantangan reCAPTCHA
Anda dapat menambahkan token tindakan reCAPTCHA untuk melindungi tindakan pengguna, seperti checkout.
Konfigurasi aturan kebijakan keamanan Cloud Armor untuk mengalihkan permintaan ke
halaman tantangan reCAPTCHA dalam kondisi berikut:
Skornya rendah.
Atribut action_name dari token tindakan tidak cocok dengan tindakan pengguna yang dilindungi.
Ilustrasi berikut menunjukkan alur kerja yang menggunakan fitur halaman tantangan reCAPTCHA dan token tindakan reCAPTCHA:
Skrip contoh berikut menunjukkan cara menggunakan token tindakan reCAPTCHA dan mengalihkan ke halaman tantangan reCAPTCHA dengan token tindakan yang dilampirkan sebagai header:
<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 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>
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Sulit dipahami","hardToUnderstand","thumb-down"],["Informasi atau kode contoh salah","incorrectInformationOrSampleCode","thumb-down"],["Informasi/contoh yang saya butuhkan tidak ada","missingTheInformationSamplesINeed","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-09-04 UTC."],[],[],null,["# Examples of integration with Google Cloud Armor\n\nThis document shows examples of how to implement the features of\nreCAPTCHA for WAF for Cloud Armor.\n\nYou can use one or more features of reCAPTCHA for WAF in a single\napplication.\nIf you want to use more than one feature, then you must create a reCAPTCHA key for each of those features and use them in your application. For example, if you want to use reCAPTCHA action-tokens and reCAPTCHA challenge page, then you must create an action-token key and a challenge-page key, and use them in your application.\n\n\u003cbr /\u003e\n\nExample 1: Using reCAPTCHA session-tokens and reCAPTCHA challenge page\n----------------------------------------------------------------------\n\nYou can add a reCAPTCHA session-token on pages that a user might access so\nthat the cookie gets refreshed periodically, for example, a login page.\nConfigure a Cloud Armor security policy rule to redirect the request to\na reCAPTCHA challenge page when the score is low.\n\nThe following illustration shows a workflow that uses reCAPTCHA session-token\nand reCAPTCHA challenge page features:\n\nExample 2: Using reCAPTCHA action-tokens and reCAPTCHA challenge page\n---------------------------------------------------------------------\n\nYou can add a reCAPTCHA action-token to protect a user action, such as checkout.\nConfigure a Cloud Armor security policy rule to redirect the request to\na reCAPTCHA challenge page in any of the following conditions:\n\n- The score is low.\n- The `action_name` attribute of the action-token does not match the user action that is protected.\n\nThe following illustration shows a workflow that uses reCAPTCHA action-token\nand reCAPTCHA challenge page features:\n\nThe following sample script shows how to use a reCAPTCHA action-token and\nredirect to a reCAPTCHA challenge page with the action-token attached as header: \n\n \u003cscript src=\"https://www.google.com/recaptcha/enterprise.js?render=ACTION_TOKEN_SITE_KEY\"\u003e\u003c/script\u003e\n \u003cscript\u003e\n function onSuccess(token) {\n const xhr = new XMLHttpRequest();\n xhr.open('GET','http://www.example.com/checkout', false);\n xhr.setRequestHeader(\"X-Recaptcha-Token\", token);\n xhr.onreadystatechange = function() {\n // Make sure that the request is finished and response is ready with 200\n if (this.readyState == 4 && this.status == 200) {\n // Display the response, it could be a reCAPTCHA challenge\n // page based on your Cloud Armor security rule settings.\n document.open();\n document.write(xhr.responseText);\n document.close();\n\n }\n };\n xhr.send(null);\n }\n\n grecaptcha.enterprise.ready(function () {\n document.getElementById(\"execute-button\").onclick = () =\u003e {\n grecaptcha.enterprise.execute('ACTION_TOKEN_SITE_KEY', {\n }).then(onSuccess, onError);\n };\n });\n \u003c/script\u003e\n\nWhat's next\n-----------\n\n- Learn how to [implement reCAPTCHA WAF features with Cloud Armor](https://codelabs.developers.google.com/codelabs/cloud-armor-recaptcha-bot-management).\n- Learn more about [features for integration with WAF service providers](/recaptcha/docs/waf-features)."]]
