Tutorial Pasang Google reCAPTCHA Di Website

reCaptcha digunakan dalam memvalidasi ketika berinteraksi dalam website apakah user atau bot. Goo...
Penulis
Admin
Kategori
Tutorial
Estimasi
4 menit baca
Dilihat
2.1K
Posting
27 Dec 2021
Tutorial Pasang Google reCAPTCHA Di Website reCaptcha digunakan dalam memvalidasi ketika berinteraksi dalam website apakah user atau bot. Google memperkenalkan layanan gratis yaitu Google reCaptcha yang bisa digunakan untuk memproteksi website. Tutorial Pasang Google reCAPTCHA Di Website
2022-11-25

Sebelum layanan captcha ini ada, biasanya pemilik website mengunakan metode verifikasi dengan cara mencocokan beberapa string acak kedalam server. Saat ini, cara seperti itu sudah usang dan tidak digunakan lagi. Terdapat metode yang efektif dan sederhana yaitu dengan mengunakan layanan captcha. Captcha merupakan salah satu metode untuk melindungi website yang cukup mudah untuk diimplementasikan, proses installasinya pun mudah dan disertai keamanan yang terjamin dari serangan peretas atau orang yang tidak bertanggung jawab.

Berbicara soal website, keamanan adalah hal yang sangat penting untuk diperhatikan, terutama yang berhubungan dengan spamming dan bot. Spamming atau bot ini sering terjadi oleh website-website yang memiliki beberapa form untuk diproses oleh server, apalagi form tersebut tidak memiliki keamanan yang ketat. Biasanya dampak yang dirasakan cukup menganggu dan bisa membuat server menjadi overload traffic. Oleh karena itu, pemilik website atau developer biasanya menerapkan captcha sebagai solusi dari permasalahan ini.

Sebenarnya banyak layanan yang menawarkan captcha untuk melindungi website kalian, namun disini kita menyarankan untuk mengunakan layanan captcha dari Google yaitu reCAPTCHA, alasannya cukup sederhana, layanan ini mudah sekali untuk digunakan dan sistem keamanannya yang tinggi. Metode ini sering juga dipakai dalam aplikasi berbasis CRUD dengan menggunakan PHP atau bahasa pemrograman lainnya.

 

Tutorial Pasang Google reCAPTCHA Di Website

 

 

Apa itu Google reCAPTCHA

Google reCAPTCHA adalah sebuah metode verifikasi untuk membuktikan bahwa pengguna adalah manusia, bukan bot atau automatic script. Secara sederhana, metode ini akan mencegah request yang berulang dari segala jenis bot atau spamming, yaitu dengan cara mencocokkan beberapa gambar untuk verifikasi. Hal ini akan membuat website kalian jauh lebih aman.

Oleh karena itu, metode ini biasa digunakan untuk mengamankan form seperti login, register, komentar blog, review dari serangan bot atau spam.

Layanan ini mendukung dari berbagai browser modern seperti Chrome, Mozilla, Safari, Edge, Opera dan lainnya. Dan perlu kamu ketahui, layanan ini memiliki 3 versi diantaranya:

  • 1. reCAPTCHA Enterprise

Pertama kali diluncurkan pada tahun 2020, yang memberikan layanan kepada pengguna untuk melindungi dari scam dan dapat diintegrasikan kedalam aplikasi seluler/mobile dengan menggunakan layanan API.

  • 2. reCAPTCHA v3

Layanan ini diluncurkan pada tahun 2018, sebuah layanan yang akan melindungi website dari spam, scam dengan cara memverifikasi dengan metode tertentu dan memberikan tindakan disetiap request yang masuk.

  • 3. reCAPTCHA v2

Layanan ini adalah versi kedua dan cukup populer digunakan oleh website-website diseluruh dunia untuk melindungi form dalam situs mereka, pertama kali diluncurkan pada tahun 2014 yang berfungsi untuk memverifikasi setiap pengguna ketika melakukan request kedalam server, yaitu dengan cara mencentang saya bukan robot pada widget. 

Kali ini kita akan memberikan tutorial bagaimana cara untuk mengintegrasikan layanan ini kedalam aplikasi PHP dengan menggunakan reCAPTCHA v2.

 

Mendapatkan API Key reCAPTCHA

Terdapat dua key yang penting dalam layanan ini yaitu secret key dan site key. Secret key digunakan sebagai token autentikasi kedalam layanan untuk mendapatkan response dari API Google, lalu site key digunakan untuk mengintegrasikan dengan website yang dituju untuk menampilkan widget khusus.

Untuk mendapatkan kedua key tersebut, kalian harus mendaftarkan website terlebih dahulu di Google reCaptcha, hal ini sangat penting dilakukan agar widget captcha muncul dihalaman website kalian.

 

Tutorial integrasi reCAPTCHA dengan website PHP

 

  • 1. Label

Isi label apapun yang kalian inginkan, label ini adalah nama project dari reCAPTCHA dari website kalian.

  • 2. reCAPTCHA type

