一个Node.js图形验证码的生成

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
效果图

准备
  • 访问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文件中，配置路由。

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. Vue.config.productionTip = false
  5. // 配置全局路由、组件
  6. new 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> 
  15. <script>
  16. export default {
  17.   name: 'App',
  18. }
  19. //初始化凯格行为验证码
  20. kg.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/

【感谢龙石数据为本站数据中台建设方案 http://www.longshidata.com/pages/government.html，感恩 】
更多阅读