1. Laravel
  2. PHP

Implementasi Google reCaptcha pada Laravel

Captcha (Completely Automated Public Turing Test to Tell Computers and Humans Apart) adalah suatu bentuk uji tantangan-tanggapan (challenge-response test) yang digunakan untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer atau bot. Dengan kata lain Captcha ini digunakan untuk mengidentifikasi sebuah perangkat dipakai oleh manusia atau bot. Jika manusia yang mengoperasikan perangkat, maka akan mudah untuk mengisi kode captcha, akan tetapi captcha dibuat lebih sulit untuk bot.

Salah satu layanan CAPTCHA yang sangat bagus adalah reCAPTCHA yang berada dalam pengelolaan salah satu raksasa internet yaitu Google. reCAPTCHA mampu memberikan tantangan CAPTCHA yang kompleks namun tetap mudah diselesaikan pengguna biasa. Oleh karena itu, pada artikel kali ini kita akan membahas bagaimana cara implementasi Google reCaptcha pada Laravel.

Implementasi Google reCaptcha pada Laravel
Google reCaptcha

Setting reCAPTCHA

Pertama-tama kita harus memiliki 2 key yang diperlukan untuk mengimplementasikan reCAPTCHA pada aplikasi kita. Key tersebut adalah site key dan secret key. Untuk mendapatkannya, kita harus mendaftarkan website kita pada halaman google reCAPTCHA melalui link dibawah ini.

Kemudian klik pada ikon plus untuk mendaftarkan website kita agar bisa di integrasikan dengan google reCaptcha.

Google reCaptcha Register new site

Pada contoh kali ini kita akan menggunakan reCaptcha versi 2, silahkan isi data yang lain pada form diatas sesuai dengan kebutuhan. Setelah mengisi form diatas, kita akan diarahkan kehalaman setup key untuk mendapatkan 2 key (site key dan secret key) yang harus kita gunakan untuk implementasi Google reCaptcha pada Laravel.

reCaptcha keys
reCaptcha keys

Langkah diatas merupakan langkah terakhir dalam pengaturan google reCaptcha, selanjutnya kita akan membahas apa saja yang harus kita persiapkan pada project Laravel kita.

Install Laravel reCaptcha package

Pada tutorial kali ini kita akan menggunakan sebuah package untuk implementasi google reCaptcha di Laravel.

Untuk menginstal package gunakan perintah composer dibawah ini.

composer require anhskohbo/no-captcha

Publish config file dengan menggunakan perintah dibawah ini

php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"

Pengaturan

Seperti yang telah kita bahas sebelumnya, kita perlu mendefinisikan 2 buah keys dari google reCaptcha agar project Laravel yang kita buat bisa terintegrasi dengan google reCaptcha.

Untuk konfigurasi keys dari google reCaptcha kita perlu mendefinisikan NOCAPTCHA_SECRET dan NOCAPTCHA_SITEKEY pada file .env di project Laravel kita.

NOCAPTCHA_SECRET=secret-key
NOCAPTCHA_SITEKEY=site-key

Penggunaan

Untuk menampilkan google reCaptcha pada view Laravel, pertama kita harus menginclude kode javascript dari google reCaptcha pada halaman view dengan menggunakan kode dibawah ini

 {!! NoCaptcha::renderJs() !!}

Display reCaptcha

Langkah selanjutnya untuk menampilkan reCaptcha pada halaman view tambahkan kode dibawah ini

{!! NoCaptcha::display() !!}

Silahkan tambahkan kode diatas pada view yang akan menampilkan google reCaptcha. Jika semua konfigurasi diatas telah sesuai, google reCaptcha akan muncul pada halaman view yang digunakan seperti contoh dibawah ini. Pada contoh ini saya menggunakan view login untuk menampilkan google reCaptcha.

recaptcha sample

reCaptcha Validation

Setelah google reCaptcha muncul pada halaman view, langkah selanjutnya kita harus memastikan bahwa pengguna menceklis google reCaptcha dengan menambahkan rules validasi.

Untuk memvalidasi captcha ini kita hanya perlu menambahkan 'g-recaptcha-response' => 'required|captcha' pada validation rules yang kita gunakan.

Implementasi Google reCaptcha pada Laravel
captcha validation

Jika pengguna mensubmit form tanpa menceklis google reCaptcha, maka pesan diatas akan muncul.

Comments to: Implementasi Google reCaptcha pada Laravel

    Your email address will not be published. Required fields are marked *

    Attach images - Only PNG, JPG, JPEG and GIF are supported.