如何在 React.js 中通过人脸识别对用户进行身份验证?

您将在本教程中学到什么

      在本教程中，我们将讨论可用于对用户进行身份验证的不同身份验证技术。其中包括电子邮件密码身份验证、电话身份验证、OAuth、无密码魔术链接以及最后的面部身份验证。

      在本文中，我们的主要重点是通过人脸识别技术进行身份验证。

      我们还将构建一个项目，教您如何将基于面部识别的身份验证集成到您的 React Web 应用程序中。

      在这个项目中，我们将使用 FaceIO SaaS（软件即服务）平台来集成基于面部识别的身份验证。因此，请确保您设置了一个免费的FaceIO 帐户以跟进。

      最后，我们将看看用户隐私方面，并讨论人脸识别如何不损害您的隐私。我们还将讨论它是否是未来开发人员的可靠选择。

      本文包含信息、实践项目和讨论。喝杯咖啡和一片披萨，让我们开始吧。

       该项目的最终版本如下所示。看起来很有趣？那我们就做吧。

不同类型的用户认证系统

      现在有许多用户身份验证系统可供您选择在您的网站中实施。没有真正的高级或低级身份验证技术。所有这些身份验证系统都依赖于使用正确的工具来完成工作。

      例如，如果您正在制作一个简单的登录页面来收集用户的电子邮件，则无需使用 OAuth。但是如果你正在构建一个社交平台，那么使用 OAuth 比传统的身份验证更有意义。您可以直接从 OAuth 中提取用户的详细信息和个人资料图像。

      如果您的 Web 应用程序是围绕任何与投资相关的内容或具有法律约束力的服务构建的，那么使用电话身份验证更有意义。用户可以创建无限的电子邮件帐户，但他们只能使用有限的电话号码。

让我们看一下一些流行的身份验证系统，以便我们了解它们的优缺点。

基于电子邮件密码的身份验证

      基于电子邮件密码的身份验证是验证用户的最古老技术。该实现也非常简单易用。

      该系统的优点是您不需要第三方帐户即可登录。如果您有电子邮件，无论是自托管还是来自服务（如 Gmail、Outlook 等），您很好。

      该系统的主要缺点是您需要记住所有密码。随着网站数量的不断增长，我们需要登录大多数网站才能访问我们的个人资料，记住每个网站的密码对我们人类来说是一项艰巨的任务。

      想出一个独特而强大的密码也是一项艰巨的任务。我们的大脑通常无法记住许多随机的字母和数字字符串。这是基于电子邮件密码的身份验证系统的最大缺点。

电话认证

      电话身份验证通常是一种非常可靠的身份验证技术来验证用户的身份。由于用户通常没有多个电话号码，因此这可能最适合用户身份非常重要的资产相关网站。

      但是这个系统的缺点是如果人们不信任你，他们不想透露他们的电话号码。电话号码比电子邮件更私人化。

      电话身份验证的另一个重要因素是其成本。与电子邮件相比，使用 OTP 向用户发送短信的成本很高。因此，网站所有者和开发人员通常更喜欢坚持使用电子邮件身份验证。

基于 OAuth 的身份验证

      与前两种相比，OAuth 是一种相对较新的技术。在这种技术中，OAuth 代表用户提供用户身份验证和有用信息。

      例如，如果用户拥有 Google 帐户（例如），他们可以直接使用他们的 Google 帐户登录其他网站。该网站从 Google 本身获取用户详细信息。这意味着无需创建多个帐户并记住这些帐户的每个密码。

      该系统的主要缺点是您作为开发人员必须信任 OAuth 提供者，并且许多人出于隐私原因不想链接他们的所有帐户。因此，在大多数网站上，除了 OAuth 之外，您经常会看到电子邮件密码字段。

魔术链接认证

      魔术链接解决了您在基于电子邮件密码的身份验证中遇到的大部分问题。在这里，您只需提供您的密码，您将收到一封带有身份验证链接的电子邮件。然后你必须在浏览器中打开这个链接，你就完成了。无需记住任何密码。

     这些天来，这种类型的身份验证已经流行起来。它为用户节省了大量时间，而且价格也很便宜。而且您不必像 OAuth 那样信任第 3 方。

人脸识别认证

      面部识别是最新的身份验证技术之一，如今许多开发人员都在采用它。面部识别减少了输入您的电子邮件密码或任何其他用户凭据以登录 Web 应用程序的麻烦。

      最重要的是这个认证系统速度很快，不需要任何特殊的硬件。您只需要一个网络摄像头，现在几乎所有设备都有。

      面部识别技术使用人工智能绘制出用户独特的面部细节并将其存储为哈希（一些随机数和无意义的文本），以减少与隐私相关的问题。

      从头开始构建和部署基于人工智能的人脸识别模型并不容易，而且对于独立开发者和小型初创公司来说成本非常高。因此，您可以使用 SaaS 平台为您完成所有这些繁重的工作。FaceIO 和 AWS 识别是您可以在项目中使用的此类服务的示例。

      在这个动手项目中，我们将使用 FaceIO API 通过 React Web 应用程序中的面部识别来验证用户。FaceIO 为您提供了一种将身份验证系统与其fio.jsJavaScript 库集成的简单方法。

项目设置

      在开始之前，请确保创建一个 FaceIO 帐户并创建一个新项目。保存 FaceIO 项目的公共 ID。我们稍后在项目中需要此 ID。

      为了制作一个 React.js 项目，我们将使用 Vite。要启动 Vite 项目，请导航到所需的文件夹并执行以下命令：

      然后按照说明使用 Vite 创建一个 React 应用程序。在文件夹内导航并运行npm insall以安装项目的所有依赖项。

      完成所有这些步骤后，您的项目结构应如下所示：

如何将 FaceIO 集成到我们的 React 项目中

      要将 FaceIO 集成到我们的项目中，我们需要在index.html文件中添加他们的 CDN。打开index.html文件，在组件前添加 faceIO CDN root。

      现在从文件中删除所有代码App.jsx以从头开始。我尽量减少了本教程。所以我只在 UI 中添加了一个标题和两个按钮来演示 FaceIO 面部认证过程是如何工作的。

      在这里，一个按钮用作登录按钮，另一个用作登录按钮。

      文件内的代码App.jsx如下所示：

如何使用 FaceIO 注册用户的面部

      使用 FaceIO 非常快速和简单。当我们使用这个fio.js库时，我们只需要执行一个辅助函数来验证一个用户。这个fio.js库将为我们完成大部分工作。

      useEffect为了注册一个用户，我们在一个钩子中初始化我们的 FaceIO 对象。否则，每次状态更改时，它都会重新运行组件并重新初始化faceIO对象。

      您的 FaceIO 公共 ID 位于您的 FaceIO 控制台上。复制公共 ID 并将其粘贴到此处以初始化您的 FaceIO 对象。

      现在，定义一个名为handleSignIn(). 该函数包含我们的用户注册逻辑。

      在函数内部调用对象的enroll方法faceIO。此enroll方法等效于标准密码支持的注册系统中的注册功能，并接受一个payload参数。您可以将任何特定于用户的信息（例如他们的姓名或电子邮件地址）添加到此有效负载。

      此有效负载信息将与面部身份验证数据一起存储以供将来参考。要了解其他可选参数，请查看他们的API 文档。

      在我们的登录中button，在用户单击时我们调用此handleSignIn()函数。用户登录的代码片段如下所示：

郑重声明：本文版权归原作者所有，转载文章仅为传播信息之目的，不构成任何投资建议，如有侵权行为，请第一时间联络我们修改或删除，多谢。