效果图
准备工作
- 访问KgCaptcha网站，注册账号后登录控制台，访问“无感验证”模块，申请开通后系统会分配给应用一个唯一的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文件，头部引用KgCaptcha的js。
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0"> 6<!--引入凯格行为验证码js--> 7<script id="KgCaptcha" src="captcha.js?appid=XXX"></script> 8<!--引入凯格行为验证码js--> 9</head> 10<body> 11 <!--Vue主体--> 12 <div id="app"></div> 13 <!--Vue主体--> 14</body> 15</html>
- main.js src/main.js文件中，配置路由。
1import Vue from 'vue' 2import App from './App' 3import router from './router' 4Vue.config.productionTip = false 5// 配置全局路由、组件 6new Vue({ 7 el: '#app', 8 router, 9 components: { App }, 10 template: '' 11})
- App.vue src/App.vue文件中，定义html。
1<template> 2 <div id="app"> 3 <!--自定义组件、内容--> 4 <form id="form"> 5 token: <input name="token" _cke_saved_name="token" _cke_saved_name="token" _cke_saved_name="token" id="token"> 6 <!--凯格行为验证码组件--> 7 <div id="captchaBox"></div> 8 <!--凯格行为验证码组件--> 9 <button type="submit">提交</button> 10 </form> 11 <!--自定义组件、内容--> 12 </div> 13</template> 14 15<script> 16export default { 17 name: 'App', 18} 19//初始化凯格行为验证码 20kg.captcha({ 21 // 绑定元素，验证框显示区域 22 bind: "#captchaBox", 23 // 验证成功事务处理 24 success: function(e) { 25 console.log(e); 26 kg.$('#token').value = e['token'] 27 }, 28 // 验证失败事务处理 29 failure: function(e) { 30 console.log(e); 31 }, 32 // 点击刷新按钮时触发 33 refresh: function(e) { 34 console.log(e); 35 } 36}); 37</script>
总结
SDK开源地址：https://github.com/KgCaptcha，顺便做了一个演示：https://www.kgcaptcha.com/demo/