前言

本文教你基于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/