30,045 讀數

如何在 Web 应用程序中通过人脸识别对用户进行身份验证

经过 Hrishikesh Pathak10m2022/07/22

太長; 讀書

面部身份验证是 Web 应用程序的一个非常重要的方面。我们正在构建一个简单的应用程序，以演示如何使用面部识别对用户进行身份验证。面部识别比传统的身份验证方式更快。面部认证最重要的特点是它可以防止在社交平台上冒充，许多人通过冒充某人来创建虚假账户。面部认证技术的唯一要求是默认使用摄像头，唯一的要求是使用摄像头。这个项目包括所有的点点滴滴，所有的部分和你需要知道的关于这个项目的一切。

Companies Mentioned

Coin Mentioned

featured image - 如何在 Web 应用程序中通过人脸识别对用户进行身份验证

身份验证是 Web 应用程序的一个非常重要的方面。如果您正在向用户提供服务或销售某些产品，则应跟踪用户以供将来参考。所有这一切只有在您拥有身份验证系统的情况下才能实现。

但是为工作使用正确的工具也是非常必要的。过去，基于电子邮件和密码的身份验证最为流行和广泛使用。但随着时间的推移，当大型科技公司涌现并拥有庞大的用户群时，引入了一个名为 OAuth 的新概念。如果您作为站点的所有者信任 OAuth 提供者对用户进行身份验证，作为回报，OAuth 提供者会为您提供用户的详细信息。

基于 OAuth 的身份验证对用户来说很简单。他们只需在 OAuth 提供商处维护一个帐户，并使用此帐户登录所有其他网站。但 OAuth 过程中始终涉及信任。

一段时间后，无密码身份验证出现了。在此过程中，当您输入用户名或电子邮件时，他们会向您发送一个链接。如果您将链接粘贴到浏览器中，您将自动进行身份验证并登录。无密码身份验证的最常见示例是当您单击发送魔术链接以登录到hackernoon.com 时。

随着人工智能 (AI) 和机器学习 (ML) 的进步，面部识别技术越来越受欢迎。随着时间的推移，随着数据集变得越来越大，人工智能模型的准确性也会提高。如今，我们还可以使用面部识别技术在我们的 Web 应用程序中对用户进行身份验证。

在本文中，我们将构建一个简单的应用程序，以演示如何使用面部识别对用户进行身份验证。在这个过程中，我们将使用 FaceIO API。

为什么我们需要基于面部识别的身份验证

面部识别的需求是多方面的。我试图以简洁的方式在这里提出一些观点。确保将文章阅读到最后，以获得完整的概念理解和详细的实现演练。

比传统方法更快：面部认证方法比传统的认证方式非常快。您只需单击一个按钮即可启动身份验证过程，并在一毫秒内完成。在传统的基于电子邮件密码的方法中，您必须逐行添加您的详细信息。有时成功登录后，您会收到验证码。这是多么令人恼火！
不需要专门的硬件：面部认证技术的唯一要求是相机。现在所有的智能手机都默认有摄像头。所有台式机也都有某种网络摄像头。因此，用户不需要任何专门的硬件来使用这项服务。
减少社交平台上的冒名顶替：面部认证最重要的特点是可以防止冒名顶替。在社交平台上，许多人通过冒充他人来创建虚假账户。如果假账户持有人犯下某种类型的数字犯罪，这可能会非常危险。在面部识别的帮助下，社交平台可以识别某人试图访问的帐户是否真的属于他们。
减少机器人和自动化脚本：引入机器人和自动化脚本来帮助人们摆脱重复性任务。但人们也以不同的方式使用它们向他人发送垃圾邮件。每天，您都会在数字生活中遇到许多您甚至没有注意到或意识到的机器人和自动化脚本。为了防止这种情况，一些网站使用验证码。使用面部识别，这个问题也可以解决，因为机器人没有面部进行身份验证😄。
以隐私为中心：隐私对我们所有人来说都是一个非常敏感的话题。当有人要求您使用您的面部数据进行身份验证时，我们都会有点担心。但由于我们在本教程中使用 FaceIO，身份验证过程是纯粹的端到端加密。在后端，它们仅存储您面部特征的哈希值。它们完全符合 GDPR 和 CCPA。因此，您可以信任他们安全地存储您的数据。

做一个人脸认证项目

现在我们将制作一个面部认证 Web 应用程序。这个项目包括所有的点点滴滴，以及所有你需要知道的关于如何在你的 web 应用程序中实现基于人脸识别的身份验证。

我正在一步一步地解释这个过程。您可以在此处获得完整的源代码。确保获得免费的API 密钥以进行后续操作。

安装所需的依赖项

创建一个空白目录并在其中创建一个index.html文件。您也可以添加一个单独的 CSS 文件，但为了简单起见，我将其保持在最低限度。

如果您使用 VSCode 进行开发，则可以使用实时服务器来提供静态文件。

在您的index.html中，首先添加这个基本的 HTML 标记。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html>

FaceIO 提供了一个非常方便的 JavaScript 库来与他们的 AI 模型进行交互。这让我们的生活变得更加轻松，我们只需几行代码就可以实现面部识别功能。要添加 FaceIO javascript 库，我们在 HTML 文档的 body 标记中使用它们的 CDN（内容交付网络）。

 <body> <script src="https://cdn.faceio.net/fio.js"></script> </body>

