Tutorial Cara Mudah Membuat Captcha di Laravel 8

Admin・ 5 Juni 2021

9 min read ・ 12668 views

Laravel Captcha - Captcha adalah suatu bentuk test atau challenge response test yang digunakan dalam dunia teknologi informasi untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer atau mesin. Proses ini biasanya melibatkan suatu komputer atau server yang meminta user untuk menyelesaikan suatu challenge sederhana yang dapat dihasilkan dan dinilai oleh komputer atau server tersebut. Karena komputer lain atau robot tidak dapat memecahkan Captcha, user manapun yang dapat memberikan jawaban benar maka akan dianggap sebagai manusia. Oleh karena itu, challenge ini disebut sebagai back turing test, karena dikelola oleh mesin dan ditunjukkan untuk manusia, kebalikan dari standard turing test yang biasanya dikelola oleh manusia dan ditunjukkan untuk suatu mesin. Captcha umumnya menggunakan huruf atau angka dari citra terdistorsi yang muncul di layar.

Istilah "CAPTCHA" (berasal dari kata bahasa inggris "capture" atau menangkap) diciptakan pada tahun 2000 oleh Luis von Ahn, Manuel Blum, Nicholas J. Hopper (semua dari Carnegie Mellon University) dan John Langford (IBM). Istilah ini adalah akronim bahasa inggris dari "Completely Automated Public Turing Test to Tell Computers and Humans Apart".

Sumber: Wikipedia

Di artikel ini saya akan membagikan bagaimana cara membuat atau menerapkan captcha pada fitur register di laravel 8 untuk memastikan bahwa yang register adalah manusia. Di percobaan ini nanti saya akan memakai laravel captcha package dari Mewebstudio.

Mulai Koding Laravel Captcha

Baiklah, setelah mengerti dan paham apa itu captcha, sekarang waktunya kita ke koding untuk membuat atau menerapkan captcha di fitur register laravel 8.

Install Laravel

composer create-project laravel/laravel laravel-captcha

Baiklah, kita mulai dengan install laravel versi terbaru (saat ini versi 8.47.0). Jalankan perintah di atas untuk install laravel via composer.

Install Laravel UI Package

composer require laravel/ui
php artisan ui bootstrap --auth
npm install
npm run dev

Di percobaan ini, kita akan menggunakan laravel ui untuk membuat authentication. Disini kita akan menggunakan authentication karena kita akan menggunakan captcha untuk fitur register. Jadi, jika user tidak bisa menyelesaikan captcha maka user tersebut tidak bisa register. Jalankan perintah-perintah di atas secara berurutan pada terminal.

Buat Database

Kemudian setelah proses install laravel ui package sudah selesai, lanjutkan dengan membuat database baru untuk menampung data-data user. Karena saya memakai xampp sebagai local server saya, maka saya akan membuat database baru dengan nama laravel-captcha di phpMyAdmin. Jangan lupa untuk menyesuaikan DB_DATABASE di file .env dengan nama database yang baru saja dibuat dan jalankan php artisan migrate. 

Install Laravel Captcha Package

composer require mews/captcha

Setelah proses install laravel selesai, sekarang kita install captcha package dari mewebstudio. Jalankan perintah di atas pada terminal untuk install captcha package.

 Setup Captcha Package

Untuk dapat menggunakan captcha package di laravel project, kita harus mendaftarkan service provider di config/app. Silahkan buka file config/app, lalu tambahkan captcha service provider dan aliases seperti contoh di bawah ini.

'providers' => [

        .......
        .......
        .......
        /*
         * Package Service Providers...
         */
        Mews\Captcha\CaptchaServiceProvider::class,

        .....
        .....
    ],

'aliases' => [
       ......
       ......
        'Captcha' => Mews\Captcha\Facades\Captcha::class,
       ......
    ],

Configuration

php artisan vendor:publish

