สร้าง Google reCAPTCHA (กูเกิล รีแคปช่า) ด้วย PHP framework Laravel เพื่อป้องกันเว็บไซต์ I'm not a robot อย่างที่ทราบการป้อนกันไม่ให้บอท หรือคนไม่หวังโจมตีเว็บไซต์ของเรา เพื่อความปลอดภัยแก่ผู้ให้บริการ หรือเว็บไซต์ที่ให้บริการ คนให้บริการอุ่นใจเมื่อมีการป้อน I'm not a robot หลายคนยังไม่รู้ว่า framework laravel V.8 สร้างได้รึเปล่าน่าหรือไม่ได้ ผมให้ตอบเลยสามารถสร้างได้สบายๆนะครับ
ก่อนเริ่มสิ่งที่ต้องเตรียม คือ บัญชีอีเมลของคุณ
1.เข้าสู่ระบบเพื่อรับ API Key ก่อนที่เว็บไซต์ https://www.google.com/u/4/recaptcha/admin/create
2.ให้กรอกข้อมูลตามลำดับให้ครบถ้วน
- ตั้งชื่อ
- เลือกประเภท reCAPTCHA
- ใส่โดเมนของท่าน หรือถ้าใช้เซิร์ฟเวอร์จำลอง ก็ให้ใส่โดเมน ตัวอย่าง เช่น localhost ด้วย
ใส่ข้อมูลครบแล้วให้กด "ส่ง"
3.เราจะได้ คีย์ของเว็บไซต์ (Site key) และ คีย์ลับ (Secret key) มาให้คัดลอกเก็บไว้เพื่อนำไปใส่ในโค้ดตัวอย่างที่ผมได้เตรียมไว้ให้ครับ
boychawin.com
เราทำการสร้าง Laravel 8 ใหม่โดยใช้คําสั่งนี้ ดังนั้นเปิดเทอร์มินัลหรือ command line ของคุณแล้วเราใช้คําสั่งโค้ดดังนี้
composer create-project laravel/laravel example-app
ในขั้นตอนนี้เราจําเป็นต้องติดตั้ง josiasmontag / laravel-recaptchav3 ผ่านตัวจัดการแพคเกจดังนั้นคําสั่งเทอร์มินัล หรือ command line ของคุณ
composer require josiasmontag/laravel-recaptchav3
หลังจากติดตั้งแพคเกจเรียบร้อยแล้วเราต้องกําหนดค่า publish ไฟล์ด้วยคําสั่งโค้ด
php artisan vendor:publish --provider="Lunaweb\RecaptchaV3\Providers\RecaptchaV3ServiceProvider"
ไปตั้งค่าในไฟล์ .env
RECAPTCHAV3_SITEKEY=[site-key]
RECAPTCHAV3_SECRET=[secret-key]
เพิ่มเส้นทางให้ laravel V.8 รู้จัก เราจําเป็นต้องสร้างเส้นทางให้มันรู้จักด้วยการลงทะเบียน หรือ ให้ในการอ้างถึง
<?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\RegisterController;
Route::get('register', [RegisterController::class, 'index']);
Route::post('register', [RegisterController::class, 'store']);
ในขั้นตอนนี้เราต้องสร้าง Controller ใหม่เป็น RegisterController และเรายังต้องเพิ่มดัชนีสองวิธี () และจัดเก็บ () บนคอนโทรลเลอร์นั้นอย่างที่คุณเห็น
app/http/controllers/RegisterController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class RegisterController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function index()
{
return view('register');
}
/**
* Create a new controller instance.
*
* @return void
*/
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email',
'password' => 'required|same:password_confirmation',
'password_confirmation' => 'required',
'g-recaptcha-response' => 'required|recaptchav3:register,0.5'
]);
dd('done');
}
}
ในขั้นตอนสุดท้ายเรามาสร้าง register.blade.php (resources/views/register.blade.php) สําหรับเค้าโครงและแสดงรายการหน้าเว็บทั้งหมดที่นี่และใส่โค้ดต่อไปนี้
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 - Google Recaptcha V3 Code with Validation - ItSolutionStuff.com</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-8 col-md-offset-2">
<div class="card card-primary">
<div class="card-header">Laravel - Google Recaptcha V3 Example- ItSolutionStuff.com</div>
<div class="card-body">
<form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
{!! csrf_field() !!}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<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 Address</label>
<div class="col-md-6">
<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('password') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password">
@if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password_confirmation">
@if ($errors->has('password_confirmation'))
<span class="help-block">
<strong>{{ $errors->first('password_confirmation') }}</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 col-md-offset-4">
<br/>
<button type="submit" class="btn btn-primary">
<i class="fa fa-btn fa-user"></i>Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ขั้นตอนต่อไปนี้คือการ รันข้อมูลทั้งหมดของเราที่เขียนลงไป ถ้าคุณพร้อมแล้วเอาโด้ดต่อไปนี้ไปวาง
php artisan serve
หน้าแสดงผล
สรุปการสร้าง Google reCAPTCHA ด้วย PHP framework laravel V.8 มีความแตกต่างกับ การสร้าง Google reCAPTCHA ด้วย PHP เพราะการสร้าง Google reCAPTCHA ด้วย PHP นั้นเราต้องสร้างไฟล์อันนี้อันนั้นโดยแต่ละขั้นก็อาจจะยาวเกินไป แต่ framework laravel V.8 ใช้แค่คำสั่งผ่าน composer ในเทอร์มินัล หรือ command line แล้ว framework laravel V.8 จะสร้างให้ไฟล์เราอัตโนมัติเราแค่ตั้งค่าไฟล์พอ แต่ต้องตรวจสอบให้ดีว่าคุณตั้งค่าครบรึเปล่า ต้องเช็คให้ดีครับเพื่อให้เกิด error
อ้างอิง
"Laravel 8 Google Recaptcha V3 Step by Step Example - itsolutionstuff.com".[ออนไลน์].สามารถศึกษาเพิ่มเติมได้ที่:
https://www.itsolutionstuff.com/post/laravel-8-google-recaptcha-v3-step-by-step-exampleexample.html
"How to Add Google ReCaptcha in Laravel 8 - codelapan.com".[ออนไลน์].สามารถศึกษาเพิ่มเติมได้ที่:https://codelapan.com/post/how-to-add-google-recaptcha-in-laravel-8
"สร้าง Google reCAPTCHA & PHP เพื่อป้องกันเว็บไซต์ I'm not a robot - boychawin.com".[ออนไลน์].สามารถศึกษาเพิ่มเติมได้ที่:
https://boychawin.com/blog-detail/14