一个Node.js图形验证码的生成-阿里云开发者社区

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

2023-03-14 323

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文是我在一次基于Node.js环境下开发滑动拼图验证码，下面是我对这次项目的总结。

效果图

准备

访问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。

<!DOCTYPE html><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>