Node.js图形验证码的生成

贾迎春
• 阅读 78

效果图

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/

点赞
收藏
评论区
推荐文章
Irene181 Irene181
2年前
拒绝反爬虫!教你搞定爬虫验证码
导读:目前,许多网站采取各种各样的措施来反爬虫,其中一个措施便是使用验证码。随着技术的发展,验证码的花样越来越多。验证码最初是几个数字组合的简单的图形验证码,后来加入了英文字母和混淆曲线。有的网站还可能看到中文字符的验证码,这使得识别越发困难。使用验证码可以防止应用或者网站被恶意注册、攻击,对于网站、APP而言,大量的无效注册、重复注册甚至是恶意攻击很令
宙哈哈 宙哈哈
6个月前
一个Node.js图形验证码的生成
本文是我在一次基于Node.js环境下开发滑动拼图验证码,下面是我对这次项目的总结。
Easter79 Easter79
1年前
spring整合Google Kaptcha验证码的使用
Kaptcha是什么?kaptcha是谷歌开源的非常实用的验证码生成工具,基于SimpleCaptcha的开源项目。使用Kaptcha生成验证码十分简单并且参数可以进行自定义。只需添加jar包配置下就可以使用,通过配置,可以自己定义验证码大小、颜色、显示的字符等等。下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取
Wesley13 Wesley13
1年前
java生成图形验证码
首先,需要生成验证码字符串,方式很多,下面提供一种,根据指定源的方式来生成验证码/使用系统默认字符源生成验证码@paramverifySize验证码长度@return/publicstaticStringgenera
Stella981 Stella981
1年前
Python第三方模块tesserocr安装
介绍在爬虫过程中,难免会遇到各种各样的验证码,而大多数验证码还是图形验证码,这时候我们可以直接用OCR来识别。tesserocr 是Python的一个OCR识别库,但其实是对tesseract做的一层PythonAPI封装,所以它的核心是tesseract。因此,在安装tesserocr之前,我们需要先安装t
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 中使用 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模式下验证码存储策略
Stella981 Stella981
1年前
Google Kaptcha验证码的使用 Kaptcha是什么? 怎么使用Kaptcha? 更详细的Kaptcha验证码配置? 效果图如下
Kaptcha是什么?kaptcha是谷歌开源的非常实用的验证码生成工具,基于SimpleCaptcha的开源项目。使用Kaptcha生成验证码十分简单并且参数可以进行自定义。只需添加jar包配置下就可以使用,通过配置,可以自己定义验证码大小、颜色、显示的字符等等。下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
贾迎春
贾迎春
Lv1
春江潮水连海平,海上明月共潮生。
文章
9
粉丝
1
获赞
3