Hướng dẫn tích hợp Google ReCAPTCHA v2 vào Laravel

Hướng dẫn tích hợp Google ReCAPTCHA v2 vào Laravel

Trong bài viết này chúng ta sẽ tìm hiểu cách tích hợp Google reCaptcha vào trong ứng dụng laravel 5.8. Chúng ta sẽ tạo một form sử dụng xác thực bằng google recaptcha và trước khi lưu trữ dữ liệu vào cơ sở dữ liệu, chúng ta sẽ xác minh dữ liệu bằng cách sử dụng Laravel Validation.

Bước 1: Cài đặt Laravel

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

Bước 2: Cấu hình database

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Bước 3: Cài đặt Google Captcha Package

composer require anhskohbo/no-captcha

Bước 4: Tạo Google Captcha Secrets

Tiếp theo chúng ta sẽ cần tạo google recaptcha site_key secret_key để hiển thị recaptcha trong ứng dụng laravel. Nếu bạn đã có site_key và secret_key, bạn chỉ cần điền các thông tin này vào file .env.

Để tạo secret_key và secret_site các bạn truy cập link sau: Recaptcha new site registration

Sau khi điền đầy đủ thông tin các bạn kéo xuống dưới và bấm Submit, để nhận site_key và secret_key 

Tiếp theo các bạn điền 2 mã này vào file .env

NOCAPTCHA_SITEKEY=secret_site_key
NOCAPTCHA_SECRET=secret_key

Bước 5: Tạo route

Route::get('captcha-form', 'CaptchaC[email protected]');
Route::post('store-captcha-form', '[email protected]');

Bước 6: Tạo controller

php artisan make:controller CaptchaController

Chỉnh sửa nội dung file app/Http/Controllers/CaptchaController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\User;
 
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');
    }
}

Bước 7: Tạo blade view

Tạo file: resources/views/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 5.8 Google Recatpcha Verification - Tutsmake.com</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 5.8 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>

Tiếp theo các bạn có thể truy cập: domain.com/captcha-form để kiểm tra kết quả

Post Comment