1. 完成服务端部署

需要后端部署完成。接口返回以下必传参数

2. 引入初始化js函数

gt.js下载地址

<script src="gt.js"></script>

3. 调用初始化函数进行初始化

initGeetest({// data中以下配置参数来自服务端 SDKgt: data.gt,challenge: data.challenge,offline: !data.success,new_captcha: true
}, function (captchaObj) {// 这里可以调用验证实例 captchaObj 的实例方法
})

注：对于同一个页面存在多个验证码场景的初始化，需要每个验证码场景调用 initGeetest 方法单独进行初始化；如果一个场景下有多个验证入口，需要进行多次初始化。

4. API 参考

appendTo(position)

传入id选择器

<div id="captcha-box"></div>
...
<script>initGeetest({// 省略配置参数}, function (captchaObj) {captchaObj.appendTo('#captcha-box');// 省略其他方法的调用});
</script>

verify()

当product为bind类型时，可以调用该接口进行验证。

这种形式的好处是，允许开发者先对用户所填写的数据进行检查，没有问题之后在调用验证接口。

<div id="btn">提交按钮</div>
<script>
initGeetest({// 省略配置参数product: 'bind'
}, function (captchaObj) {// 省略其他方法的调用document.getElementById('btn').addEventListener('click', function () {if (check()) { // 检查是否可以进行提交captchaObj.verify();}});captchaObj.onSuccess(function () {// 用户验证成功后，进行实际的提交行为// todo})
});
</script>

附官网链接：
api-web
客户端部署-web

前端使用 geetest 行为验证 web-部署教程相关推荐

七丶青龙nvjdc部署教程+短信验证登录对接傻妞
青龙nvjdc部署教程+短信验证登录对接傻妞Nolanjdc 没有服务器的先自行购买,这里推荐腾讯云2H4G8M首年70–点击购买青龙面板安装教程傻妞机器人安装教程 XDD安装教程 QQ交流:10 ...
《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开效 ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
开源美容美发行业小程序源码系统完整前端+后端+部署教程
分享一款开源的美容美发行业小程序源码系统,单店多店可以自由切换,实现一键在线预约,含完整前端+后端+部署教程,上手so easy! 小程序页面功能截图展示: 本套系统采用PHP+MySQL组合开发,系 ...
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
pytorch checkpoint_pytorch的两种部署方式 web部署与c++部署
知乎地址: https://zhuanlan.zhihu.com/c_1101089619118026752 作者: 小哲 github: https://github.com/lxztju/ ...
java web 教程_Java Web服务教程
java web 教程 Welcome to the Java Web Services Tutorial. Here we will learn about web services, useful ...

前端使用 geetest 行为验证 web-部署教程

1. 完成服务端部署

2. 引入初始化js函数

3. 调用初始化函数进行初始化

4. API 参考

appendTo(position)

verify()

前端使用 geetest 行为验证 web-部署教程相关推荐

最新文章

热门文章