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

宙哈哈
• 阅读 94

效果图

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

准备

  • 访问KgCaptcha网站,注册账号后登录控制台,访问“无感验证”模块,申请开通后系统会分配给应用一个唯一的AppId、AppSecret。
  • 提供后端SDK来校验token(即安全凭据)是否合法 ,目前支持PHP版、Python版、Java/JSP版、.Net C#版。
  • 访问Node.js官网,下载Node.js运行环境,访问Vue.js中文官网,安装下载Vue.js,创建一个Vue项目,具体操作请查看Vue.js中文官网。

具体实现

项目目录

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

index.html

项目根目录index.html文件,头部引用KgCaptcha的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="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/

点赞
收藏
评论区
推荐文章
Stella981 Stella981
1年前
Node.js
1.Node来历   2009年,正是推出基于Javascript语言和V8引擎的开源Web服务项目,命名为Node.js,Node.js是第一次把Javascript带到后端开发。全很很多开发人员都熟悉Javascript,所以Node.js一下子就火了。   Javascript语言本身是完善的函数式语言,在前端开发时,开发
Stella981 Stella981
1年前
Node.js 安装与开发
Node.js简介Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由RyanDahl开发,实质是对ChromeV8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。Node.j
Stella981 Stella981
1年前
Node.js 中使用 ECDSA 签名遇到的坑
文/Fenying最近有个朋友问我关于Node.js下使用ECDSA的问题,主要是使用Node.js的Crypto模块无法校验网络传输过来的签名结果。在踩坑无数后,终于搞清楚了原因。坑0x00:签名输出格式在排除了证书、消息不一致的可能之后,我开始对比使用Node.js签名的结果与网络传输过来的签
Stella981 Stella981
1年前
Spring Security构建Rest服务
浏览器模式下验证码存储策略浏览器模式下,生成的短信验证码或者图形验证码是存在session里的,用户接收到验证码后携带过来做校验。!(https://oscimg.oschina.net/oscnet/75774cf1ab5780bbf370ae42d1eff49e777.png)APP模式下验证码存储策略
Wesley13 Wesley13
1年前
.Net中验证码图片生成
开发网站或平台系统,登录页面是必不可少的功能,但是现在很多人可以使用工具暴力破解网站密码,为了防止这类非法操作,需要在登录页面添加验证,验证码就是最常用的一种验证方式。我结合了自己的经验和网上的验证码资料,总结一下c验证码开发,直接放代码,文中有注释,可以轻松理解代码意思。功能:实现了打开登陆页面是生成验证码图片以及点击验证码时,刷新验证码功能,验
Wesley13 Wesley13
1年前
java生成图形验证码
首先,需要生成验证码字符串,方式很多,下面提供一种,根据指定源的方式来生成验证码/使用系统默认字符源生成验证码@paramverifySize验证码长度@return/publicstaticStringgenera
宙哈哈 宙哈哈
2星期前
Vue.js 滑动拼图验证码实现笔记
关于验证码的使用场景还是非常多的,很多网站上的验证码可谓是五花八门,下面是我使用Vue.js实现滑动拼图验证码做的一个笔记。
宙哈哈 宙哈哈
2星期前
【记】滑动拼图验证码在搜索中的作用
验证码应用于我们生活、工作的方方面面,比如注册登录账号、支付订单、修改密码等。下面我是在一次项目中利用滑动拼图验证码和搜索功能“合作共赢”的记录。
宙哈哈 宙哈哈
2星期前
C#滑动拼图验证码实现笔记
C是一个现代的、通用的、面向对象的编程语言,它是由微软(Microsoft)开发的,由Ecma和ISO核准认可的。突发奇想,动手开发一个C滑动拼图验证码,下面是我开发过程的记录。
宙哈哈 宙哈哈
2星期前
【总结】Java实现短信验证码
Java是一种流行的编程语言,验证码是一种常用的网络安全技术。Java发展至今,网上也出现了各种各样的验证码,本人初学Java,下面是我用Java实现短信验证码的总结。