重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vue+typescript+极验登录验证的实现方法

此功能基于vue(v2.6.8) + typescript(v3.3.3333), 引入极验(geetest v3+)(官方api),使用其product: 'bind'模式, 页面挂载后初始化ininGeetest,点击登录按钮后先做表单验证,通过后弹出滑块框,拖动验证成功,执行登录方法。

创新互联为客户提供专业的成都网站设计、成都做网站、程序、域名、空间一条龙服务,提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、移动网站建设等网站方面业务。

本项目为前后端分离,所以后端部署部分,请自行参考文档操作

vue + typescript + 极验登录验证的实现方法

后台接口:

vue + typescript + 极验登录验证的实现方法

vue + typescript + 极验登录验证的实现方法

vue + typescript + 极验登录验证的实现方法

开始:/public/js目录添加 jquery-1.12.3.min.js文件 和 gt.js(下载)在/public/index.html中引入以上添加的两个文件login.vue使用注意事项:要注意在gt.js中,initGeetest已被挂载到window对象

vue + typescript + 极验登录验证的实现方法

页面可能报错: Uncaught SyntaxError: Unexpected token <

vue + typescript + 极验登录验证的实现方法

vue + typescript + 极验登录验证的实现方法

将报错对象添加到与public同级的static目录下(没有则新建),修改引入路径即可。

源码:





以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


本文名称:vue+typescript+极验登录验证的实现方法
当前地址:http://cqcxhl.com/article/gdpepg.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP