像这种谷歌自带的人机身份验证,实际上有很多插件可以实现。
但是有客户看他们同行都用的谷歌的这种,也让我帮他改成这种,那么现在我就来说说如何实现。
**步:登陆谷歌的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>
像这种谷歌自带的人机身份验证,实际上有很多插件可以实现。但是有客户看他们同行都用的谷歌的这种,也让我...
假如你的网站被黑了,**次打开网页时显示跳转到其他网站。再打开时却正常。不要以为网站没事。请注意查一...
注意事项:1、截止到2024年2月26日,Cookiebot仍然提供Free套餐,该套餐价格为每月0美元,支持绑定至多一个...
看到有小伙伴在问做外贸怎么收款,今天我就简单讲下做外贸的几种收款方式:💰1:个人银行卡美金收款一年收...