Tutorial Cara Membuat Google Recaptcha V3 Laravel Step by Step
Halo Gengs,
Pada artikel singkat ini Bang Agung bakalan buat Tutorial Cara Membuat Google Recaptcha V3 Laravel Step by Step, buat yang belum tau Google ReCaptcha bisa cek diisini ya. singkatnya Google ReCaptcha adalah sistem yang memastikan bahwa pengguna komputer adalah manusia. cara kerjanya cukup mudah di mana pengguna cukup mengklik kotak centang dan dalam beberapa kasus memilih gambar serupa yang terkait dengan pertanyaan.
Nah pada artikel ini, Bang Agung bakalan buat gimana caranya menggunakan Google Recaptcha V3 di Laravel Step by Step, untuk itu simak beberapa langkah berikut:
1. Install Laravel
composer create-project laravel/laravel laravel-recaptcha
2. Install Package
composer require josiasmontag/laravel-recaptchav3
3. Publish Package
php artisan vendor:publish --provider="Lunaweb\RecaptchaV3\Providers\RecaptchaV3ServiceProvider"
4. Daftar Google Recaptcha
https://www.google.com/recaptcha
- untuk development local anda bisa mengisikan domain dengan 127.0.0.1
5. Tambahkan Site Key dan Secret Key pada .env
6. Tambahkan Route
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
use App\Http\Controllers\ContactController;
Route::get('/contact', [ContactController::class, 'index']);
Route::post('/add-contact', [ContactController::class, 'store']);
7. Buat Controller, ContactController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ContactController extends Controller
{
public function index()
{
return view('contact');
}
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email',
'pesan' => 'required',
'g-recaptcha-response' => 'required|recaptchav3:register,0.5'
]);
dd('ok!');
}
}
8. Buat View, contact.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 - Google Recaptcha V3 Code with Validation - bangagung.id</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{!! RecaptchaV3::initJs() !!}
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 pt-5">
<div class="card card-primary">
<div class="text-center pt-5"><b>Laravel Recaptcha V3 Example bangagung.id</b></div>
<div class="card-body">
<form class="form-horizontal" role="form" method="POST" action="{{ url('/add-contact') }}">
{!! csrf_field() !!}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Nama</label>
<div class="col-md-12">
<input type="text" class="form-control" name="name" value="{{ old('name') }}">
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-12">
<input type="email" class="form-control" name="email" value="{{ old('email') }}">
@if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('pesan') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Pesan</label>
<div class="col-md-12">
<textarea class="form-control" name="pesan" id="pesan" cols="30" rows="10"></textarea>
@if ($errors->has('pesan'))
<span class="help-block">
<strong>{{ $errors->first('pesan') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">
<div class="col-md-6">
{!! RecaptchaV3::field('register') !!}
@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">
<div class="col-md-6">
<br/>
<button type="submit" class="btn btn-primary">
<i class="fa fa-btn fa-user"></i>Kirim Pesan
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
9. Selesai!
Jangan lupa untuk, membersihkan cache pada laravel ya
php artisan optimize
kemudian jalankan
php artisan serve
Oke sekian dulu Tutorial Cara Membuat Google Recaptcha V3 Laravel Step by Step, semoga artikel ini bisa membantu pemahaman teman-teman yang ingin belajar laravel. untuk case bisa di sesuaikan dengan project yang sedang kalian bangun. Kurang lebihnya mohon maaf sampai jumpa di artikel Bangagung.id lainnya ciawwww~
