Contoh integrasi dengan Google Cloud Armor

Dokumen ini menunjukkan contoh cara menerapkan fitur reCAPTCHA Enterprise untuk WAF untuk Google Cloud Armor.

Anda dapat menggunakan satu atau beberapa fitur reCAPTCHA Enterprise untuk WAF dalam satu aplikasi.

Jika ingin menggunakan lebih dari satu fitur, Anda harus membuat kunci reCAPTCHA untuk setiap fitur tersebut dan menggunakannya dalam aplikasi Anda. Misalnya, jika ingin menggunakan token tindakan reCAPTCHA dan halaman tantangan reCAPTCHA, Anda harus membuat kunci token tindakan dan kunci halaman tantangan, lalu menggunakannya dalam aplikasi Anda.

Contoh 1: Menggunakan token sesi reCAPTCHA dan halaman tantangan reCAPTCHA

Anda dapat menambahkan token sesi reCAPTCHA di halaman yang mungkin diakses pengguna agar cookie diperbarui secara berkala, misalnya, halaman login. Konfigurasikan aturan kebijakan keamanan Google Cloud Armor untuk mengalihkan permintaan ke halaman tantangan reCAPTCHA saat skornya rendah.

Ilustrasi berikut menunjukkan alur kerja yang menggunakan fitur token sesi reCAPTCHA dan halaman tantangan reCAPTCHA:

Contoh 2: Menggunakan token tindakan reCAPTCHA dan halaman tantangan reCAPTCHA

Anda dapat menambahkan token tindakan reCAPTCHA untuk melindungi tindakan pengguna, seperti checkout. Konfigurasikan aturan kebijakan keamanan Google 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 token tindakan reCAPTCHA dan halaman tantangan reCAPTCHA:

Contoh skrip berikut menunjukkan cara menggunakan token tindakan reCAPTCHA dan mengalihkan ke halaman tantangan reCAPTCHA dengan token tindakan 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 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>

Langkah selanjutnya