Tích h?p Google reCaptcha v2 vào Laravel không dùng package
Trong m?i website th??ng có m?t s? tính n?ng c?n xác th?c khi có t??ng tác g?i d? li?u xem có ph?i ng??i dùng th?t hay là do ph?n m?m t? ??ng (robot) g?i. ??c bi?t là các tính n?ng ch?a qua ??ng nh?p nh?: ??ng ký, liên h?… n?u không xác th?c ch?n robot thì m?t ngày ??p tr?i nào ?ó b?n có th? th?y có hàng v?n user ???c l?p t? ??ng r?i sau ?ó ti?n hành spam…
Gi?i pháp trong tr??ng h?p này là dùng Captcha, nhi?u n?m tr??c, Captcha th??ng là chu?i nh?ng ký t? lo?ng ngo?ng khó nhìn, ng??i dùng th?t ?ôi khi c?ng khá khó kh?n m?i khi nh?p l?i chúng. Nh? hình bên trên là thu?c d?ng ?a nhìn ?ó, có nh?ng khi không th? ??c ???c và ng??i dùng ph?i refresh ?? ra Captcha khác. Nh?ng gi? ?ây k? t? khi reCaptcha sang tên ??i ch? t?i Google, v?i nh?ng thu?t toán m?i, reCaptcha không nh?ng xác th?c ng??i dùng r?t hi?u qu? mà còn khá thân thi?n v?i ng??i dùng. Ch? khi reCaptcha không xác ??nh ???c có ph?i bot hay không thì khi ?ó ng??i dùng m?i ph?i xác th?c b?ng các thao tác nh? click hình ?nh…
??ng ký Google reCaptcha
Hi?n t?i reCaptcha có 2 phiên b?n ph? bi?n là v2 và v3, reCaptcha v3 xác th?c ng??i dùng qua tính ?i?m, còn reCaptcha v2 là cái mà chúng ta th??ng th?y trên các website gi?ng nh? hình bên trên. Bài vi?t này s? h??ng d?n cách tích h?p Google reCaptcha v2 vào website Laravel
?? b?t ??u, chúng ta c?n ??ng ký reCaptcha ? link này: https://www.google.com/u/0/recaptcha/admin/create
Sau khi submit b?n s? nh?n ???c Site key và Secret key t??ng t? hình bên d??i, chúng ta s? dùng chúng trong quá trình tích h?p reCaptcha vào Laravel
V?y là xong ph?n gi?i thi?u và ??ng ký reCaptcha, ti?p theo chúng ta s? sang ph?n t?o project Laravel demo ?? tích h?p reCaptcha
Chu?n b? project ?? tích h?p Google reCaptcha vào Laravel
Trong bài vi?t này, chúng ta s? t?o m?i 1 project Laravel kèm h? th?ng auth ?? demo tích h?p Google reCaptcha vào form ??ng ký.
1. Kh?i t?o Project
composer create-project laravel/laravel lararecaptchat?o database và config l?i thông tin trong file .env, ??ng th?i khai báo luôn reCaptcha key trong này:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara_recaptcha
DB_USERNAME=root
DB_PASSWORD=
RECAPTCHA_SITE_KEY=7Nf2Si4iABAAAPypFCKDGxlf2S-vE-hYSVeSyAkJ
RECAPTCHA_SECRET_KEY=7Lf2Si4iAAAABN3KNaIQRxd0-oBKaYjLkUZkRucE2. cài ??t LARAVEL ui package:
composer require laravel/uiT?o nhanh h? th?ng Auth (??ng ký ??ng nh?p…) v?i giao di?n dùng bootstrap:
php artisan ui bootstrap --authnpm installnpm run devT?o các table t? các file migration:
php artisan migratech?y server:
php artisan servech?y th? trên trình duy?t: http://localhost:8000/ n?u ra nh? hình d??i là ok:
Tích h?p Google reCaptcha vào Laravel 9
Thêm file js c?a reCaptcha vào layout, trong project demo này, layout là file:
resources\views\layouts\app.blade.php
thêm vào ph?n <head> ho?c d??i cùng bên trên </body> ??u ???c
<script src="https://www.google.com/recaptcha/api.js" async defer></script>hi?n th? reCaptcha trên form, trong bài này, chúng ta s? thêm vào form ??ng ký.
resources\views\auth\register.blade.php
thêm dòng này vào v? trí mu?n hi?n th? captcha:
<div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>Toàn b? file 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">
<form method="POST" action="{{ route('register') }}">
@csrf
<div class="row mb-3">
<label for="name" class="col-md-4 col-form-label text-md-end">{{ __('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="row mb-3">
<label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email 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="row mb-3">
<label for="password" class="col-md-4 col-form-label text-md-end">{{ __('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="row mb-3">
<label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('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="row mb-3">
<div class="col-md-4">
</div>
<div class="col-md-6">
<div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
@error('g-recaptcha-response')
<span class="invalid-feedback" style="display: block !important" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="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
ch?y th?: http://localhost:8000/register
Captcha ?ã hi?n th?, ti?p theo, t?o 1 rule ?? validate, get api reCaptcha, nh?n d? li?u tr? v? r?i ti?n hành x? lý
php artisan make:rule ReCaptcham? file rule v?a t?o app\Rules\reCaptcha.php và thêm vào nh? sau:
<?php
namespace App\Rules;
use Illuminate\Contracts\Validation\Rule;
use Illuminate\Support\Facades\Http;
class reCaptcha implements Rule
{
/**
* Create a new rule instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Determine if the validation rule passes.
*
* @param string $attribute
* @param mixed $value
* @return bool
*/
public function passes($attribute, $value)
{
$response = Http::get('https://www.google.com/recaptcha/api/siteverify', [
'secret' => env('RECAPTCHA_SECRET_KEY'),
'response' => $value
]);
return $response->json()["success"];
}
/**
* Get the validation error message.
*
* @return string
*/
public function message()
{
return 'This feature is not for robot.';
}
}
ch?nh s?a controller app\Http\Controllers\Auth\RegisterController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use App\Models\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use App\Rules\reCaptcha;
class RegisterController extends Controller
{
/*
|--------------------------------------------------------------------------
| Register Controller
|--------------------------------------------------------------------------
*/
use RegistersUsers;
/**
* Where to redirect users after registration.
*
* @var string
*/
protected $redirectTo = RouteServiceProvider::HOME;
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest');
}
/**
* Get a validator for an incoming registration request.
*
* @param array $data
* @return \Illuminate\Contracts\Validation\Validator
*/
protected function validator(array $data)
{
$messages = [
'g-recaptcha-response.required' => 'Please check Captcha.',
];
return Validator::make($data, [
'g-recaptcha-response' => ['required', new ReCaptcha],
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
'password' => ['required', 'string', 'min:8', 'confirmed'],
], $messages);
}
/**
* Create a new user instance after a valid registration.
*
* @param array $data
* @return \App\Models\User
*/
protected function create(array $data)
{
return User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => Hash::make($data['password']),
]);
}
}
done, v?y là ?ã tích h?p xong reCaptcha v2 vào form ??ng ký trên Laravel
Hay do ban, minh viet ko dau, chac ban doc van hieu dung ko. hjhj