谷歌 reCaptcha 与 Laravel

Posted 2023-03-14

技术标签:

【中文标题】谷歌 reCaptcha 与 Laravel【英文标题】：Google reCaptcha with Laravel 【发布时间】：2021-06-17 13:48:23 【问题描述】：

我正在尝试在没有任何软件包的情况下使用 Laravel 8 安装 Google reCaptcha v2。我正在尝试遵循this 教程。我也试过this教程。

但是验证码没有显示在 Blade 文件中。

Form提交后如何验证验证码？

【问题讨论】：

【参考方案1】：

没有任何第三方包的 Laravel 8 Google Captcha。

首先在.env文件中添加以下键

GOOGLE_CAPTCHA_SITE_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
GOOGLE_CAPTCHA_SECRET_KEY=6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
GOOGLE_CAPTCHA_VERIFICATION_URL=https://www.google.com/recaptcha/api/siteverify

注意：这些是来自 google 文档的测试密钥。

然后在config文件夹中创建一个名为google_captcha.php的文件

<?php

return [
    'site_key' => env('GOOGLE_CAPTCHA_SITE_KEY'),
    'secret_key' => env('GOOGLE_CAPTCHA_SECRET_KEY'),
    'gc_verification_url' => env('GOOGLE_CAPTCHA_VERIFICATION_URL'),
    'error_codes' => [
        "missing-input-secret" => "The secret parameter is missing.",
        "invalid-input-secret" => "The secret parameter is invalid or malformed.",
        "missing-input-response" => "The response parameter is missing.",
        "invalid-input-response" => "The response parameter is invalid or malformed.",
        "bad-request" => "The request is invalid or malformed.",
        "timeout-or-duplicate" => "The response is no longer valid: either is too old or has been used previously.",
    ],

];

为了在服务器端验证谷歌验证码，我们首先创建验证规则。我们可以做多种方式，但我选择两种方式

1.在AppServiceProvider 中创建自定义规则，如下所示

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    
        //
    

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    
        
        Validator::extend('google_captcha', function ($attribute, $value, $parameters, $validator)

            $http=Http::asForm()->post(config('google_captcha.gc_verification_url'),[
                'secret' => config('google_captcha.secret_key'),
                'response' =>$value,
            ]);

            if(!$http->object()->success)

                $errorMessage=null;
                collect($http->object()->"error-codes")->each(function ($item)use(&$errorMessage)
                    $errorMessage.=config('google_captcha.error_codes')[$item];

                );

                $validator->addReplacer('google_captcha',
                    function($message, $attribute, $rule, $parameters) use ($errorMessage) 
                        return \str_replace(':message', $errorMessage, $message);
                    
                );
            

            return $http->object()->success;
        ,":message");

验证规则如下所示

  $validator=Validator::make($request->all(),[
            'g-recaptcha-response'=>'required|google_captcha'
        ]);

html 表单将是

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    <!-- Styles -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>



<form method="POST" action=" route('test') ">
    @csrf

    <div class="g-recaptcha"  data-sitekey="config('google_captcha.site_key')"></div>

    <button type="submit" class="btn btn-primary pull-right"
            style="margin-right: 15px;">Submit</button>
</form>

<script src="https://www.google.com/recaptcha/api.js"></script>

</body>
</html>

假设如果您不想在应用服务提供商中编写自定义验证规则，那么您可以使用如下内联验证

$validator=Validator::make($request->all(),[
            'g-recaptcha-response'=>['required', function ($attribute, $value, $fail) 
                $http=Http::asForm()->post(config('google_captcha.gc_verification_url'),[
                    'secret' => config('google_captcha.secret_key'),
                    'response' =>$value,
                ]);

                if(!$http->object()->success)
                    $errorMessage=null;
                    collect($http->object()->"error-codes")->each(function ($item)use(&$errorMessage)
                        $errorMessage.=config('google_captcha.error_codes')[$item];

                    );
                    $fail($errorMessage);
                
            ]
        ]);

文档参考链接

1.Captcha验证： https://developers.google.com/recaptcha/docs/verify

2.测试密钥：https://developers.google.com/recaptcha/docs/faq

3.自定义验证规则：https://laravel.com/docs/8.x/validation#custom-validation-rules

4.Laravel Http 客户端：https://laravel.com/docs/8.x/http-client#introduction

5.Google Captcha 管理员链接：https://www.google.com/recaptcha/about/

【讨论】：

【参考方案2】：

显示

如果您想在页面中包含 Google Captcha，您必须将代码插入页面部分并使用 Google 管理控制台中的 API 密钥放置一个（下面的屏幕截图）。我建议将 API 密钥写入 .env 文件

谷歌文档：https://developers.google.com/recaptcha/docs/display

验证