手把手教你vue项目接入漂亮的验证码

310 阅读1分钟

前言

本文教你基于Node.js环境,在vue项目中如何接入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文件,头部引用凯格行为验证码js

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

效果展示

相关链接

SDK开源地址:https://github.com/KgCaptcha,顺便做了一个演示:https://www.kgcaptcha.com/demo/