在 Express.js 应用程序中实现 OTP 身份验证-JavaScript中文网-JavaScript教程资源分享门户

随着互联网的快速发展，安全问题越来越成为人们关注的焦点。在互联网应用程序中，用户的身份认证是非常关键的环节。除了传统的用户名密码认证之外，一种常见的身份认证方式是短信或邮箱验证，即一次性密码（OTP）验证。

本文将介绍如何在 Express.js 应用程序中实现 OTP 身份验证，帮助读者了解如何使用 Node.js 中的第三方库 speakeasy 和 QRCode，快速开发 OTP 身份验证功能。

OTP 身份验证原理

OTP 身份验证是指在进行身份认证的时候，服务端通过一个动态生成的一次性密码来验证用户的身份。通常的实现方式是服务端发送一个包含动态密码的短信或邮件给用户，用户通过验证动态密码来完成身份认证。

OTP 身份验证的实现原理是基于时间同步的算法，即 Token 数据和生成 Token 的算法都是通过时间值来计算的，以确保同一时间内生成的密钥相同。在每个时间片中，客户端和服务器都将从相同的 Token 数据集中生成 Token 码，并使用该算法对令牌进行验证，从而确定用户是否是合法的。

实现 OTP 身份验证的必要库

在本文的实现中，将依赖以下第三方库来完成身份验证效果的实现：

Express.js：流行的 Node.js Web 应用程序框架，支持路由、模块化、中间件等核心特性。
speakeasy：Node.js 的 OTP 库，提供了简单易用的完整的 OTP 实现，包括 HOTP 和 TOTP 算法，并能够与 Google Authenticator 兼容。
qrcode：支持多种图型输出（CairoSvg, ImageMagick, Qt）的二维码生成器，可以快速生成 OTP 身份验证的二维码，方便用户进行扫码认证。

实现步骤

添加 speakeasy 和 qrcode 依赖

在项目的根目录下，在命令行终端输入以下命令以安装 speakeasy 和 qrcode：
```
npm install --save speakeasy qrcode
```

添加 OTP 身份验证路由

在 Express.js 应用程序中，添加 OTP 身份验证的路由，供用户操作。如果用户还未验证，将推送到验证页面，否则将将返回主页。

var speakeasy = require('speakeasy');
var QRCode = require('qrcode');
var secret = speakeasy.generateSecret({length: 20});

app.get('/otp', function (req, res) {
    if (!req.session.authenticated) {//如果还未验证，则推送到验证页面
        var otpauthUrl = 'otpauth://totp/' + encodeURIComponent('My App') + '?secret=' + secret.base32;
        QRCode.toDataURL(otpauthUrl, function(err, imageUrl) {
            res.render('otp', {qrCodeUrl: imageUrl, appName: 'My App'});
        });
    }  else {
        res.redirect('/');
    }
});

验证 OTP 身份

用户在验证页面，将根据输入的验证码进行验证，如果验证通过，将设置验证成功标识 authenticated，并返回主页。

app.post('/otp', function (req, res) {
    var verified = speakeasy.totp.verify({
        secret: secret.base32,
        encoding: 'base32',
        token: req.body.token
    });

    if (verified) {
        req.session.authenticated = true;
        res.redirect('/');
    } else {
        res.render('otp', {message: 'Invalid Token Entered.', qrCodeUrl: req.body.qrcode, appName: req.body.appName})
    }
});

HTML 模板

页面中使用 ejs 模板语言，当用户尚未验证时，将显示验证页面；否则将显示主页。以下是 HTML 界面的实现示例：

<% if (!authenticated && qrCodeUrl) {%>
        <form method='post'>
            <h2>Scan the following QR Code with your Authenticator App</h2>
            <h3><%= appName %> Authentication</h3>
            <img src="<%= qrCodeUrl %>" alt="OTP QR Code"><br><br>
            <input type='text' name='token' placeholder='Enter token'/>
            <input type='hidden' name='qrcode' value='<%=qrCodeUrl%>' />
            <input type='hidden' name='appName' value='<%=appName%>' />
            <input type='submit' value='Submit' /><br>
            <h4><%= message %></h4>
        </form>
<% } else { %>
         <h2>OTP Authenticated - Validated User</h2>
         <p>Welcome!!</p>
            <form method='post' action='/logout'>
                <input type='submit' value='Log Out' />
            </form>
<% } %>

总结

在 Express.js 应用程序中，实现 OTP 身份验证需要使用 speakeasy 和 qrcode 两个第三方库。通过以上步骤的实现，即可快速实现 OTP 身份验证功能。实现 OTP 身份验证可以有效地防止恶意用户通过暴力破解等方式进行尝试登录，提高应用程序的安全性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6593b147eb4cecbf2d85841d

在 Express.js 应用程序中实现 OTP 身份验证

OTP 身份验证原理

实现 OTP 身份验证的必要库

实现步骤

总结

纠错反馈