木灵鱼儿
阅读:2533
谷歌 google验证码 reCAPTCHA V2 隐藏式 对接
相对于复选框式的,该插件还支持隐藏式的。
基本型
基本型是最简单的一个方式,它需要先将js文件引入,不能异步,并且要开启自动加载组件,基本就是把一个组件绑定在一个按钮元素上,而且这个隐藏式,还需要单独申请一个隐藏式的key,自行申请。
<script src="https://www.recaptcha.net/recaptcha/api.js"></script>
<script>
function onSubmit(token) {
console.log(token)
}
</script>
<button class="g-recaptcha" data-sitekey="第一个key" data-callback='onSubmit'>Submit</button>
先引入,并创建好成功的回调函数,然后元素绑定,class一定不要漏写了。
回调函数返回一个token,也还是判断length。
这样的方式有一个问题,就是如果该元素的click事件被人提前截取了可能会导致这个方法无效
异步基本加载
<script>
function onloadCallback() {
grecaptcha.render('submit', {
'sitekey': '第一个key',
'callback': onSubmit
});
};
function onSubmit(token) {
console.log(token)
}
</script>
<input id='submit' type="submit" value="Submit">
<script src="https://www.recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
使用了这种方式,在不使用异步加载自己手动渲染的情况下我们没办法使用grecaptcha.getResponse()
的方式去判读是否验证通过,我们可以使用grecaptcha.execute();
的方式去触发一次判断,然后成功通过后触发回调函数,从而进行判断。
grecaptcha.execute();
接受一个opt_widget_id
参数,不写默认为第一个。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
谷歌 google验证码 reCAPTCHA V3 对接
v3它没有显式的一个操作,他可以在用户不知道的情况下进行验证,通过判断用户评分这些,不过评分判断要配合后端使用,如果是纯前端操作,那么会和v2一样,成功会返回一个token。基本<script src="https://www.recaptcha.net/recaptcha/api.js?render=第一个key"></script> <script> grecaptcha.ready(function () { grecaptcha.execute('第一个key', { action: 'homepage' })....
谷歌 google验证码 reCAPTCHA V2 复选框形式 对接
申请key地址:googlev2版就是常见的验证方式,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...
