使用镜像构建 MFA 用户认证系统（注册组件代码）

大多数交互式互联网应用程序要求用户首先“注册”才能使用该应用程序，然后进一步要求用户在每次他们希望使用该应用程序时“登录”。这个首先注册用户然后识别该用户以允许他们访问的过程可以被描述为用户身份验证。本文重点介绍我们的Authur用户认证系统的注册组件中使用的代码和流程。

我们的演示登录门户允许用户访问名为 Storybook 的网络漫画书构建器应用程序，但门户本身可用于需要身份验证才能使用网络应用程序的许多情况。

登录门户代码存储库

我们在下面描述的代码库在 GitHub 上作为公共存储库提供，网址为https://github.com/Bob-Wright/Authur-User-Registration-System 。随时欢迎评论、批评和建议！

登录门户

构建器应用程序从构建器自己创建的漫画书库启动，应用程序的第一页是接下来的两个屏幕截图中显示的登录门户登录页面。此页面由 Storybook 文件夹中的Portal.php提供。

我们的主对话框中列出了四个登录选项选项，以及一个基本解释弹出模式，描述了通过“登录选项解释”按钮可用的每个登录选项。

登录对话框中还包含一个“更改密码”选项，此处包含该选项，因为用户想要更改其密码的常见原因是他们可以登录。

对话框中的最后一项是注册按钮邀请以用户身份注册。

报名

选择此注册按钮将启动signup.php程序，我们将看到以下三个屏幕截图中的对话框。此对话框请求将用于创建用户配置文件数据库条目的用户数据信息

除了获取用户名和电子邮件地址信息外，对话框还要求输入密码，并且按照传统，我们要求大小写字母数字字符以及至少一个符号字符的组合。要求这些字符参数的目的显然是使密码更难猜。效果如何尚无定论。

除了用户名、电子邮件和密码条目之外，该对话框还收集有关每个用户的某些数据项。这些项目名义上不包含个人身份数据，而是设计为提供一个简短的二进制（是/否）因素列表，我们稍后可能会在验证过程中使用这些因素。例如，我们可能会问一个特定的用户“你会游泳吗？”作为识别它们的一个因素。

提供这些数据项后，我们可以单击屏幕底部的“注册”按钮继续操作。这将导致以下屏幕显示，通知我们已向用户发送确认电子邮件。

接下来显示的电子邮件随后将发送到新用户的电子邮件地址以进行验证。

上述所有注册活动有效地将用户注册到一个完整的功能电子邮件/密码令牌交换登录系统，该系统支持我们初始门户对话框中显示的前三种登录方法（用户名/密码、Magic Link 和一次性密码）。

GateKeeper 图像选择

但是，随着我们继续为用户注册生成基于图像的 MFA 登录令牌，代码从这里变得更加有趣。单击电子邮件中的“验证我的电子邮件”按钮将导致下一个浏览器屏幕由位于Storybook/Portal文件夹中的GateKeeper.php程序打开。 GateKeeper程序网页首先通知用户他们的电子邮件已成功验证，并通过请求用户从图像库中选择“看门人”头像图像继续。

GitHub 上的代码存储库中包含一个名为dumpSessionZ.php （或dumpSession.php ，如果您不使用存储库中包含的Zebra session2DB 会话数据库管理器）的实用程序开发程序，它将允许定期显示PHP $_SESSION程序执行时的变量。接下来的这些图像是我们在上面看到的 GateKeeper.php 程序页面上运行 dumpSession 的结果，它描述了正在执行的 PHP 程序的活动，允许我们“跟随”。

GateKeeper 功能的主要方面涉及操作几个图像文件数组，然后我们使用这些图像文件来填充屏幕选择库。这些阴谋的目的是在每次页面加载时随机重新排列画廊图像的显示顺序。如果您查看GateKeeper.php代码，您会注意到我们在代码的顶部插入了一个异常陷阱，用于选择要显示的图像，以便我们可以指定在图库中包含特定的用户图像。这让我们可以确定这张图片可以被选为陷阱异常用户的看门人头像。这有两个后果。

首先，它允许我在演示演练中特别包含我自己的个人照片☺ 。其次，它提供了一个方便的位置来插入垫片，该垫片可用于向任何指定用户提供特定图像。

然而，让我们继续假设我们的用户单击了在上面的 GateKeeper 屏幕中选择的头像图像。这将显示接下来显示的第一个面部照片信息页面。此页面的图像是由Storybook/Portal/mugshotChoice.php程序从Storybook/Portal/ckimages文件夹加载的JPEG图像。

