Instal tombol kotak centang (ujian kotak centang) di situs

Halaman ini menjelaskan cara menginstal kunci kotak centang dengan tantangan kotak centang I'm not a robot di situs Anda. Bergantung pada cara Anda mengonfigurasi opsi keamanan verifikasi login saat membuat kunci kotak centang, reCAPTCHA Enterprise mungkin mengharuskan pengguna akhir untuk menyelesaikan verifikasi CAPTCHA sebelum membuat token yang valid.

Sebelum memulai

Siapkan lingkungan Anda untuk reCAPTCHA Enterprise.
Buat kunci kotak centang.

Atau, Anda dapat menyalin ID kunci kotak centang yang ada dengan melakukan salah satu langkah berikut:
- Untuk menyalin ID kunci yang ada dari Google Cloud Console, lakukan hal berikut:
  1. Buka halaman reCAPTCHA Enterprise.
    
    Buka reCAPTCHA Enterprise
  2. Dalam daftar kunci reCAPTCHA, arahkan kursor ke kunci yang ingin Anda salin, lalu klik .
- Untuk menyalin ID kunci yang ada menggunakan REST API, gunakan metode projects.keys.list.
- Untuk menyalin ID kunci yang ada menggunakan gcloud CLI, gunakan perintah gcloud recaptcha keys list.

Merender widget reCAPTCHA di frontend

Untuk menampilkan widget reCAPTCHA di halaman web Anda, gunakan salah satu metode berikut:

Dengan metode ini, Anda dapat merender widget pada objek apa pun (seperti div atau span) dengan class g-recaptcha.

Di halaman web Anda, sertakan resource JavaScript yang diperlukan dan elemen HTML dengan class g-recaptcha.

Pada elemen dengan class g-recaptcha, sertakan juga atribut data-sitekey dan tetapkan agar sama dengan kunci kotak centang Anda.

Untuk menentukan tindakan, sertakan atribut data-action dan tetapkan ke nama tindakan. Untuk panduan lebih lanjut, lihat Tindakan.

Skrip harus dimuat menggunakan protokol HTTPS dan dapat disertakan dari titik mana pun di halaman tanpa batasan.

reCAPTCHA Enterprise menggunakan bahasa browser secara default. Jika ingin menentukan bahasa lain, gunakan atribut hl=LANG dalam skrip Anda. Misalnya, untuk menggunakan bahasa Prancis, tentukan hal berikut: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Untuk mempelajari bahasa yang didukung, lihat kode bahasa untuk reCAPTCHA Enterprise.

Contoh berikut adalah cuplikan kode contoh:

    <html>
      <head>
        <title>reCAPTCHA demo: Simple page</title>
        <script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>
      </head>
      <body>
        <form action="?" method="POST">
          <div class="g-recaptcha" data-sitekey="KEY_ID" data-action="LOGIN"></div>
          <br/>
          <input type="submit" value="Submit">
        </form>
      </body>
    </html>

Dengan metode ini, Anda dapat merender widget melalui skrip JavaScript yang ada menggunakan metode grecaptcha.enterprise.render(). Gunakan metode ini untuk menghindari kondisi race atau jika Anda ingin menampilkan widget berdasarkan logika JavaScript yang ada.

Untuk memastikan tidak ada kondisi race saat merender widget secara eksplisit, tinjau pertimbangan berikut:

Urutkan skrip Anda dengan fungsi callback terlebih dahulu, lalu reCAPTCHA Enterprise API.
Gunakan parameter async dan defer dalam tag script.

Untuk merender widget secara eksplisit, ikuti langkah-langkah berikut:

Untuk menunda rendering widget, lakukan hal berikut:
1. Tentukan fungsi callback onload sebelum reCAPTCHA Enterprise API dan dependensi lainnya dimuat.
```
 <script type="text/javascript">
 var onloadCallback = function() {
    alert("grecaptcha is ready!");
 };
 </script>
```
2. Setelah fungsi callback dieksekusi, panggil metode grecaptcha.enterprise.render() dengan parameter berikut dari JavaScript API.
  - container: Elemen HTML untuk merender widget reCAPTCHA. Tentukan ID penampung (string) atau elemen DOM itu sendiri.
  - parameter: Objek yang berisi parameter sebagai key-value pair, misalnya {"sitekey": " KEY_ID", "theme": "light"}.
  - action: Menetapkan nama tindakan yang terkait dengan elemen yang dilindungi.
    
    Penting: Tindakan yang Anda tentukan akan ditampilkan sebagai bagian dari penilaian. Anda harus memverifikasi bahwa tindakan dalam respons JSON penilaian cocok dengan tindakan yang diharapkan yang Anda tentukan saat membuat penilaian. Misalnya, tindakan login harus ditampilkan di halaman login Anda. Jika terdapat ketidakcocokan, hal ini menunjukkan bahwa penyerang mencoba memalsukan tindakan.
```
grecaptcha.enterprise.render('html_element', {
   'sitekey' : ' KEY_ID',
   'action': 'LOGIN',
 });
```
Untuk merender widget, masukkan resource JavaScript. Tetapkan onload ke nama fungsi callback onload, dan sertakan render=explicit.

reCAPTCHA Enterprise menggunakan bahasa browser secara default. Jika ingin menentukan bahasa lain, gunakan atribut hl=LANG dalam skrip Anda. Misalnya, untuk menggunakan bahasa Prancis, tentukan hal berikut: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Untuk mempelajari bahasa yang didukung, lihat kode bahasa untuk reCAPTCHA Enterprise.
```
 <script src="https://www.google.com/recaptcha/enterprise.js?onload=onload_Callback_function&render=explicit"
    async defer>
 </script>
```

Contoh 1

Contoh kode berikut menunjukkan rendering eksplisit setelah callback onload:

<html>
   <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
     <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.enterprise.render('html_element', {
          'sitekey' : ' KEY_ID',
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
      <script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Contoh 2

Contoh kode berikut menunjukkan rendering eksplisit beberapa widget:

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
        <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.enterprise.render('example1', {
          'sitekey' : 'KEY_ID',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'KEY_ID',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'KEY_ID',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.enterprise.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.enterprise.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
     <script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Langkah selanjutnya

Untuk menilai token respons reCAPTCHA, buat penilaian.

Instal tombol kotak centang (ujian kotak centang) di situs

Sebelum memulai

Merender widget reCAPTCHA di frontend

Merender widget secara otomatis

Merender widget secara eksplisit

Langkah selanjutnya