otplib实现的系统的多因素身份验证

最近工作中需要实现系统的双因素身份验证，借此总结一下我的实现方式和思路

何为多因素身份验证

在当今数字化的世界中，随着网络安全威胁的增加，仅仅依赖用户名和密码已经不再足够保护您的账户安全。为了提高账户的安全性，许多网站和服务提供商已经引入了多因素身份验证（MFA）作为一种额外的安全层。那么，多因素身份验证到底是什么呢？

多因素身份验证是一种安全措施，要求用户在登录时提供多个不同类型的身份验证因素。通常，这些因素包括三个主要类别：知识因素（例如密码或PIN码），拥有因素（例如手机或硬件令牌）以及生物特征因素（例如指纹或面部识别）。用户需要提供至少两个不同类型的因素来验证其身份，以获得访问权限。

多因素身份验证的优势是显而易见的。即使有人猜测或窃取了您的密码，他们也无法轻易获取您的其他身份验证因素。这种额外的层次使得攻击者更难以入侵您的账户，提供了更高的安全性和保护。

许多网站和服务提供商都支持多因素身份验证，并提供各种选项来满足用户的需求。常见的多因素身份验证方法包括短信验证码、移动应用程序生成的一次性密码、硬件安全密钥等。用户只需按照提供商的指示进行设置和配置，即可启用多因素身份验证。

实现双因素登录的方式

现在的实现方式是密码+一次性验证码

实现方式使用开源的otplib，免费开源

otplib是一个JavaScript一次性密码（OTP）库

第一步：

引入js，可以使用在线地址，也可以下载到本地

    <script src="https://unpkg.com/@otplib/preset-browser@^12.0.0/buffer.js"></script>
    <script src="https://unpkg.com/@otplib/preset-browser@^12.0.0/index.js"></script>

第二步：生成 密码的Key，可以是密码+其它标识的base64编码

        // 生成 密码的Key
        const secret = 'KVKFKRCPNZQUYMLXOVYDSQKJKZDTSRLD';

        var authenticator = window.otplib.authenticator;

        const token = window.otplib.authenticator.generate(secret);

最终效果：

本地

 

otplib开源地址：https://otplib.yeojz.dev/