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

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

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

vue + typescript + 极验登录验证的实现方法_第1张图片

后台接口:

vue + typescript + 极验登录验证的实现方法_第2张图片

vue + typescript + 极验登录验证的实现方法_第3张图片

vue + typescript + 极验登录验证的实现方法_第4张图片

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

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


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

源码:





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

你可能感兴趣的:(vue + typescript + 极验登录验证的实现方法)