现在，创建一个文件index.js并将文件链接到 FaceIO CDN 之后的 body 标签内。

 <body> <script src="https://cdn.faceio.net/fio.js"></script> <script src="./index.js"></script> </body>

现在让我们创建 2 个辅助函数来简化我们的开发过程。一种用于注册用户（如注册功能），另一种用于身份验证（如登录功能）。

注册用户

由于 FaceIO 提供的 javascript 库，注册用户非常简单。在 HTML 标记中添加一个带有id="enroll"的按钮。我们使用getElementbyID方法访问我们的 javascript 文件中的这个按钮。

现在在index.js中初始化 FaceIO 对象。您必须添加 FaceIO 项目的公共 ID。您可以获得项目仪表板中列出的公共 ID。

 const faceio = new faceIO("<Your Public ID here");

让我们在注册按钮中添加一个事件监听器。当有人点击按钮时，我们执行 faceIO 对象的注册方法。此注册方法采用各种可选参数。

locale是用户的本地语言。
permissions timeout对应于等待用户授予摄像头访问权限的秒数。
termsTimeout是等待用户接受 FaceIO 条款和条件的秒数。
idleTimeout是尝试识别人脸时等待的总秒数。
replyTimeout是等待从 FaceIO 节点接收处理过的面部数据的秒数。
userConcent是一个布尔值，表示用户是否同意扫描他们的脸。如果您已经征得用户的同意，则可以将该值设置为true 。
payload ：在注册函数中，您可以添加您选择的有效负载。有效载荷应该是一个键值对象。您可以使用此有效负载功能附加您的电子邮件地址或与用户相关的任何其他信息。

在我们的例子中，注册函数看起来像这样。

 enroll.addEventListener("click", async () => { let response = await faceio.enroll({ locale: "auto", payload: { email: "[email protected]", pin: "12345", }, }); console.log(` Unique Facial ID: ${response.facialId} Enrollment Date: ${response.timestamp} Gender: ${response.details.gender} Age Approximation: ${response.details.age}`); });

运行此函数时，用户面前会出现一个弹出窗口。此弹出窗口包含条款和条件。如果用户接受条款和条件，它会要求访问相机。如果用户授予摄像头访问权限，FaceIO 将扫描面部。

FaceIO 模型寻找将用户与其他人区分开来的独特面部特征。完成后，您必须添加一个附加到您的面部数据的 PIN。此 PIN 对用户非常重要，并将其保存在更安全的地方。

当所有这些步骤都完成后，FaceIO 会向用户返回一个userInfo对象。该对象包含一个用户面部 ID，它是一个通用唯一标识符、性别和年龄。性别和年龄不是很准确，因为它们是由人工智能模型预测的。

您可以使用将此 faceID 存储在您的后端。当用户想要登录时，您可以匹配此 faceID 来验证用户。

在工作流程中，如果发生任何错误，FaceIO 会提供大量错误消息。如果用户不允许摄像头访问，则会引发fioErrCode.PERMISSION_REFUSED错误。

如果用户不接受条款和条件弹出窗口，则服务器会抛出fioErrCode.TERMS_NOT_ACCEPTED错误。

验证用户

要启动身份验证流程，请在您的 HTML 标记中添加一个id="authenticate"的按钮。在getElementbyID方法的帮助下访问index.js中的这个按钮。

现在，当用户按下此按钮时，我们将启动身份验证流程。认证功能非常简单。

Authenticate 函数采用permissionTimeout 、 idleTimeout 、 replyTimeout和locale参数，就像前面的enroll()函数一样。代码看起来像这样。

 authenticate.addEventListener("click", async () => { let response = await faceio.authenticate({ locale: "auto", }); console.log(` Unique Facial ID: ${response.facialId} PayLoad: ${response.payload} `); });

当用户按下认证按钮时，会弹出与注册功能类似的屏幕。它需要您的相机访问权限并扫描您的脸部。扫描后，它会询问您在注册期间输入的 PIN。

如果您提供正确的 pin，FaceIO 会返回您在注册过程中指定的 FaceData 和有效负载。

您还可以通过匹配服务器中的 faceID 来仔细检查身份验证流程。

现在我们的身份验证流程已经完成。您可以看到它比实现电子邮件密码身份验证流程更容易。所有繁重的工作都由 FaceIO 服务器及其 AI 模型完成，作为开发人员，您只需添加应用程序逻辑即可修改身份验证流程及其体验。

隐私功能

FaceIO 拥有强大的隐私保护系统。让我列出其中的一些。

它符合 GDPR 和 CCPA ：FaceIO 服务完全符合 GDPR 和 CCPA。 GDPR 代表通用数据保护条例。它于 2018 年通过，要求所有企业保护用户的个人数据和隐私。

CCPA 代表加州消费者保护法，让用户可以更好地控制他们的数据。如果您在这些地区开展业务，则不必担心。
它仅存储哈希值：FaceIO 仅存储您面部特征的哈希值。它不存储任何纯数据，并尽可能少地存储信息。客户端库和小部件不处理任何生物特征数据。所有过程都在后端完成。