如何使用谷歌的人机身份验证功能recaptcha？

像这种谷歌自带的人机身份验证，实际上有很多插件可以实现。

但是有客户看他们同行都用的谷歌的这种，也让我帮他改成这种，那么现在我就来说说如何实现。

**步：登陆谷歌的recaptcha平台：https://www.google.com/recaptcha/about/，当然了，你打开的可能是英文界面。

第二步： 登陆您的谷歌账号，然后进行网站创建。都是很简单的，英文看着费劲，我翻译成了中文，你可以参考对比一下。

在这里面：reCAPTCHA类型有V3和V2两种方式。不管您使用哪一种方式，他都有相关的使用指南，您可以参考他的代码进入加入到自己的网站中。

用得比较多的可能就是这种V2的方式了。

接入也非常 的简单，在你需要使用的地方引入JS，并使用对应的代码引入即可。

以上操作即可完成。

紧接上文，我们发现谷歌的recaptcha其实并没有hcaptcha那样简单的引入就可以使用了。因为他无法像hcaptcha直接通过ID判断当前是否已经进行判断。所以我们需要在代码中进行判断是否验证成功。

方法如下：

1：引入谷歌的JS

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
或者
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
如果需要国内可以访问，就使用后面的这一个，如果不需要国内访问，则使用上面的谷歌链接也可以。

2：加HTML代码，例如，这里面我们使用callback再使用JS回调来判断 

  <div    class="g-recaptcha"    data-sitekey="6Lf-VwoqAAAAAEfnF6R_5cYeR_Zn1aBRMuwetsm1"    data-theme="light" data-size="normal"    data-callback="callback"    data-expired-callback="expired"    data-error-callback="error"></div>

3：JS部分

    <script type="text/javascript" charset="utf-8">
         //js部分
var callback = function (args) {
    console.log(args)
    console.log('验证成功');
    $("#submitform").addClass("d-block");  //在未进行验证成功前，提交按钮不显示
    
};
var expiredCallback = function (args) {
    console.log(args)
    console.log('验证过期');
};
var errorCallback = function (args) {
    console.log(args)
    console.log('验证失败');
};


function getResponseFromRecaptcha() {
    var responseToken = grecaptcha.getResponse(widgetId);
    if (responseToken.length == 0) {
        alert("验证失败");
    } else {
        alert("验证通过");
        
    }
};

          </script>

完成以上即可。

第二种方式：

**步和上面**步一样。然后第二步：HTML

<div id="robot"></div>

第三步：JS

    <script type="text/javascript" charset="utf-8">
         //js部分
var callback = function (args) {
    console.log(args)
    console.log('验证成功');
    $("#submitform").addClass("d-block");//在未进行验证成功前，提交按钮不显示
    
};
var expiredCallback = function (args) {
    console.log(args)
    console.log('验证过期');
};
var errorCallback = function (args) {
    console.log(args)
    console.log('验证失败');
};

var widgetId;
var onloadCallback = function () {    // 得到组件id
    widgetId = grecaptcha.render('robot', {
        'sitekey': '你的KEY', 
        'theme': 'light', //主题颜色，有light与dark两个值可选
        'size': 'normal',//尺寸规则，有normal与compact两个值可选
        'callback': callback, //验证成功回调
        'expired-callback': expiredCallback, //验证过期回调
        'error-callback': errorCallback //验证错误回调
    });
};

function getResponseFromRecaptcha() {
    var responseToken = grecaptcha.getResponse(widgetId);
    if (responseToken.length == 0) {
        alert("验证失败");
    } else {
        alert("验证通过");
        
    }
};

          </script>