vue2.0 + 极验验证

版权声明: https://blog.csdn.net/XiaoYi0215/article/details/79921967

1.极验验证gt.js需要注意的是这两行
    window.initGeetest initGeetest;
    return initGeetest;
网上有博主的文章中是没有这两行的截图的,需要注意。完整的js如下:

-----------------------------------------------------------------------------------------------------------
gt-1.js 修改过的js 使用export导出,使用时import引入

gt-2.js 极验文档js 使用vuex,在store下的index文件中使用Vue.use(Gt)导入
-----------------------------------------------------------------------------------------------------------
2.极验验证接口
本人用的是axios 所以api是这样写的,可以用自定义的,只要接口写的对 该传的参数对了即可。

2.1 axios-api接口

2.2极验验证接口api


3.在页面中显示极验验证的位置



4.在需要极验验证的页面引入接口api和极验验证的gt.js

5.极验验证方法及极验验证成功显示在页面中查看获取参数的地方 参数用来调用短信接口时用到的





/***** start- 2018-09-27  获取极验参数修改获取方法:[之前没有看文档写的,今天看了文档!!!尴尬 ̄□ ̄||]  *****/

_this.geetest_challenge = captchaObj.getValidate().geetest_challenge;

_this.geetest_validate = captchaObj.getValidate().geetest_challenge;

_this.geetest_seccode = captchaObj.getValidate().geetest_challenge;

< 如果使用vuex的,通过mapActions调用,在调用极验接口之后返回对象的 res <=> captchaObj >
geetest_challenge = res.getValidate().geetest_challenge
geetest_validate = res.getValidate().geetest_validate
geetest_seccode = res.getValidate().geetest_seccode

/**

注:[原来document的写法可以改为以下写法↓↓↓↓↓↓↓

极验验证官网文档使用方法-->通过 ajax 方式进行二次验证]

document.getElementByTagName('input')['geetest_xxx']  替换为  obj.getValidate().geetest_xxx 

 **/

/***** end- 2018-09-27   ̄□ ̄||]  *****/

6.在created(){}中调用this.initGtCaptcha()

【有问题可咨询+q:791758820】


我是个vue初入门的小白gt.js是借鉴了该文章博主【https://www.cnblogs.com/JiaXingBingGan/p/7111702.html】github上的js ,发现自己拿过来用的极验js少了点东西。axios-api是我大爷提供的技术支持。其他地方是自己琢磨写的……哈哈,因为最近有小伙伴问了,所以写了这个。希望对大家有帮助哟!(^U^)ノ~YO
小白写的可能比较繁琐简单了些,本人感觉还挺好理解的,只要api能正确请求 正确引用gt.js就好了。

猜你喜欢

转载自blog.csdn.net/XiaoYi0215/article/details/79921967