更新于

谷歌 google验证码 reCAPTCHA V2 复选框形式 对接

发布于 / 分类: JavaScript / 暂无评论 / 阅读量: 129

申请key地址: google

v2版就是常见的验证方式,v3是通过判断评分的方式,这里先看看v2的用法。

首先google官方文档: 文档提供的api链接国内是无法使用的,需要调整下:

https://www.google.com/recaptcha/api.js

将这段链接改为:

https://www.recaptcha.net/recaptcha/api.js

即可。

引入js

由于js我们可以异步引入,所以官方支持一个load回调,所以使用异步加载js文件的话,你的回调函数记得要写在加载js文件之前

官方引入示例:

<script src="https://www.recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>

可以看到onload对应一个onloadCallback,这个就是回调函数,我们初始化都在这个回调函数里。

render表示是否显式加载组件,默认值是onload,我们这里设置为explicit,表示不自动将验证模块渲染,我们自己手动初始化渲染。

正常使用前我们还需要了解下初始化函数:

初始化

grecaptcha.render("id",option);

有两个参数,第一个为元素的id,我们一般都是创建一个div元素,设置一个id,然后这个元素的id作为参数。

option为初始化配置,有好几个参数:

参数名说明
sitekeykey申请recaptcha时第一个key
themelight/dark主题,就两个色
sizenormal(默认值,长方形)/compact(正方形)验证的样式大小
callbackfunction验证通过函数
expired-callbackfunction超时回调函数
error-callbackfunction错误回调函数

这里的回调函数其实都不大重要,因为要判断是否验证通过还有另一个方法会方便一些。

超时回调是当验证通过超过一定时间会有超时,然后需要重新验证。

现在参数知道了我们把引入的代码完整下:

<script >
function onloadCallback() {
        grecaptcha.render('sss', {
            'sitekey': '第一个key',
            'callback': onSubmit,
        });
    };
    function onSubmit(token){
      console.log(token)
    } 
</script> 
<script src = "https://www.recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer > < /script>

回调函数写前面,验证成功后,回调函数会有一个token参数传入。

在这里,可以通过三个回调函数,也可以完成一些基本的验证操作。

但是一般来说,我们可能需要在点击提交按钮后判断验证是否通过,在进行提交。

所以我们还需要一个手动判断的方法:

grecaptcha.getResponse()

这个方法需要传入一个参数,这个参数就是recaptcha的id,官方文档称之为opt_widget_id,小部件id,这个id怎么获得呢?

其实grecaptcha.render初始化后就会return出一个id,这个id我们用一个变量保存即可。

<script >
var op_id = null;
function onloadCallback() {
        op_id = grecaptcha.render('sss', {
            'sitekey': '第一个key',
            'callback': onSubmit,
        });
    };
    function onSubmit(token){
      console.log(token)
    } 
</script> 

op_id变量保存了id,然后我们通过方法判断:

var isToken = grecaptcha.getResponse(op_id);

if(isToken.length){
  console.log("通过");
}else {
  console.log("失败");
}

grecaptcha.getResponse如果验证通过会返回一个token值,不通过则是一个空字段,所以通过length来判断是否通过,这个这个方法我们封装成一个函数,绑定在元素click事件上即可。

方法都搞定了,剩下的就是html元素渲染了,我们上面使用了一个id为sss的参数,所以我们要保证在页面中有一个id名为sss元素容器,一般为div

<div id="sss"></div>

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有393条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局

购买