Google v2 ReCAPTCHA Untuk Validasi Form Di Laravel

Laravel

Untuk membuat form kita tetap aman dari ancaman keusilan orang-orang yang tidak bertanggung jawab.

Biasanya kita memberikan keamanan dalam bentuk validasi-validasi. Pada dasarnya google Recaptcha digunakan untuk menverifikasi apakah yang mengakses form kita manusia atau bot.

Baik kita langsung saja membuat projek baru Laravel (sebelumnya pastikan kamu sudah menginstall PHP, composer, dll).

composer create-project --prefer-dist laravel/laravel blog

Setelah itu kita akan menginstal paket yang akan menghandle recaptcha.

composer require anhskohbo/no-captcha

Sudah tau ya caranya? Script diatas dijalankan via terminal/command prompt dalam projek Laravel yang barusan kita buat.

Setelah selesai, lalu buka "config/app.php" dan tambahkan alias seperti berikut:

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

Lanjut ke google recaptcha, silahkan siapkan secret_key dan site_key terlebih dahulu, jika sudah memiliki bisa skip langkah ini. Kalau belum bisa kunjungi halaman google recaptcha disini.

Setelah mendapatkan sit_key dan secret_key kemudian buka dile .env dan tambahkan script berikut:

NOCAPTCHA_SITEKEY=secret_site_key
NOCAPTCHA_SECRET=secret_key

Kemudian kita coba membuat route, controller dan view untuk mencoba paket google recaptcha yang barusan kita selesai setting.

Buka routes/web.php lalu tambahkan script berikut:

Route::get('captcha-form', 'CaptchaController@captchForm');
Route::post('store-captcha-form', 'CaptchaController@storeCaptchaForm');

Nah sekarang kita buat controller dengan nama CaptchaController, sesuai yang kita definisikan di routing.

php artisan make:controller CaptchaController

Ok, langsung kita buka file controller nya dan tambahkan script berikut:

class CaptchaController extends Controller
{
    public function captchaForm()
    {
       return view('captchaform');
    }  
    public function storeCaptchaForm(Request $request)
    {
        request()->validate([
        'name' => 'required',
        'email' => 'required',
        'mobile_number' => 'required',
        'g-recaptcha-response' => 'required|captcha',
        ]);
 
        dd('successfully validate');
    }
}

Lalu kita buat view dengan nama captchaform.blade.php

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>laravel 6 Google Recatpcha Verification</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2 style="margin-top: 10px;" class="text-center">laravel 6 Google Recatpcha Verification - <a
        href="https://www.tutsmake.com" target="_blank">TutsMake</a></h2>
    <br><br><br>
    <div class="row justify-content-center">
      <div class="col-md-8">
        <a href="https://www.tutsmake.com/laravel-5-8-v2-google-recaptcha-integration" class="btn btn-secondary">Back to
          Post</a>
        <br><br>

        @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
          <button type="button" class="close" data-dismiss="alert">×</button>
          <strong>{{ $message }}</strong>
        </div>
        <br>
        @endif

        <form id="captcha-form" method="post" action="{{url('store-captcha-form')}}">
          @csrf
          <div class="form-group">
            <label for="formGroupExampleInput">Name</label>
            <input type="text" name="name" class="form-control" id="formGroupExampleInput"
              placeholder="Please enter name">
            <span class="text-danger">{{ $errors->first('name') }}</span>
          </div>
          <div class="form-group">
            <label for="email">Email Id</label>
            <input type="text" name="email" class="form-control" id="email" placeholder="Please enter email id">
            <span class="text-danger">{{ $errors->first('email') }}</span>
          </div>
          <div class="form-group">
            <label for="mobile_number">Mobile Number</label>
            <input type="text" name="mobile_number" class="form-control" id="mobile_number"
              placeholder="Please enter mobile number">
            <span class="text-danger">{{ $errors->first('mobile_number') }}</span>
          </div>
          <div class="form-group">
            <label for="captcha">Captcha</label>
            {!! NoCaptcha::renderJs() !!}
            {!! NoCaptcha::display() !!}
            <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-success">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

Selesai... untuk mencoba bisa menjalankan server via artisan.

php artisan serve

Semoga bermanfaat

Artikel Terkait

Populer

;