README

Laravel 包用于 Google reCAPTCHA V3

一个星标将是一个美好的鼓励。^.^

DEMO

隐形 - 隐藏

内联

角落

描述

Google reCAPTCHA v3 是一种新的机制，用于验证用户是否为机器人。

reCAPTCHA v3 旨在为高级用户、希望了解其流量更多数据的网站所有者以及不适合向用户展示挑战的场景使用。

例如，注册页面可能仍然使用 reCAPTCHA v2 进行更高摩擦度的挑战，而像登录、搜索、评论或投票等更常见的操作可能使用 reCAPTCHA v3。

请查看 Google 网站： https://developers.google.com/recaptcha/docs/faq

功能

高测试覆盖率，安全且易于使用
分数比较
支持隐形、角落和内联徽章样式
支持在每个页面上运行 reCAPTCHA
支持在同一个页面上放置多个操作
支持在配置接口上进行自定义实现
支持在请求方法接口上进行自定义实现
完全支持 Vue 组件
IP 跳过列表支持

要求

此包需要以下依赖项

Laravel >= 5.x
如果您想使用验证类，您的 Laravel 版本需要 >= 5.5
php > 5
请确保您已阅读 Google reCAPTCHA v3 的基本信息。

安装

示例代码： https://github.com/RyanDaDeng/laravel-google-recaptcha-v3/wiki/Simple-Demo

通过 Composer

$ composer require timehunter/laravel-google-recaptcha-v3 "~2.5"

如果您的工作框架版本 <= 5.4，请将服务提供者在您的配置文件 /config/app.php 中注册，否则请跳过。

'providers'=[
    ....,
    TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider::class
]

并且也

'aliases'=[
     ....,
     'GoogleReCaptchaV3'=> TimeHunter\LaravelGoogleReCaptchaV3\Facades\GoogleReCaptchaV3::class
 ]

如果您的工作框架版本 >= 5.5，只需运行以下命令即可发布配置。

$ php artisan vendor:publish --provider="TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider" --tag=googlerecaptchav3.config

对于 Vue 组件

$ php artisan vendor:publish --provider="TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider" --tag=googlerecaptchav3.vuejs

安装后，您应该在您的 app/config 文件夹中看到一个 googlerecaptchav3.php，在 js/components/googlerecaptchav3 文件夹下有一个 Vue 组件。

对于多语言

$ php artisan vendor:publish --provider="TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider" --tag=googlerecaptchav3.lang