Untuk konfigurasi lanjutan, kita bisa publish service provider untuk  Mews\Captcha\CaptchaServiceProvider::class,. File captcha configuration terletak pada config/captcha. Di file captcha ini lah kita bisa menyesuaikan captcha sesuai dengan kebutuhan aplikasi atau website laravel kita.

Tambah Route

Route::get('/reload-captcha', [App\Http\Controllers\Auth\RegisterController::class, 'reloadCaptcha']);

Langkah selanjutnya yaitu menambah route baru dengan set url /reload-captcha. Untuk apa route ini ? jadi route ini akan kita panggil saat ada request captcha baru atau reload captcha. Route ini akan diarahkan ke RegisterController atau tepatnya di function reloadCaptcha. Untuk saat ini function reloadCaptcha belum ada di RegisterController.php kita, jadi kita akan buat di langkah berikutnya.

Edit Auth/RegisterController.php

protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
            'captcha' => ['required','captcha'],
        ]);
    }
   
    public function reloadCaptcha()
    {
        return response()->json(['captcha'=> captcha_img()]);
    }

Sekarang buka file App/Http/Controller/RegisterController.php. Disini kita akan menambah validasi baru untuk captcha, sehingga untuk saat ini function validator kita akan seperti kode di atas dengan tambahan captcha. Kemudian kita akan buat function baru untuk reload captcha, function reloadCaptcha tersebut bisa dilihat juga seperti kode di atas.

Edit Auth/register.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Register') }}</div>
                <div class="card-body">
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    <br />
                    @endif
                    <form method="POST" action="{{ route('register') }}">
                        @csrf
                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                                @error('name')
                                <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="captcha" class="col-md-4 col-form-label text-md-right">Captcha</label>
                            <div class="col-md-6 captcha">
                                <span>{!! captcha_img() !!}</span>
                                <button type="button" class="btn btn-danger" class="reload" id="reload">
                                &#x21bb;
                                </button>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="captcha" class="col-md-4 col-form-label text-md-right">Enter Captcha</label>
                            <div class="col-md-6">
                                <input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha">
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                {{ __('Register') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $('#reload').click(function () {
        $.ajax({
            type: 'GET',
            url: 'reload-captcha',
            success: function (data) {
                $(".captcha span").html(data.captcha);
            }
        });
    });
</script>
@endpush

Kemudian kita akan masuk ke file register.blade.php, disini kita akan menambahkan form group untuk menampilkan captcha dan membuat form input untuk captcha. Selain itu, kita juga menambahkan alert danger untuk menampilkan pesan validasi jika captcha yang diinputkan tidak sesuai. Kita juga membuat script AJAX untuk memanggil route reload-captcha saat button dengan id reload diklik. Perlu diperhatikan, disini kita menambahkan @push('scripts'), jadi kita juga perlu menambahkan @stack('scripts') di file layouts/app.blade.php sebelum tag </body>.

Pengujian Laravel Captcha

Setelah melewati proses panjang mulai dari install laravel, laravel ui package, laravel captcha package sampai dengan menampilkan captcha di register form, sekarang waktunya pengujian. Silahkan coba dengan membuka URL 127.0.0.1:8000/register atau laravel-captcha.test/register, pada form Enter Captcha coba masukkan text yang tidak sesuai dengan captcha yang ditampilkan, maka hasilnya kita tidak bisa melanjutkan register karena captcha yang diinputkan salah.

Kesimpulan

Pada artikel ini, kita sudah sama-sama belajar bagaimana cara mudah membuat atau menerapkan captcha pada fitur register di laravel 8 dengan menggunakan laravel captcha package dari mewebstudio. Dengan package tersebut, kita bisa dengan mudah sekali menerapkan captcha dan memberikan keamanan website kita dari serangan robot atau spam user.

Sekian artikel kali ini, jika ada kritik, saran atau apapun itu yang ingin didiskusikan silahkan tulis komentar pada form komentar yang tersedia di bawah ini. See you.

Device illustrations by Storyset