README

一个 Craft CMS 3 插件，通过 Google 的 reCAPTCHA v3 验证用户的真实性。

Craft reCaptcha 3 概述

Google 的 reCaptcha 服务是确定网站访客是人类还是机器的行业领导者。他们的最新版本（v3）不需要任何人类挑战，如复选框。Google 将根据用户的浏览器特征、访问历史和 cookie 信息判断用户是否为人类。向 Google 的请求必须来自服务器，而不是浏览器，这正是此插件的作用所在。它通过提供一个即插即用的解决方案，试图简化通过 Google 验证 reCAPTCHA 的繁琐工作。

由于用户摩擦低，这可能不是过滤机器人的最安全或最可靠的服务。它只会返回 Google 是否认为当前用户是机器人的结果。如果您认为分数不通过且用户可能是机器人，则可能还需要复选框 captcha。我找到的非常好的 hCaptcha 插件在防止机器人方面取得了最佳成功。许多联系表单插件也提供了包含 captcha 安全性的选项。有关更多信息，请参阅 FAQ 页面：https://developers.google.com/recaptcha/docs/faq#should-i-use-recaptcha-v2-or-v3

希望这个插件能帮助您在防止垃圾邮件的旅程中！

要求

此插件需要 Craft CMS 3.0.0 或更高版本。Google reCAPTCHA 账户（包含 v3 网站密钥/密钥）。

安装

要安装插件，请按照以下说明操作。

composer require clarknelson/craft-recaptcha-3
craft plugin/install craft-recaptcha-3

配置 Craft reCAPTCHA 3

要配置插件，只需在设置屏幕中提供网站密钥和密钥即可。请确保这些密钥与插件的 v3 版本相对应，否则 Google 服务器将返回 400 错误。

设置可以通过配置文件进行可选配置。

创建 config/craft-recaptcha-3.php

<?php
return [
    'siteKey' => craft\helpers\App::env("RECAPTCHA_SITEKEY"),
    'secretKey' => craft\helpers\App::env("RECAPTCHA_SECRETKEY"),
];

然后将在您的 env 中移动您的密钥。

使用 Craft reCAPTCHA 3

1.2.0 更新为我们的插件带来了更友好的 API。

有两种新的方法可以将 reCAPTCHA 包含在页面中。

简单版本

将在页面加载时请求和验证用户

{{ craftRecaptcha3({ 
    action: 'verify',
    badge: true,
    success: 'recaptchaSuccess', 
    failure: 'recaptchaFailure' 
}) | raw }}

您现在可以定义 "成功" 和 "失败" 的 JavaScript 回调函数。

reCaptcha 内部跟踪的 "action" 参数也可用。这是可选的，将回退到 "contact"。

"badge" 的 true 或 false 值将决定是否显示固定的右下角徽章。如果您决定将其从页面中删除，请遵循 Google 的指南。

表单版本

将阻止父表单提交。您将在 JavaScript 成功回调函数中提交表单。

<form method="post" accept-charset="UTF-8">
    {{ csrfInput() }}
    {{ actionInput('users/save-user') }}
    {{ craftRecaptcha3Form({ 
            success: 'recaptchaSuccess', 
            failure: 'recaptchaFailure' 
    }) | raw }}
    ...
</form>

这是您的 JavaScript 回调可能看起来像的示例

// these functions can be included directly in the template with {% js %}{% endjs %} tags
// or you can put them in you JS files, just make sure the function is available at runtime
let recaptchaSuccess = function (response, event) {
    console.log('Successful registration', response);

    // if this function was called as part of the form version
    // the event will be passed on so you can handle it as you please
    if(event){
        // in the case of a <form> submit event, this will "continue" the submission
        event.target.submit();
    }
};
          
let recaptchaFailure = function (response, event) {
    // console.log(response);
    console.error('We could not verify the user with Google reCaptcha 3: '+response['error-codes'].join(','))
};

使用 Craft reCAPTCHA 3（1.2.0 之前）

我已经保留了旧脚本直到 2.0.0 版本的发布。请尽可能尝试更新您的 API。

无痕reCaptcha分为两部分，前端请求和后端请求。此代码将注入一个脚本以在您的网站和谷歌之间进行通信。（可以在页面的任何位置，基本上是带有显式回调函数的简单版本）

{% include ['_recaptcha/frontend'] %}

您还可以通过将action变量传递给脚本来包含操作名称。有关操作的更多信息，请参阅这里。

{% include ['_recaptcha/frontend'] with {'action': 'contact'} %}

以下JavaScript函数将在收到谷歌的响应后调用

// Called if there is a successful response
window.recaptcha_callback = function(response){
    console.log(response);
}
// Called only if the user passes the challenge
window.recaptcha_success = function(response){
    console.log(response);
}
// Called only if the user fails the challenge
window.recaptcha_failure = function(response){
    console.log(response);
}

请确保这些函数中的一个或所有都在JavaScript运行时中可用，以便调用。

reCAPTCHA 3路线图

一些待办事项和潜在功能的想法

将"button"选项添加到页面上（点击时切换）
添加在页面上也包含V2复选框的能力。
使响应/函数可用于后端插件（请参阅我的"DefaultService"以查看是否满足您的需求）

由Clark Nelson和像您这样的GitHub贡献者提供！

clarknelson / craft-recaptcha-3

维护者

详细信息