如何在Laravel 8中添加谷歌reCAPTCHA v2到表单中

DebugUsery
322 阅读2分钟

使用Google reCaptcha，你可以保护你的网站免受垃圾邮件的侵害。表格不会被提交，直到用户根据验证码框中的问题选择特定数量的图片。

在本教程中，我展示了如何使用Laravel 8中的Laravel reCaptcha包在表单中添加Google reCaptcha v2。

1.获 取钥匙

  • 浏览以下链接，如果没有登录，请登录您的账户。
  • 以下页面将显示。

Google recaptcha form

  • 在这里，输入标签，从reCAPTCHA类型中选择reCAPTCHA v2，选择"I'm not a robot" 复选框，输入你的域名，不含https，例如makitweb.com。如果你想在你的本地系统上测试，你也可以指定 localhost。
  • 勾选Accept the reCAPTCHA Terms of Service ，然后点击提交按钮。

Google recaptcha v2 details

  • 复制网站和秘钥。

Google recaptcha v2 site and secret keys

2.更 新.env

  • 打开.env 文件。
  • 为Google reCaptcha创建2个变量 -
    • RECAPTCHA_SITE_KEY -分配复制的站点密钥。
    • RECAPTCHA_SECRET_KEY -分配复制的秘钥。
RECAPTCHA_SITE_KEY=6Ksa1xYhVVVVVYsMJe_b4g-uLvW22fgjJzZvacvs
RECAPTCHA_SECRET_KEY=6Ksa1xYhVVVVVYnNbsg46kJPCALwyuK2X3YxT5u8

3.安 装软件包

使用composer安装软件包：

composer require biscolab/laravel-recaptcha

4.发 布软件包

运行该命令 -

php artisan vendor:publish --provider="Biscolab\ReCaptcha\ReCaptchaServiceProvider"

5.更 新recaptcha.php

  • 打开config/recaptcha.php 文件。
  • 确保version 被设置为v2 ，如果不是则设置为'v2' 。
'version' => 'v2',
  • 改变error_message_key 值。这将存储reCaptcha的错误信息。
  • 我把它设置为'Invalid recaptcha' 。
'error_message_key' => 'Invalid recaptcha',

6.清 除缓存

运行以下命令 -

php artisan config:cache

7.路 线

  • 打开routes/web.php 文件。
  • 定义2个路由 -
    • / -加载索引视图。
    • page/store -处理表单提交和验证reCaptcha。

完成的代码

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PageController;

Route::get('/', [PageController::class, 'index']);
Route::post('page/store', [PageController::class, 'store'])->name('page.store');

8.控 制器

  • 创建PageController 控制器。
php artisan make:controller PageController
  • 包括验证器use Illuminate\Support\Facades\Validator;
  • 创建2个方法
    • index() -载入index 视图。
    • store() -处理表单提交。

验证值。对于指定的recaptcha --

'g-recaptcha-response' => 'recaptcha',

如果值没有被验证，则返回到有错误的页面，否则使用SESSION Flash来存储信息并重定向到页面。

完成的代码

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use Session;
class PageController extends Controller {

   public function index(){ 
      return view('index');
   }

   public function store(Request $request){

      $validator = Validator::make($request->all(), [
         'name' => 'required',
         'email' => 'required|email',
         'message' => 'required',
         'g-recaptcha-response' => 'recaptcha',//recaptcha validation
      ]);

      if ($validator->fails()) {
         return redirect()->Back()->withInput()->withErrors($validator);

      }else{
         Session::flash('message','Form submit Successfully.');
      }
      return redirect('/');
   }
}

9.查 看

在resources/views/ 文件夹中创建index.blade.php 文件。

在<head> ，添加{!! htmlScriptTagJsApi() !!} ，包括recaptcha js文件。

如果'message' Session存在，显示bootstrap警告信息。

创建<form action="{{ route('page.store') }}" method="post"> 。添加一些HTML元素。

添加{!! htmlFormSnippet() !!} ，添加google reCaptcha容器。

完成的代码

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Adding Google reCAPTCHA v2 to form in Laravel 8</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/

10.演 示

11.总 结

如果你想在部署到服务器之前在你的系统上测试google reCaptcha，那么在reCaptcha设置的域名部分指定localhost。

确保在部署到服务器后将其删除。

如果你觉得这个教程有帮助，不要忘记分享。

avatar
文章
阅读
粉丝