身份验证是 Web 应用程序的一个非常重要的方面。如果您正在向用户提供服务或销售某些产品，则应跟踪用户以供将来参考。所有这一切只有在您拥有身份验证系统的情况下才能实现。 但是为工作使用正确的工具也是非常必要的。过去，基于电子邮件和密码的身份验证最为流行和广泛使用。但随着时间的推移，当大型科技公司涌现并拥有庞大的用户群时，引入了一个名为 OAuth 的新概念。如果您作为站点的所有者信任 OAuth 提供者对用户进行身份验证，作为回报，OAuth 提供者会为您提供用户的详细信息。 基于 OAuth 的身份验证对用户来说很简单。他们只需在 OAuth 提供商处维护一个帐户，并使用此帐户登录所有其他网站。但 OAuth 过程中始终涉及信任。 一段时间后，无密码身份验证出现了。在此过程中，当您输入用户名或电子邮件时，他们会向您发送一个链接。如果您将链接粘贴到浏览器中，您将自动进行身份验证并登录。无密码身份验证的最常见示例是当您单击发送魔术链接以登录到 。 hackernoon.com 时 随着人工智能 (AI) 和机器学习 (ML) 的进步，面部识别技术越来越受欢迎。随着时间的推移，随着数据集变得越来越大，人工智能模型的准确性也会提高。如今，我们还可以使用面部识别技术在我们的 Web 应用程序中对用户进行身份验证。 在本文中，我们将构建一个简单的应用程序，以演示如何使用面部识别对用户进行身份验证。在这个过程中，我们将使用 FaceIO API。 为什么我们需要基于面部识别的身份验证 面部识别的需求是多方面的。我试图以简洁的方式在这里提出一些观点。确保将文章阅读到最后，以获得完整的概念理解和详细的实现演练。 ：面部认证方法比传统的认证方式非常快。您只需单击一个按钮即可启动身份验证过程，并在一毫秒内完成。在传统的基于电子邮件密码的方法中，您必须逐行添加您的详细信息。有时成功登录后，您会收到验证码。这是多么令人恼火！ 比传统方法更快 ：面部认证技术的唯一要求是相机。现在所有的智能手机都默认有摄像头。所有台式机也都有某种网络摄像头。因此，用户不需要任何专门的硬件来使用这项服务。 不需要专门的硬件 ：面部认证最重要的特点是可以防止冒名顶替。在社交平台上，许多人通过冒充他人来创建虚假账户。如果假账户持有人犯下某种类型的数字犯罪，这可能会非常危险。在面部识别的帮助下，社交平台可以识别某人试图访问的帐户是否真的属于他们。 减少社交平台上的冒名顶替 ：引入机器人和自动化脚本来帮助人们摆脱重复性任务。但人们也以不同的方式使用它们向他人发送垃圾邮件。每天，您都会在数字生活中遇到许多您甚至没有注意到或意识到的机器人和自动化脚本。为了防止这种情况，一些网站使用验证码。使用面部识别，这个问题也可以解决，因为机器人没有面部进行身份验证😄。 减少机器人和自动化脚本 ：隐私对我们所有人来说都是一个非常敏感的话题。当有人要求您使用您的面部数据进行身份验证时，我们都会有点担心。但由于我们在本教程中使用 FaceIO，身份验证过程是纯粹的端到端加密。在后端，它们仅存储您面部特征的哈希值。它们完全符合 GDPR 和 CCPA。因此，您可以信任他们安全地存储您的数据。 以隐私为中心 做一个人脸认证项目 现在我们将制作一个面部认证 Web 应用程序。这个项目包括所有的点点滴滴，以及所有你需要知道的关于如何在你的 web 应用程序中实现基于人脸识别的身份验证。 我正在一步一步地解释这个过程。您可以 获得完整的源代码。确保获得免费的 以进行后续操作。 在此处 API 密钥 安装所需的依赖项 创建一个空白目录并在其中创建一个 文件。您也可以添加一个单独的 CSS 文件，但为了简单起见，我将其保持在最低限度。 index.html 如果您使用 VSCode 进行开发，则可以使用实时服务器来提供静态文件。 在您的 中，首先添加这个基本的 HTML 标记。 index.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> 现在，创建一个文件 并将文件链接到 FaceIO CDN 之后的 body 标签内。 index.js   <body> <script src="https://cdn.faceio.net/fio.js"></script> <script src="./index.js"></script> </body> 现在让我们创建 2 个辅助函数来简化我们的开发过程。一种用于注册用户（如注册功能），另一种用于身份验证（如登录功能）。 注册用户 由于 FaceIO 提供的 javascript 库，注册用户非常简单。在 HTML 标记中添加一个带有 的按钮。我们使用 方法访问我们的 javascript 文件中的这个按钮。 id="enroll" getElementbyID 现在在 中初始化 FaceIO 对象。您必须添加 FaceIO 项目的公共 ID。您可以获得项目仪表板中列出的公共 ID。 index.js   const faceio = new faceIO("<Your Public ID here"); 让我们在注册按钮中添加一个事件监听器。当有人点击按钮时，我们执行 faceIO 对象的注册方法。此注册方法采用各种可选参数。   是用户的本地语言。 locale   对应于等待用户授予摄像头访问权限的秒数。 permissions timeout   是等待用户接受 FaceIO 条款和条件的秒数。 termsTimeout   是尝试识别人脸时等待的总秒数。 idleTimeout   是等待从 FaceIO 节点接收处理过的面部数据的秒数。 replyTimeout   是一个布尔值，表示用户是否同意扫描他们的脸。如果您已经征得用户的同意，则可以将该值设置为  。 userConcent true    ：在注册函数中，您可以添加您选择的有效负载。有效载荷应该是一个键值对象。您可以使用此有效负载功能附加您的电子邮件地址或与用户相关的任何其他信息。 payload 在我们的例子中，注册函数看起来像这样。   enroll.addEventListener("click", async () => { let response = await faceio.enroll({ locale: "auto", payload: { email: "example@gmail.com", 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 会向用户返回一个 对象。该对象包含一个用户面部 ID，它是一个通用唯一标识符、性别和年龄。性别和年龄不是很准确，因为它们是由人工智能模型预测的。 userInfo 您可以使用将此 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 拥有强大的隐私保护系统。让我列出其中的一些。  ：FaceIO 服务完全符合 GDPR 和 CCPA。 GDPR 代表通用数据保护条例。它于 2018 年通过，要求所有企业保护用户的个人数据和隐私。 它符合 GDPR 和 CCPA  CCPA 代表加州消费者保护法，让用户可以更好地控制他们的数据。如果您在这些地区开展业务，则不必担心。 仅存储哈希值：FaceIO 仅存储您面部特征的哈希值。它不存储任何纯数据，并尽可能少地存储信息。客户端库和小部件不处理任何生物特征数据。所有过程都在后端完成。 它 常问问题 FaceIO 浏览器是否与浏览器无关？  FaceIO 完全与浏览器无关。它可以运行任何浏览器，包括 chrome、firefox 和 safari。由于所有处理都在服务器上完成，FaceIO 只需要您的相机访问权限即可运行。 如果您通过禁用 javascript 来使用某些隐私浏览器，请确保启用它们。由于 FaceIO 需要使用 javascript 与服务器对话。 我们不能从头开始构建我们的模型吗？ 是的，您可以从头开始构建模型并在您的 Web 应用程序中实现面部认证功能。但是为此，您应该对人工智能和机器学习过程有深入的了解。 由于大多数 Web 开发人员都不是这种背景，因此使用其他人的服务来实现功能而不是重新发明轮子是明智之举。 市场上还有其他解决方案可供您探索。一种是 AWS Rekognition。该服务由 AWS 提供，工作方式与 FaceIO 非常相似。有趣的是，您可以在 FaceIO 控制面板中选择 AWS Rekognition。 对的，这是可能的。你现在可以选择你想要的，然后去做。 隐藏公共 ID 正如我们在编码部分中看到的，您必须在启动 FaceIO 对象期间提供您的公共 ID。如果需要，可以使用环境变量将其隐藏。如果您使用的是前端框架或构建系统，则可以在构建时动态添加这些值。 如果您使用 NextJS，您可以使用 文件来保存您的敏感凭据。 .env.local 如果你不使用任何框架，你可以使用 Vite。 Vite 支持环境变量。它构建和压缩您的 vanilla js 项目以加快部署速度。只需创建一个 文件，将所有凭据放在那里，就完成了。不要忘记将 文件放入 列表中。 .env .env .gitignore 结论 如果你读到这篇文章，我想你喜欢这篇文章。请与您的同行分享。如果您想提供任何反馈，我可以在 Twitter 上以 的身份联系到我。继续阅读，继续学习。 hrishikshpathak

Flow

Twitter

Checkout my personal blog site for more articles

Writer

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

Telegram：加密岛通往大陆的桥梁

创建以用户为中心的加密产品：客户反馈的重要性

从论坛到信息流：社交媒体算法如何塑造数字互动

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

Telegram：加密岛通往大陆的桥梁

创建以用户为中心的加密产品：客户反馈的重要性

从论坛到信息流：社交媒体算法如何塑造数字互动

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps