Halo semuanya, kembali lagi di tulisan saya. Baiklah pada kesempatan kali ini kita akan belajar cara menggunakan recaptcha google agar form validasi yang kita buat lebih aman. Bagaimana cara membuatnya?, ayo ikuti tutorialnya berikut ini.
Captcha adalah salah satu solusi yang dapat diterapkan untuk mengatasi masalah brute force attack pada form yang kita buat. Sekilas tentang brute force attack. Brute force attack atau serangan paksa adalah sebuah serangan terhadap sistem dengan cara membanjiri permintaan ke server dengan tujuan untuk mendapatkan akses masuk ke dalam sistem tersebut. Biasanya menggunakan bot dengan ratusan hingga ribuan kali percobaan paksa(menebak akses login) untuk mencoba masuk ke dalam sistem tersebut.
Google captcha |
Dengan menggunakan captcha, maka bot harus menebak challenge di setiap melakukan perulangan. Apalagi saat ini model challenge pada captcha banyak jenisnya. Semakin sulit jenis captcha yang kalian pilih, maka akan semakin memperlambat kerja bot untuk mendapatkan akses masuk ke dalam sistem terebut.
Kalian bisa membuat sendiri captcha atau menggunakan library yang sudah ada. Berikut ini link cara membuat captcha secara manual https://www.fromsunda.eu.org/2020/03/cara-mudah-membuat-captcha-di-php-tanpa.html.
Untuk tutorial kali ini, kita akan menggunakan library no-captcha yang akan kita terapkan pada framework laravel. Kita akan menggunakan laravel 7 dan menggunakan captcha pada form register dan login nantinya. Pemahaman dasar tentang laravel dan autentikasinya sangat dibutuhkan untuk mengikuti tutorial kali ini.
Baca Artikel Lain ✨ |
📰 1. Cara Cepat Membuat Back-end Restful API Tanpa Coding dengan Typicode Json Server read more |
📰 2. Cara Menggunakan Library Datatable Serverside di Laravel Moodle read more |
📰 3. Cara Membuat Import Data Excel ke Database Mysql dengan php read more |
📰 4. Cara Membuat Peta Digital dengan Leafletjs, Alternatif Peta Digital tanpa Google Maps API read more |
Cara Menggunakan Google Captcha pada Laravel
1. Install Laravel dan Membuat Laravel Auth
composer create-project --prefer-dist laravel/laravel:^7.0 latihan_captcha
composer require laravel/ui:^2.4
php artisan ui vue --auth
npm install
npm run dev
php artisan migrate
Tampilan laravel setelah diinstall auth |
2. Membuat Google re-Captcha
2.1 Kunjungi laman berikut ini untuk membuat site key dan secret key re-captcha https://www.google.com/recaptcha/admin/create. Selanjutnya ikuti instruksi membuatnya seperti gambar di bawah ini.
Setting captcha |
Catatan: jika kalian menjalankan laravel dalam versi local(tanpa domain) maka masukkan localhost dan 127.0.0.1 pada bagian domains.
Setelah form dan setting berhasil disimpan. Maka kalian akan mendapatkan secret key seperti gambar di bawah ini. Silahkan copy dan simpan key tersebut untuk dipaste ke dalam file .env
Site Key dan Secret key |
2.2 Selanjutnya buka file .env lalu tambahkan secret key dan site key yang telah kita dapatkan sebelumnya. seperti gambar di bawah ini.
Paste secret key dan site key di file .env |
3. Instalasi Library no-captcha
composer require anhskohbo/no-captcha
4. Setting dan Memasang no-captcha pada saat Registrasi
<div class="form-group row">
<div class="col-md-4"></div>
<div class="col-md-6">
{!! NoCaptcha::display() !!}
{!! NoCaptcha::renderJs() !!}
@error('g-recaptcha-response')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
return Validator::make($data, [
.....
'g-recaptcha-response' => 'required|captcha'
]);
Tampilan form register setelah di tambah captcha |
5. Setting dan Memasang no-captcha pada saat Login
<div class="form-group row">
<div class="col-md-4"></div>
<div class="col-md-6">
{!! NoCaptcha::display() !!}
{!! NoCaptcha::renderJs() !!}
@error('g-recaptcha-response')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
$request->validate([
.....
'g-recaptcha-response' => 'required|captcha'
]);
Jika dijalankan maka tampilan halaman loginnya akan tampak seperti gambar di bawah ini.
Halaman login dengan captcha |
Sekian tutorial cara menggunakan google captcha pada laravel. Semoga tutorial singkat ini bermanfaat untuk kalian semua. Jika ada yang kurang jelas atau membingungkan silahkan langsung tanya di kolom komentar di bawah ini. Sampai jumpa di tutorial menarik lainnya :).
Posting Komentar