白银市如何使用谷歌的人机身份验证功能recaptcha？
时间：2024-06-22 来源：白银市外贸网站建设
像这种谷歌自带的人机身份验证，实际上有很多插件可以实现。
但是有客户看他们同行都用的谷歌的这种，也让我帮他改成这种，那么现在我就来说说如何实现。
**步：登陆谷歌的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>