Untuk type, bisa samakan saja dengan memilih tipe v2 dan i'm not robot checkbox.

  • 3. Domains

Isi nama domain sesuai dengan nama domain yang akan didaftarkan, untuk pilihan domain sendiri bisa mendaftarkan lebih dari satu domain. Dan perlu diketahui untuk tidak menggunakan https atau http diawalan, cukup isi dengan contoh.com saja.

Setelah itu centang term of services dan klik tombol submit. Dan kalian sudah berhasil mendapatkan secret key dan site key.

 

Tutorial integrasi reCAPTCHA dengan website PHP

 

Integrasi Google reCAPTCHA dengan website

Setelah mendapatkan secret key dan site key, pertama kali yang harus dilakukan adalah menambahkan library Javascript khusus kedalam HTML. Jika tidak dilakukan, maka widget captcha tidak akan muncul. Widget yang dimaksud adalah seperti ini:

 

Tutorial integrasi reCAPTCHA dengan website PHP

 

Letakkan library Javascript yang dibutuhkan tepat sebelum tag penutup body

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Setelah itu, tambahkan kode HTML khusus dibawah ini untuk menyimpan site key kedalam form halaman website kalian:

<div class="g-recaptcha" data-sitekey="masukan_site_key_disini"></div>

Kalian bisa meletakan kode HTML ini dimanapun selama masih berada didalam tag form. Perlu diketahui, kode HTML ini sangat penting, karena untuk menyimpan dan mengirimkan kode dari pengguna kedalam server, yang nantinya akan dikirimkan ke API Google untuk dicek.

Contoh versi fullnya:

<form id="form" action="contoh_verify_recaptcha.php" method="POST">
  <div class="g-recaptcha" data-sitekey="masukan_site_key_disini"></div>
  <input type="Submit" name="Submit">
</form>

 

Memvalidasi status verifikasi dalam Google reCAPTCHA

Selanjutnya kita akan melakukan verifikasi kedalam API Google dengan mengunakan PHP. Pada tahap ini, server akan mengambil kode captcha dari pengguna dan mengirimkannya kedalam API Google untuk dicek.

Untuk menerima response dari API Google, kalian bisa mengunakan dengan dua metode yaitu cURL atau file_get_contents, pilih saja sesuai dengan yang kalian inginkan. Silahkan buat file baru dan beri nama contoh_verify_recaptcha.php dan copy paste kode dibawah ini:

1. Mengunakan file_get_contents

Berikut adalah contoh implementasi validasi API dengan mengunakan metode file_get_contents:

<?php

if (!empty($_POST["g-recaptcha-response"])) {
    $generate_code = $_POST["g-recaptcha-response"];
    $secret = "COPY_PASTE_SECRET_KEY_KALIAN_DISINI";

    $verify = file_get_contents(
        "https://www.google.com/recaptcha/api/siteverify?secret=" .
            $secret .
            "&response=" .
            $generate_code
    );
    $response = json_decode($verify);

    if ($response->success) {
        $message = "Berhasil diverifikasi";
    } else {
        $message = "Gagal diverifikasi";
    }

    echo $message;
}

 

2. Mengunakan cURL

Berikut adalah contoh implementasi validasi API dengan mengunakan metode cURL:

<?php

if (!empty($_POST["g-recaptcha-response"])) {
    $generate_code = $_POST["g-recaptcha-response"];
    $secret = "COPY_PASTE_SECRET_KEY_KALIAN_DISINI";

    $data = [
        "secret" => $secret,
        "response" => $generate_code,
    ];

    $verify = curl_init();
    curl_setopt(
        $verify,
        CURLOPT_URL,
        "https://www.google.com/recaptcha/api/siteverify"
    );
    curl_setopt($verify, CURLOPT_POST, true);
    curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data));
    curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);
    $jsonresponse = curl_exec($verify);
    $response = json_decode($jsonresponse);

    if ($response->success) {
        $message = "Berhasil diverifikasi";
    } else {
        $message = "Gagal diverifikasi";
    }

    echo $message;
}

 

Cara kerja dari layanan ini cukup sederhana, server akan mengirimkan data yang dibutuhkan kedalam API Google lalu menerima request dan mengirimkan response kedalam server kalian.

Hasil response tersebut akan menunjukkan apakah proses verifikasi sudah berhasil atau tidak, response ini akan diberikan berupa boolean (true atau false) didalam array key success, jika response yang diberikan adalah true, maka reCAPTCHA yang diinputkan pengguna sudah berhasil di proses, begitupun sebaliknya. 

Dan Google reCAPTCHA pun sudah berhasil terintegrasi dengan halaman website kalian. 

 

Kesimpulan

Layanan Google reCAPTCHA ini bisa digunakan untuk keperluan apapun untuk melindungi halaman website kalian dari spamming dan bot seperti halaman login, contact, register, komentar blog dan masih banyak lagi.

Share