Menginstal kunci kotak centang (tantangan kotak centang) di situs

Halaman ini menjelaskan cara menginstal kunci kotak centang dengan tantangan kotak centang Saya bukan robot di situs Anda. Bergantung pada cara Anda mengonfigurasi opsi keamanan tantangan saat membuat kunci kotak centang, reCAPTCHA mungkin mengharuskan pengguna akhir untuk menyelesaikan tantangan CAPTCHA sebelum membuat token yang valid.

Sebelum memulai

  1. Siapkan lingkungan Anda untuk reCAPTCHA.

  2. 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 konsolGoogle Cloud , lakukan langkah-langkah berikut:

      1. Buka halaman reCAPTCHA.

        Buka reCAPTCHA

      2. Di 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:

Merender widget secara otomatis

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

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

Dalam 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 selengkapnya, lihat Tindakan.

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

reCAPTCHA menggunakan bahasa browser secara default. Jika Anda 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.

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>

Merender widget secara eksplisit

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 perlombaan saat merender widget secara eksplisit, tinjau pertimbangan berikut:

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

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

  1. Untuk menunda rendering widget, lakukan hal berikut:

    1. Tentukan fungsi callback onload sebelum reCAPTCHA 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.

      • parameters: Objek yang berisi parameter sebagai pasangan nilai kunci, misalnya, {"sitekey": "KEY_ID", "theme": "light"}.

      • action: Tentukan nama tindakan yang terkait dengan elemen yang dilindungi.

      grecaptcha.enterprise.render('html_element', {
   'sitekey' : 'KEY_ID',
   'action': 'LOGIN',
 });

  2. Untuk merender widget, masukkan resource JavaScript. Tetapkan onload ke nama fungsi callback onload Anda, dan sertakan render=explicit.

    reCAPTCHA menggunakan bahasa browser secara default. Jika Anda 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.

     <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 berikutnya