在 /resources/lang/vendor/GoogleReCaptchaV3/* 下将创建一个 lang 文件夹。

配置

在配置文件中设置您的 Google reCAPTCHA 详细信息

请将主机名、site_key、secret_key 和 site_verify_url 的所有详细信息注册到配置中。

在 .env 中注册凭证

RECAPTCHA_V3_SECRET_KEY=
RECAPTCHA_V3_SITE_KEY=

在'设置'中指定你的分数阈值和动作，例如：

      'setting' =  [
          [
                'action' => 'contact_us', // Google reCAPTCHA required paramater
                'threshold' => 0.2, // score threshold
                'score_comparison' => false // if this is true, the system will do score comparsion against your threshold for the action
            ],
            [
                'action' => 'signup',
                'threshold' => 0.2,
                'score_comparison' => true
            ],
        ]

注意：如果你想启用分数比较，也需要将is_score_enabled设置为true。

        ...
        'is_score_enabled' = true
        ...

对于分数比较，所有动作都应该在'设置'部分下的googlerecaptchav3配置文件中注册。

更多详情请查看配置文件中的注释。

外观使用

你可以通过以下方法直接使用已注册的外观服务。

setAction()是可选的，只有当你想验证动作是否匹配时才使用。
verifyResponse()接受来自你表单的token值。这个函数返回Google reCAPTCHA响应对象。
setScore()是可选的，只有当你想手动验证分数时才使用。

示例使用

   GoogleReCaptchaV3::setAction($action)->verifyResponse($value,$ip = null);

   GoogleReCaptchaV3::verifyResponse($value,$ip)->getMessage();
   GoogleReCaptchaV3::verifyResponse($value)->isSuccess();
   GoogleReCaptchaV3::verifyResponse($value)->toArray();

   GoogleReCaptchaV3::verifyResponse(
                         $request->input('g-recaptcha-response'),
                         $request->getClientIp()
                         )
                      ->getMessage()

   GoogleReCaptchaV3::setAction($action)->verifyResponse($value)->isSuccess();

如果你手动分配值给setScore($score)，代码将完全跳过你的配置文件并强制检查分数。

   GoogleReCaptchaV3::setScore($score)
                    ->setAction($action)
                    ->verifyResponse(
                        $request->input('g-recaptcha-response'),
                        $request->getClientIp()
                        )
                    ->getMessage()

验证类（仅支持Laravel >= 5.5）

你可以使用提供的验证对象来验证你的reCAPTCHA。

   use TimeHunter\LaravelGoogleReCaptchaV3\Validations\GoogleReCaptchaV3ValidationRule;
   $rule = [
            'g-recaptcha-response' => [new GoogleReCaptchaV3ValidationRule('action_name')]
        ];

$actionName：如果其为NULL，则包不会与谷歌响应验证动作。

Blade使用

显示reCAPTCHA v3

添加Google API脚本

在布局页面的底部包含API脚本

  {!!  GoogleReCaptchaV3::init() !!}

同意安全策略 - 非ce

为了添加内容安全性的nonce，传递包含你页面nonce的params数组。

  {!!  GoogleReCaptchaV3::init([
    'nonce' => nonce(),
  ]) !!}

在每页运行脚本（可选）

建议在每页上包含reCAPTCHA v3，这有助于你获得最多关于交互的上下文以进行分析。你只需要启用配置

   ...
  'background_badge_display' => true, // if false, the badge will be invisible, if true the badge shows at bottom right.
  'background_mode' => false, // if true, the script will run on every page (ensure that GoogleReCaptchaV3::init() is placed on layout or homepage)
   ...

如果页面未检测到任何动作或重复的谷歌脚本，则启用后台模式。

表单 & 动作

在表单中填充reCAPTCHA有三种方法。

render()和renderOne()可以放在任何地方，但要在init()之前
renderField()需要始终放在你的表单中。

方法一 - render()

[
    $id=>$action , $id=>$action ...
]

{!!  GoogleReCaptchaV3::render(['contact_us_id'=>'contact_us', 'signup_id'=>'signup']) !!}

<form method="POST" action="/verify">
    <div id="contact_us_id"></div> // add div with id
    <input type="submit" value="submit">
</form>


<form method="POST" action="/verify">
    <div id="signup_id"></div>
    <input type="submit" value="submit">
</form>

{!!  GoogleReCaptchaV3::render(['contact_us_id'=>'contact_us', 'signup_id'=>'signup']) !!}

方法二 - renderOne()

GoogleReCaptchaV3::renderOne($id,$action);

{!!  GoogleReCaptchaV3::renderOne('contact_us_id','contact_us') !!}

<form method="POST" action="/verify">
    <div id="contact_us_id"></div> // add div with id
    <input type="submit" value="submit">
</form>

{!!  GoogleReCaptchaV3::renderOne('contact_us_id','contact_us') !!}

方法三 - renderField()

GoogleReCaptchaV3::renderField($id,$action,$class,$style)

{!! GoogleReCaptchaV3::renderField('contact_us_id','contact_us_action') !!}

<form method="POST" action="/verify">
   {!!  GoogleReCaptchaV3::renderField('contact_us_id','contact_us_action') !!}
    <input type="submit" value="submit">
</form>

表单 & 动作徽章显示

如果你的设置没有反映出来，请运行php artisan config:cache来清除缓存。

内联

转到配置文件，并设置

    [
        ...
        'inline' => true
        ...
    ]

徽章将以内联格式在表单中显示。

隐藏

同时将inline设置为true
修改你的div并使用样式display:none
参考谷歌官方网站： https://developers.google.com/recaptcha/docs/faq ，你需要包含以下文本

   This site is protected by reCAPTCHA and the Google
       <a href="https://policies.google.com/privacy">Privacy Policy</a> and
       <a href="https://policies.google.com/terms">Terms of Service</a> apply.

角落

将inline设置为false
你的徽章将显示在右下角。

自定义

将inline设置为true
在其div元素上执行样式/CSS

Ajax使用 - 刷新reCAPTCHA响应

此包提供了两个便捷的JavaScript函数，供你在需要时获取reCAPTCHA响应和刷新reCAPTCHA。

refreshReCaptchaV3(fieldId,actionName) - 此函数将在你的ajax响应返回时重置响应。
getReCaptchaV3Response - 此函数通过id帮助你获取reCAPTCHA响应

例如

       <script>
            $("#test").click(function (e) {
                e.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: '/verify',
                    data: {
                        'g-recaptcha-response':getReCaptchaV3Response('contact_id')
                    },
                    success: function (data) {
                        refreshReCaptchaV3('contact_id','contact');
                    },
                    error: function(err){
                        refreshReCaptchaV3('contact_id','contact');
                    }
                });
            });
      </script>

Vue使用（包版本 >= 2.2.0）

该包提供了一个轻量级的vue组件。在对其进行操作之前，你需要先发布vue组件。

步骤1：发布vue组件

$ php artisan vendor:publish --provider="TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider" --tag=googlerecaptchav3.vuejs

文件将创建在js/components/googlerecaptchav3/GoogleReCaptchaV3.vue下，你对这个文件有完全的控制和修改能力。

步骤2：导入vue组件并注册reCAPTCHA v3 SiteKey

非常感谢@Fluxlicious改进了vue组件。

使用Vue时，“Blade方式”就不再有用。我们需要自己管理网站密钥。该组件支持以下属性

支持：siteKey、id、inline和action，请查看原始文件以获取详细信息。

<google-re-captcha-v3
  v-model="gRecaptchaResponse"
  ref="captcha"
  site-key="Your Site Key String Here"
  id="contact_us_id"
  inline
  action="contact_us"
></google-re-captcha-v3>

您可以将网站密钥绑定到组件的两种方式。

使用属性

<template>
    <div>
        <form @submit.prevent="submit">
            <div>
                <google-re-captcha-v3
                  v-model="form.gRecaptchaResponse"
                  ref="captcha"
                  :site-key="mySiteKeyVariable"
                  id="contact_us_id"
                  inline
                  action="contact_us"
                ></google-re-captcha-v3>
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>
</template>
<script>
    import GoogleReCaptchaV3 from '../../components/googlerecaptchav3/GoogleReCaptchaV3';
    // location might be diff to your case, ensure that your component location is right

    export default {
        components: {
            GoogleReCaptchaV3
        },
        data() {
            return {
                form: {
                    gRecaptchaResponse: null
                },
                mySiteKeyVariable: 'Your Site Key String',
            }
        },
        methods: {
            submit() {
                axios.post('/verify', this.form).then(
                    response => {
                        this.$refs.captcha.execute(); // every time you submit, the reCAPTCHA token needs to be refreshed
                    }
                ).catch(
                    error => {
                        this.$refs.captcha.execute(); // every time you submit, the reCAPTCHA token needs to be refreshed
                    });
            }
        }
    }
</script>

请记住，如果需要，每次提交表单时请刷新令牌

 this.$refs.captcha.execute();

或者直接将网站密钥添加到GoogleReCaptchaV3组件中

或者，我相信在大多数情况下，您的网站密钥永远不会更改，因此您可以直接修改原始发布的组件，以将sitekey硬编码在内。

例如，打开发布的文件，找到以下代码

        ....
        siteKey: {
                  type: String,
                  required: false, // set to true if you don't want to store the siteKey in this component
                  default: 'Your Site Key Here' // set siteKey here if you want to store it in this component
              },
       ....

高级用法

在配置上的自定义实现

对于一些用户，他们可能将配置详细信息存储在自己的存储中，例如数据库。您可以创建自己的类并实现

TimeHunter\LaravelGoogleReCaptchaV3\Interfaces\ReCaptchaConfigV3Interface

请记得在自己的服务提供商中注册它

     $this->app->bind(
                ReCaptchaConfigV3Interface::class,
                YourOwnCustomImplementation::class
            );

在请求方法上的自定义实现

该包有两个默认的验证选项：Guzzle和Curl，如果您想使用自己的请求方法，您可以创建自己的类并实现

TimeHunter\LaravelGoogleReCaptchaV3\Interfaces\RequestClientInterface