Google reCAPTCHA validation
Google reCAPTCHA validation

Integrasi Google Recaptcha v2 Dengan Framework Laravel 7.0 – Hello Laravel lover’s, pada kesempatan kali ini kami akan membahas tentang cara melakukan integrasi Google reCAPTCHA sebagai tambahan validasi saat melakukan registrasi user baru pada aplikasi Laravel.

- Advertisement -
Melayani Cetak dan Recover Buku Yasin dan Juz 'Amma serta Kalender

Pada dasarnya google recaptcha digunakan diaplikasi berbasis website sebagai tambahan untuk memvalidasi atau memverifikasi pengguna apakah benar-benar manusia atau robot, pada tutorial disini saya mengintegrasikan Google reCAPTCHA pada form register pada aplikasi laravel dengan google recpatcha v2.

Adapun secara step by step integrasi google recaptcha pada aplikasi framework laravel adalah seperti berikut.

Step 1 : Install Laravel Project
Step 2 : Mengatur Koneksi Database
Step 3 : Install dependency google recaptcha v2 dengan composer
Step 4 : Menambahkan aliases dan service provider
Step 5 : Menambahkan validasi google recaptcha pada validator
Step 6 : Mendaftarkan akun Google ReCaptcha untuk memperoleh google site key and secret key
Step 7 : Menambahkan google site key and secret key pada environment file
Step 8 : Menambahkan renderJs pada file blade app.blade.php
Step 9 : Menambahkan display Google ReCaptcha pada form register

Oke, langsung saja kita eksekusi tahap demi tahap urutan diatas, kita mulai dengan melakukan instalasi project Laravel.

Buka jendela Terminal/ Command Prompt pada PC kesayangan Anda lalu jalankan composer berikut.

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

Setelah proses instalasi selesai berjalan dengan sempurna, tahap selanjutnya adalah mengatur koneksi database melalui environment file, maka bukalah file environment (.env) pada root project Laravel lalu lakukan sedikit perubahan seperti berikut.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3307
DB_DATABASE= nama database
DB_USERNAME= username database
DB_PASSWORD= password database

Lalu lanjutkan dengan step ke-3, yaitu kita lakukan instal dependency google recaptcha v2 dengan composer, masih aktif pada jendela Terminal/ Command Prompt lalu dengan perintah change directory (cd) arahkan pada namaprojectAnda, lalu jalankan perintah composer berikut.

composer require anhskohbo/no-captcha

Setelah proses instalasi dependency google recaptcha selesai dengan sempurna, lalu lanjutkan ke tahap ke-4, dimana kita perlu menambahkan aliases dan service provider pada Config/app.php, seperti berikut

'providers' => [
Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class
],

'aliases' => [
'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,
],

Tahap berikutnya adalah mengeksekusi step ke-5 yaitu menambahkan validasi google recaptcha pada validator pada auth register pada app/Http/Controllers/Auth/RegisterController.php, lalu temukan pada baris berikut.

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'],
]);
}

Dengan melakukan sedikit perubahan tambahkan validator google recaptcha seperti berikut.

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'],
'g-recaptcha-response' => 'required|captcha',
]);
}

Step ke-5 telah kita lakukan, sehingga kita lanjutkan dengan menjalankan step ke-6 yaitu mendaftarkan akun Google ReCaptcha untuk memperoleh google site key and secret key melalui alamat https://www.google.com/recaptcha/admin.

Pedaftaran google recaptcha
Pedaftaran google recaptcha

Setelah berhasil mendapatkan google site key dan secret key, maka kita lanjutkan ke step-7 menambahkan google site key and secret key pada environment file (.env), buka file tersebut lalu lakukan sedikit perubahan dengan menambahkan code berikut.

NOCAPTCHA_SITEKEY=[site-key]
NOCAPTCHA_SECRET=[secret-key]

Lanjutkan ke step-8 yaitu menambahkan renderJs pada file blade app.blade.php, buka file blade tersebut lalu lakukan sedikit perubahan sehingga menjadi seperti berikut.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    {!! NoCaptcha::renderJs() !!}
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>

                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

Sekarang step 1 sampai step ke-8 telah kita selesaikan, selanjutnya bagian akhir dari step by step integrasi google recaptcha pada aplikasi framework laravel adalah dengan mengeksekusi tahap ke-9 yaitu menambahkan display Google ReCaptcha pada form register, buka file blade form register pada resources/views/auth/register.blade.php, lalu lakukan sedikit perubahan sehingga menjadi seperti berikut.

@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">
                    <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>
                        <!-- google recaptcha -->
                        <div class="form-group row {{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">
                            <label class="col-md-4 col-form-label text-md-right">Captcha</label>
                            <div class="col-md-6">
                                {!! app('captcha')->display() !!}
                                @if ($errors->has('g-recaptcha-response'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                    </span>
                                @endif
                            </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

Nah setelah semua konfigurasi diatas kita lakukan, langkah selanjutnya adalah melakukan running tes, masih aktif pada jendela Terminal/ Command Prompt dan aktif pada namaprojectAnda lalu jalankan laravel server development dengan perintah artisan berikut.

php artisan serve

Buka browser Anda lalu jalankan url localhost:8000/register, jika semua berjalan dengan baik maka akan kita jumpai form register disertai Google reCAPTCHA seperti berikut.

Laravel Form Register with Google reCAPTCHA
Laravel Form Register with Google reCAPTCHA

Jika check box Google reCAPTCHA kita klik maka akan ditampilkan captcha seperti berikut.

Google reCAPTCHA validation
Google reCAPTCHA validation

Jika kita paksakan melakukan registrasi dengan melewati tahapan input Google reCAPTCHA maka akan ditolak seperti berikut.

Tidak dapat melakukan registrasi disaat tidak mengisikan google recaptcha
Tidak dapat melakukan registrasi disaat tidak mengisikan google recaptcha

Demikianlah cara melakukan integrasi Google reCAPTCHA sebagai form validation, pada pembuatan tutorial disini saya menggunakan framework PHP Laravel versi 7.0, akan tetapi ini tetap saja dapat diimplementasikan pada versi Laravel lainnya.

Akhirnya semoga tutorial yang cukup singkat semoga dapat menambah wawasan bagi pembaca dan memberi manfaat, akhir kata terimakasih telah berkunjung di Jogjatech.com and happy coding 🙂

Previous articleLaravel Tutorial Multiple Upload Files
Next articleMenampilkan File PDF pada HTML
Tech News, Gadgets, Tutorial, IT Solution, Web Developer

LEAVE A REPLY

Please enter your comment!
Please enter your name here