trek-captcha 验证码接口的制作

2023-11-11 08:20

本文主要是介绍trek-captcha 验证码接口的制作,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

trek-captcha 验证码接口的制作

  • 介绍
  • 步骤
  • 总结

介绍

这一章本想去讲解滑动校验,但尝试了一下canvas服务器的安装过于复杂,不同的系统还要安装不同的插件,最后只能放弃了。还是用传统的图片验证码校验。原理也非常简单,使用trek-captcha插件,将生成的图片与验证码保存到session,最后再进行session校验。

步骤

  1. 安装插件
npm install trek-captcha  -save-dev
  1. 创建接口

接口配置如下在这里插入图片描述

  1. 生成代码并保存接口
    我们将接口保存到user文件里,点击插入代码到文件即可自动保存接口
    在这里插入图片描述
  2. 查看代码
    点击上图右边的文件目录即可打开接口文件,接口代码如下
var required = require('../plugs/guimain/required')
var mongoFunc = require('../funcs/mongoFunc')
var send = require('../funcs/sendData')
var mongodb = require('../plugs/mongose/mongoQuery')
var shortid = require('shortid')
var result = app => {var isEmptyStr = required.isEmptyStrvar isRange = required.isRangevar isEmptyObject = required.isEmptyObject// addCode// bXHPd1xS- Startapp.get('/user/captcha',(req, res) => { // 获取验证码var params = req.queryvar where = {}})// bXHPd1xS- end
  1. 添加插件的引用

文件中最顶部添加验证码插件的引用

var captcha = require('trek-captcha')
  1. 创建公共获取验证码的方法
    如图:
    在这里插入图片描述
    代码如下:
async function getImgCode(req, res){const {token,buffer} = await captcha();req.session.imageCode = token;res.writeHead(200, {'Content-Type': 'image/png'});res.write(buffer);res.end();}

简单的解释一下这段代码,这里的token就是验证码的实际值,通过session来将验证码的值存储起来,方便后续注册或登录接口的校验,最后再直接将生成好的图片流直接返回给前端。
8. 调用公共方法
在这里直接将方法名输入进去在这里插入图片描述
然后再点击生成代码,可以看到生成的代码自动会先调用公共方法

async function getImgCode(req, res){const {token,buffer} = await captcha();req.session.imageCode = token;res.writeHead(200, {'Content-Type': 'image/png'});res.write(buffer);res.end();}
app.get('/user/captcha',getImgCode,(req, res) => { // 获取验证码var params = req.queryvar where = {}})
  1. 重启服务访问验证码
node ./server.js local

也可以安装nodemon,这样每次修改接口就不需要每次重启了

在这里插入图片描述
10. 浏览器访问验证码
刚刚我们配置的接口,路径为user/captcha,而且还是get请求,所以直接在浏览器中输入地址
http://localhost:8072/user/captcha即可访问验证码,这样我们的图片验证码接口就制作完成了。
下一章讲解注册页面如何调用验证码,并实现服务器验证码的校验
在这里插入图片描述

总结

最后可以看到这个接口用guiplan来制作,整个过程我们只创建了一个公共的获取验证码方法,其他整个流程全由guiplan软件自动完成,代码也自动生成,非常方便。下一章将讲解注册功能,一键配置数据库,一键生成增删改查分页接口也非常简单,喜欢的朋友,记得关注哟

这篇关于trek-captcha 验证码接口的制作的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/388757

相关文章

Python验证码识别方式(使用pytesseract库)

《Python验证码识别方式(使用pytesseract库)》:本文主要介绍Python验证码识别方式(使用pytesseract库),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全... 目录1、安装Tesseract-OCR2、在python中使用3、本地图片识别4、结合playwrigh

Java中的Closeable接口及常见问题

《Java中的Closeable接口及常见问题》Closeable是Java中的一个标记接口,用于表示可以被关闭的对象,它定义了一个标准的方法来释放对象占用的系统资源,下面给大家介绍Java中的Clo... 目录1. Closeable接口概述2. 主要用途3. 实现类4. 使用方法5. 实现自定义Clos

java对接第三方接口的三种实现方式

《java对接第三方接口的三种实现方式》:本文主要介绍java对接第三方接口的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录HttpURLConnection调用方法CloseableHttpClient调用RestTemplate调用总结在日常工作

Java 的 Condition 接口与等待通知机制详解

《Java的Condition接口与等待通知机制详解》在Java并发编程里,实现线程间的协作与同步是极为关键的任务,本文将深入探究Condition接口及其背后的等待通知机制,感兴趣的朋友一起看... 目录一、引言二、Condition 接口概述2.1 基本概念2.2 与 Object 类等待通知方法的区别

SpringBoot实现接口数据加解密的三种实战方案

《SpringBoot实现接口数据加解密的三种实战方案》在金融支付、用户隐私信息传输等场景中,接口数据若以明文传输,极易被中间人攻击窃取,SpringBoot提供了多种优雅的加解密实现方案,本文将从原... 目录一、为什么需要接口数据加解密?二、核心加解密算法选择1. 对称加密(AES)2. 非对称加密(R

Java对接Dify API接口的完整流程

《Java对接DifyAPI接口的完整流程》Dify是一款AI应用开发平台,提供多种自然语言处理能力,通过调用Dify开放API,开发者可以快速集成智能对话、文本生成等功能到自己的Java应用中,本... 目录Java对接Dify API接口完整指南一、Dify API简介二、准备工作三、基础对接实现1.

Java controller接口出入参时间序列化转换操作方法(两种)

《Javacontroller接口出入参时间序列化转换操作方法(两种)》:本文主要介绍Javacontroller接口出入参时间序列化转换操作方法,本文给大家列举两种简单方法,感兴趣的朋友一起看... 目录方式一、使用注解方式二、统一配置场景:在controller编写的接口,在前后端交互过程中一般都会涉及

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口?2. 如何使用空接口?第一,第二,第三,3. 空接口几个要注意的坑坑1:坑2:坑3:接口-空接口1. 什么是空接