打造一个外贸网站,不仅需要有吸引人的设计,更需要考虑用户的体验。我们的目标是从文案、设计、技术等多个维度出发,构建一个以用户体验为中心、以询盘为导向的营销型外贸网站。让您的客户在短时间内了解您的优势,快速询盘!
外贸网站建设 外贸独立站推广 跨境电商

武穴市如何使用谷歌的人机身份验证功能recaptcha?

时间:2024-06-22   来源:武穴市外贸网站建设

image.png

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

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


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


image.png


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

image.png

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

image.png


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

image.png

接入也非常 的简单,在你需要使用的地方引入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>




下一篇:没有了!
新闻推荐
如何使用谷歌的人机身份验证功能recaptcha?
如何使用谷歌的人机身份验证功能recaptcha?

像这种谷歌自带的人机身份验证,实际上有很多插件可以实现。但是有客户看他们同行都用的谷歌的这种,也让我...

网站被黑后,**次打开会跳转其他网页,再打开则不会,如何查询恶意代码
网站被黑后,**次打开会跳转其他网页,再打开则不会,如何查询...

假如你的网站被黑了,**次打开网页时显示跳转到其他网站。再打开时却正常。不要以为网站没事。请注意查一...

欧盟意见征求代码如何安装,使用Cookiebot CMP部署指南
欧盟意见征求代码如何安装,使用Cookiebot CMP部署指南

欧盟地区包括27个成员国。‌这些国家分别是奥地利、比利时、保加利亚、塞浦路斯、克罗地亚、捷克共和国、丹...

外贸的几种收款方式
外贸的几种收款方式

看到有小伙伴在问做外贸怎么收款,今天我就简单讲下做外贸的几种收款方式:💰1:个人银行卡美金收款一年收...

开启外贸时代,欢迎留言!
留言您的联系方式,我们会**时间联系您!

Top