背景
对于验证码的应用场景还是十分多的,很多网站上的验证码堪称是形形色色,上面是我应用Vue.js实现滑动拼图验证码做的一个笔记。
筹备工作
- 拜访KgCaptcha网站,注册账号后登录控制台,拜访“无感验证”模块,申请开明后零碎会调配给利用一个AppId和AppSecret。
- 提供后端SDK来校验token(即平安凭据)是否非法 ,目前反对PHP版、Python版、Java/JSP版、.Net C#版。
- 拜访Vue.js中武官网,复制Vue.js插件链接。
- 留神:先HTML头部初始化行为验证码,而后HTML底部初始化Vue.js,否则KgCaptcha的js局部函数与被Vue.js发生冲突,导致生效。
HTML、JS代码
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><!--头部引入vue.js插件--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--头部引入vue.js插件--><!--头部引入行为验证码js插件--><script id="KgCaptcha" src="captcha.js?appid=xxx"></script><script> kg.captcha({ // 绑定元素,验证框显示区域 bind: "#captchaBox", //嵌入式、触发式( 嵌入式、触发式标签及事件 和 弹窗式标签及事件 ,二选一) button: "#captchaButton", //弹窗式( 嵌入式、触发式标签及事件 和 弹窗式标签及事件 ,二选一) // 验证胜利事务处理 success: function(e) { console.log(e); kg.$('#token').value = e['token']; }, // 验证失败事务处理 failure: function(e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function(e) { console.log(e); } });</script><!--头部引入行为验证码js插件--></head><body> <div id="app"> <!--自定义内容、vue组件--> token: <input name="token" id="token"> <!--行为验证码组件--> <div id="captchaBox"></div> <!--嵌入式、触发式( 嵌入式、触发式标签及事件 和 弹窗式标签及事件 ,二选一) --> <!--行为验证码组件--> <button type="button">提交</button> <a id="captchaButton">点击弹出验证窗口</a> <!--弹窗式( 嵌入式、触发式标签及事件 和 弹窗式标签及事件 ,二选一)--> <!--自定义内容、vue组件--> </div></body><!--底部运行vue.js代码--> <script> var app = new Vue({ el: '#app',})</script><!--底部运行vue.js代码--> </html>
最初
SDK开源地址:https://github.com/KgCaptcha,顺便做了一个演示:https://www.kgcaptcha.com/demo/