Contoh integrasi dengan Google Cloud Armor

Dokumen ini menunjukkan contoh cara menerapkan fitur reCAPTCHA untuk WAF untuk Google 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. 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 dimuat ulang secara berkala, misalnya, halaman login. Konfigurasikan aturan kebijakan keamanan Google Cloud Armor untuk mengalihkan permintaan ke halaman reCAPTCHA jika skornya rendah.

Ilustrasi berikut menunjukkan alur kerja yang menggunakan token sesi reCAPTCHA dan fitur 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 reCAPTCHA dalam salah satu kondisi berikut:

  • Skornya rendah.
  • Atribut action_name token tindakan tidak cocok dengan tindakan pengguna yang dilindungi.

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

Contoh skrip berikut menunjukkan cara menggunakan token tindakan reCAPTCHA dan mengarahkan ulang 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 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