共计 1472 个字符，预计需要花费 4 分钟才能阅读完成。
前言
本文教你基于 Node.js 环境，在 vue 我的项目中如何接入 KgCapctah。
筹备工作
- 拜访凯格行为验证码官网，注册账号后登录控制台，拜访“无感验证”模块，申请开明后零碎会调配给利用一个惟一的 AppId、AppSecret。
- 凯格提供后端 SDK 来校验 token(即平安凭据) 是否非法，目前反对 PHP 版、Python 版、Java/JSP 版、.Net C# 版。
- 拜访 Node.js 官网，下载 Node.js 运行环境，拜访 vue.js 中武官网，装置下载 vue.js，创立一个 vue 我的项目，具体操作请查看 vue.js 中武官网
我的项目目录
代码实现
index.html
- 我的项目根目录 index.html 文件，头部援用凯格行为验证码 js
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |
| <!-- 引入凯格行为验证码 js--> | |
| <script id="KgCaptcha" src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX"></script> | |
| <!-- 引入凯格行为验证码 js--> | |
| </head> | |
| <body> | |
| <!--vue 主体 --> | |
| <div id="app"></div> | |
| <!--vue 主体 --> | |
| </body> | |
| </html> |
main.js
- src/main.js 文件中，配置路由
| import Vue from 'vue' | |
| import App from './App' | |
| import router from './router' | |
| Vue.config.productionTip = false | |
| // 配置全局路由、组件 | |
| new Vue({ | |
| el: '#app', | |
| router, | |
| components: {App}, | |
| template: '' | |
| }) |
App.vue
- src/App.vue 文件中，定义 html
| <template> | |
| <div id="app"> | |
| <!-- 自定义组件、内容 --> | |
| <form id="form"> | |
| token: <input name="token" _cke_saved_name="token" _cke_saved_name="token" _cke_saved_name="token" id="token"> | |
| <!-- 凯格行为验证码组件 --> | |
| <div id="captchaBox"></div> | |
| <!-- 凯格行为验证码组件 --> | |
| <button type="submit"> 提交 </button> | |
| </form> | |
| <!-- 自定义组件、内容 --> | |
| </div> | |
| </template> | |
| <script> | |
| export default {name: 'App',} | |
| // 初始化凯格行为验证码 | |
| kg.captcha({ | |
| // 绑定元素，验证框显示区域 | |
| bind: "#captchaBox", | |
| // 验证胜利事务处理 | |
| success: function(e) {console.log(e); | |
| kg.$('#token').value = e['token'] | |
| }, | |
| // 验证失败事务处理 | |
| failure: function(e) {console.log(e); | |
| }, | |
| // 点击刷新按钮时触发 | |
| refresh: function(e) {console.log(e); | |
| } | |
| }); | |
| </script> |
成果展现
相干链接
SDK 开源地址：https://github.com/KgCaptcha，顺便做了一个演示：https://www.kgcaptcha.com/demo/
正文完
