Cara Menggunakan Google Captcha pada Laravel

Halo semuanya, kembali lagi di sahretech. 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.sahretech.com/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

Tutorial ini sedikit panjang, itu karena saya memasukkan cara instalasi dan membuat laravel autentikasi di dalamnya. Jika kalian sudah paham cara instalasi dan membuat laravel auth, silahkan langsung menuju ke poin 2 hingga seterusnya.

1. Install Laravel dan Membuat Laravel Auth

1.1 Jalankan perintah di bawah ini dengan cmd atau terminal untuk menginstall laravel baru dengan versi 7

    

composer create-project --prefer-dist laravel/laravel:^7.0 latihan_captcha

1.2 Lalu buat database baru di dalam phpmyadmin dengan nama laravel. Laravel adalah default database name yang diberikan laravel saat pertama kali melakukan instalasi. Jika ingin diubah, maka ubahlah nama database di dalam file .env

1.3 Buatlah autentikasi pada laravel dengan menjalankan perintah di bawah ini dengan cmd atau terminal secara bergantian. Perintah di bawah ini akan mendownload package laravel ui

    

composer require laravel/ui:^2.4

Kemudian jalankan perintah di bawah ini untuk membuat file-file autentikasi seperti register, login, dsb.

    

php artisan ui vue --auth

Karena kita menggunakan vue untuk authentikasinya maka jalankan perintah di bawah ini untuk mendownload depedensi dengan npm.

    

npm install

Kemudian jalankan perintah di bawah ini untuk mengcompile javascript ke project laravel.

    

npm run dev

1.4 Selanjtunya, jalankan perintah di bawah ini dengan cmd atau terminal untuk membuat tabel users dan beberapa tabel lainnya ke dalam database.

    

php artisan migrate

Sampai tahap pertama ini selesai, kalian sudah bisa melakukan registrasi dan login ke dalam aplikasi laravel yang kalian buat. Tampilan laravelnya akan berubah seperti gambar di bawah ini.

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 

Jalankan perintah di bawah ini dengan terminal atau cmd untuk mendownload library no-captcha ke dalam project laravel.

    

composer require anhskohbo/no-captcha

4. Setting dan Memasang no-captcha pada saat Registrasi

4.1 Buka file register.blade.php di dalam folder views/resources/auth dan tambahkan script di bawah ini sebelum tombol register 

    

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

4.2 Lalu buka file RegisterController.php di dalam folder app/Http/Controllers/Auth dan tambahkan script di bawah ini di dalam return validator:make($data, [ ... ]).

        
    

return Validator::make($data, [
    .....
     'g-recaptcha-response' => 'required|captcha'
]);

Jika dijalankan maka tampilan halaman registrasinya akan tampak seperti gambar di bawah ini.

Tampilan form register setelah di tambah captcha

5. Setting dan Memasang no-captcha pada saat Login

5.1 Buka file login.blade.php di dalam folder resources/views/auth lalu tambahkan script di bawah ini sebelum tombol 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>

5.2 Buka file AuthenticatesUsers.php di dalam folder vendor/laravel/ui/auth-backend lalu tambahkan script di bawah ini di dalam fungsi $request->validate([ ..... ]) 

        
    
$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 :).