这也导致向 PHP $_SESSION 数据数组添加更多值，我们可以通过刷新dumpSession显示来检查这些值。特别值得注意的是来自用户数据库的信息，包括用户电子邮件地址、名字和姓氏以及接下来显示的因素值。

如果我们单击 Gatekeeper 图像以继续我们的用户注册，则此操作会导致mugshotChoice.php向我们的Node PGP API 服务器发出表单 POST 请求。 Node 终端将显示以下屏幕，因为它为此用户生成并保存 PGP 密钥对，然后等待下一个 API 请求。

当 API 完成密钥生成后，它将密钥保存在数据库中，并通过 PGP API 完成通知电子邮件将用户返回到主应用程序 接下来显示的网页显示包括加载Storybook/Portal/showMugshotChoice.php的方向。已安装的 Node API 服务的代码包含在Authur/openPGP文件夹中的本文 repo 中，并且在本文中有更多关于 API 代码本身的信息 ( https://medium.com/@itzbobwright/some-openpgp- crypto-functions-on-a-node-api-server ）及其相关的 GitHub 存储库。

此设置允许使用与登录应用程序分离的域上的 API，并允许使用openPGPjs NodeJS存储库，您可以在https://github.com/Bob上的此 GitHub 存储库中找到它作为分支-赖特/openpgpjs 。

让我们考虑一下我们可能会利用的这种分离的几个方面。我们可以让我们的 PGP 节点服务器 API 在与登录门户相同的服务器上运行。另一个考虑因素是通过私有 IP 或类似的隔离方案将 PKC 节点服务器连接到登录应用程序服务器。可以使用服务器 IP 地址，而不是 Internet DNS 系统。

但是为了继续讨论本方案，用户将按照指示单击图像以加载showMugshotChoice.php ，结果显示以下页面。

如果我们在此页面上执行dumpSession刷新，我们可以看到附加到 PHP $_SESSION 数组变量的另外四个数据值，如下所示。该数组现在包含一个 PGP 样式公钥的值，它与[plaintext]的 $_SESSION 数组密钥值以及[coverImage] 、 [stegoImge]和[secretKey]密钥的其他三个值一起存储。 [plaintext]值，即PGP PUBLIC KEY BLOCK ，是从之前由我们的 Node PGP API 编写的密钥数据库中检索的。

showMugshotChoice.php程序使用这些值来生成上面屏幕中显示的图像，并且该图像现在实际上是一个新保存的PNG格式图像，它已被隐写编码以加密嵌入 PGP PUBLIC KEY BLOCK 值。

此时，我们已使用登录门户的注册或注册部分来创建和保存我们目前在Authur-An-Image-Based-MFA-User-Authentication-System中使用的所有信息。如果我们的用户现在按照指示单击图像，他们将返回到一个新的登录门户页面，其中包含一个新的已清除 $_SESSION 数组，如下面的两个屏幕所示，他们可以继续登录 Storybook Comic Book Builder。

在我们单击第二张照片信息图像之前，当我们的 $_SESSION 数组仍然加载时，我们可以将注意力转移到使用演示设置中也包含的另一个程序上。如果我们浏览到Storybook/Portal/decodeStego.php页面，我们将在下面看到这个屏幕，它显示了该用户的隐写嵌入和加密编码的公钥块的概念证明提取。

作为总结，这些下一个图像是上面页面的完整 dumpSession 捕获。

结论

这完成了我们对基于 Authur 图像的 MFA 用户身份验证系统的注册或注册组件中使用的代码的检查。我们将考虑的代码的下一部分也是最后一部分是Login组件函数，我们在其中验证新注册的用户以访问我们托管的Storybook应用程序。请继续关注这篇文章，希望很快就会到来。

对于我们的用户身份验证系统的下一次迭代，目的是添加两个设施。第一个工具是包含一种以编程方式使用我们生成的隐写图像来铸造或创建 NFT 图像以用作我们的 MFA 令牌图像的方法。这里的一个重要考虑因素是成本，对于演示，铸币必须没有汽油费。第二个工具将允许用户上传他们自己的看门人头像图像，例如员工数据库提供的图像，然后我们可以将其转换为我们的隐写 NFT 格式。

让我向所有为这项工作做出贡献的仁慈的编码人员提供一些当之无愧的呐喊和支持。最后感谢上帝和我的家人给予我最优秀的支持！！

也在这里发布。