效果图
准备
- 访问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。
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><!--引入凯格行为验证码js--><scriptid="KgCaptcha"src="captcha.js?appid=XXX"></script><!--引入凯格行为验证码js--></head><body><!--Vue主体--><divid="app"></div><!--Vue主体--></body></html>
main.js
src/main.js文件中，配置路由。
importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'Vue.config.productionTip=false// 配置全局路由、组件newVue({ el: '#app', router, components: { App }, template: ''})
App.vue
src/App.vue文件中，定义html。
<template><divid="app"><!--自定义组件、内容--><formid="form"> token: <inputname="token"_cke_saved_name="token"_cke_saved_name="token"_cke_saved_name="token"id="token"><!--凯格行为验证码组件--><divid="captchaBox"></div><!--凯格行为验证码组件--><buttontype="submit">提交</button></form><!--自定义组件、内容--></div></template><script>exportdefault { 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，顺便做了一个演示：
![node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘](https://ucc.alicdn.com/3rkpnpbboddyy/developer-article1611150/20240924/6d75171d53ae4374be44c9d91a3bd8f0.png?x-oss-process=image/resize,h_160,m_lfit)
