Implementasi Google reCaptcha di Laravel

0
161
Implementasi Google reCaptcha di Laravel

Captcha (Tes Turing Publik yang Diotomatisasikan Sepenuhnya untuk Memberitahu Komputer dan Manusia) adalah bentuk uji tantangan-respons yang digunakan untuk memastikan bahwa jawaban tidak dihasilkan oleh komputer atau bot. Dengan kata lain Captcha ini digunakan untuk mengidentifikasi perangkat yang digunakan oleh manusia atau bot. Jika manusia mengoperasikan perangkat, akan mudah untuk mengisi kodenya captcha, tetapi captcha dibuat lebih sulit untuk bot.

Satu layanan CAPTCHA yang sangat bagus adalah reCAPTCHA yang ada di manajemen salah satu raksasa internet, Google. reCAPTCHA mampu memberikan tantangan CAPTCHA kompleks tetapi masih mudah untuk dipecahkan oleh pengguna biasa. Oleh karena itu, dalam artikel ini kita akan membahas bagaimana menerapkan Google reCaptcha di Laravel.

Implementasi Google reCaptcha di Laravel
Google reCaptcha

Pengaturan ReCAPTCHA

Pertama-tama kita harus memiliki 2 kunci yang diperlukan untuk mengimplementasikan reCAPTCHA dalam aplikasi kita. Kuncinya adalah kunci situs dan kunci rahasia. Untuk mendapatkannya, kita harus mendaftarkan situs web kita di halaman google reCAPTCHA melalui tautan di bawah ini.

Kemudian klik ikon plus untuk mendaftarkan situs web kami sehingga dapat diintegrasikan dengan google reCaptcha.

Google reCaptcha Daftarkan situs baru

Dalam contoh ini kita akan menggunakan reCaptcha versi 2, silakan isi data lain dalam formulir di atas sesuai kebutuhan. Setelah mengisi formulir di atas, kita akan diarahkan ke halaman pengaturan kunci untuk mendapatkan 2 kunci (kunci situs dan kunci rahasia) yang harus kita gunakan untuk menerapkan Google reCaptcha di Laravel.

kunci reCaptcha
kunci reCaptcha

Langkah di atas adalah langkah terakhir dalam menyiapkan google reCaptcha, maka kita akan membahas apa yang harus kita persiapkan untuk proyek Laravel kita.

Instal paket Laravel reCaptcha

Dalam tutorial ini kita akan menggunakan paket untuk mengimplementasikan Google reCaptcha di Laravel.

Untuk menginstal paket gunakan perintah komposer di bawah ini.

komposer membutuhkan anhskohbo / no-captcha

Publikasikan file config menggunakan perintah di bawah ini

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

Pengaturan

Seperti yang kita bahas sebelumnya, kita perlu mendefinisikan 2 kunci dari Google reCaptcha sehingga proyek Laravel yang kita buat dapat diintegrasikan dengan Google ReCaptcha.

Untuk mengkonfigurasi kunci dari google reCaptcha kita perlu mendefinisikan NOCAPTCHA_SECRET dan NOCAPTCHA_SITEKEY pada file .env dalam proyek Laravel kami.

NOCAPTCHA_SECRET = kunci-rahasia
NOCAPTCHA_SITEKEY = kunci situs

Menggunakan

Untuk menampilkan google reCaptcha dalam tampilan Laravel, pertama-tama kita harus memasukkan kode javascript dari google reCaptcha pada halaman tampilan dengan menggunakan kode di bawah ini

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

Tampilan ReCaptcha

Langkah selanjutnya untuk menampilkan reCaptcha pada halaman tampilan adalah menambahkan kode di bawah ini

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

Silakan tambahkan kode di atas ke tampilan yang akan menampilkan Google reCaptcha. Jika semua konfigurasi di atas benar, Google reCaptcha akan muncul pada halaman tampilan yang digunakan seperti contoh di bawah ini. Dalam contoh ini saya menggunakan tampilan login untuk menampilkan Google reCaptcha.

sampel recaptcha

Validasi reCaptcha

Setelah google reCaptcha muncul di halaman tampilan, langkah selanjutnya yang harus kita pastikan adalah bahwa pengguna memeriksa Google reCaptcha dengan menambahkan aturan validasi.

Untuk memvalidasi captcha ini, kita hanya perlu menambahkan & # 39; g-recaptcha-respons & # 39; => & # 39; wajib | captcha & # 39; di aturan validasi yang kami gunakan.

Implementasi Google reCaptcha di Laravel
validasi captcha

Jika pengguna mengirimkan formulir tanpa memeriksa Google reCaptcha, maka pesan di atas akan muncul.

Posting Implementasi Google reCaptcha di Laravel muncul pertama kali di Lab-Informatika.

LEAVE A REPLY

Please enter your comment!
Please enter your name here