如何在 Express.js 中实现 Captcha 验证码
在网站开发中，验证码是一种常用的手段，用于防止机器恶意攻击，提高用户安全性。本文将介绍如何在 Express.js 中实现 Captcha 验证码。
- Captcha 原理
Captcha 是 Completely Automated Public Turing test to tell Computers and Humans Apart 的缩写，意为全自动区分计算机和人类的图灵测试。Captcha 的基本原理是向用户展示一张图片或一段文字，要求用户进行对应的操作，例如输入验证码、选中对应的图片等。这些操作对于机器比较困难，但对于人类则较为简单，因此可以保证用户的真实性。
- Captcha 实现方式
Captcha 的实现方式有多种，例如：
- 简单文字验证码：通过随机生成数字或字母组合，生成一张验证码图片，并将其输出到页面上；
- 图片文字验证码：同样是通过随机生成数字或字母组合，但将其渲染到一张背景图中，增加了美观性和安全性；
- 数学算式验证码：通过生成简单的数学算式，要求用户输入结果，同样可以将结果渲染到一张图片或文字中；
- 滑动拼图验证码：通过生成一张有缺陷的图片，要求用户拖动滑块找到正确的缺陷位置。
- Express.js 实现 Captcha
在 Express.js 中实现 Captcha 主要分为以下几个步骤：
- 安装依赖包：我们可以使用 npm 命令来安装一些相关的依赖包，例如：
npm install express-captcha
- 建立路由：为实现我们的 Captcha 策略，需要在 Express.js 框架下建立相应的路由，并在该路由下定义生成 Captcha 图片的 API 接口。
例如，我们可以在 routes 目录下新建一个 captchaRouter.js 文件，然后再在 app.js 文件中调用相应的路由：
//app.js
const express = require('express');
// 导入路由模块
const captchaRouter = require('./routes/captchaRouter');
const app = express();
//注册路由
app.use('/captcha', captchaRouter);接着，我们在 captchaRouter.js 文件中建立 get 接口，并在其中使用 express-captcha 模块创建 Captcha 图片：
-- -------------------- ---- -------
------------------
----- ------- - -------------------
----- ------- - ---------------------------
----- ------ - -----------------
-- --- ------- -----
--------------- ------------ ------------- -----
----------------
---------------------------------------
---
-------------- - -------其中，captcha({}) 便是调用了 express-captcha 模块生成了一张验证码图片，并返回给前端，req.captcha.data 即为生成的验证码图片前端所需的数据，通过传递给 res.status(200).send()，就可以将该数据返回给前端。
- 加入 session：为避免机器恶意攻击，我们还需要判断验证码是否有效，常用的方式是借助 session 实现。因此，我们需要在 Express.js 中启用 session，并配置相应的 session 选项：
//app.js
const session = require('express-session');
app.use(session({
secret: 'session-secret',
resave: false,
saveUnititialized: true,
}));- 验证 captcha：最后，我们在前端提交验证码表单时，需要进行验证，以确保用户的真实性。这里还可以调用 express-captcha 模块中的 captcha.check() 方法，进行验证码的验证。
-- -------------------- ---- -------
------------------
---------------- ------------- -----
----- - ------- - - ---------
---------- --- -------------------- -
----------------- ----------
- ---- -
----------------- --- ----------
-
---在这里，我们可以将生成的验证码图片存储到 session 中，以便在提交验证码表单时进行验证，并最终返回结果，实现验证 Captcha 的效果。
- 示例代码
下面是一个完整的示例代码，方便大家进一步了解如何在 Express.js 中实现 Captcha 验证码。
-- -------------------- ---- -------
--------
----- ------- - -------------------
----- ------- - ---------------------------
----- ---------- - -----------------------
----- ------------- - ----------------------------------
----- --- - ----------
----- ---- - -----
----------------------------------
------------------------------- --------- ---- ----
-----------------
------- -----------------
------- ------
------------------- -----
----
------------------- ---------------
---------------- -- -- -------------------- --- --------- -- ---- -------------- -------------------- ---- -------
------------------
----- ------- - -------------------
----- ------- - ---------------------------
----- ------ - -----------------
--------------- ------------ ------------- -----
------------------- - ----------------- -- ------ ------- -
----------------
---------------------------------------
---
---------------- ------------- -----
----- - ------- - - ---------
---------- --- -------------------- - -- -----
----------------- ----------
- ---- -
----------------- --- ----------
-
---
-------------- - -------- 总结
本文介绍了如何在 Express.js 中实现 Captcha 验证码，并分别介绍了相应的实现原理及步骤。验证码作为一种常见的安全手段，可以有效提高用户的安全性，避免恶意攻击，值得开发者们在网站开发中加以重视！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458946d968c7c53b0aee1d0