网站上的无密码面部认证！ （法塞奥）

什么是 FaceIO，为什么使用它？ ？

FaceIO 是一项允许网站和应用程序使用网络摄像头通过面部识别人员的服务。

用户无需输入密码或使用指纹，只需看着摄像头，应用程序就可以确认他们是谁。

这很有帮助，因为：

• ⚡ 比输入密码更快。
• ？它更安全，因为只有拥有该面孔的人才能访问该应用程序。
• ？用户无需记住复杂的密码。

FaceIO 的工作原理是什么？

FaceIO 有两个主要操作：

1. ⛳ 注册用户：表示第一次录制用户的脸部。
2. ？验证用户：这意味着检查镜头前的人是否与之前注册的人相同。

在网页中设置 FaceIO ？️

要使用 FaceIO，您需要将他们的 JavaScript 库（执行面部检测的特殊代码）添加到您的网站。操作方法如下：

1。包含脚本:
在 HTML 文件中添加指向 FaceIO 库的脚本标签：

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

？此脚本允许您的网站使用 FaceIO 的功能。

2。创建用于注册和身份验证的按钮:
在 HTML 中，添加两个按钮：

   <button onclick="enrollNewUser()">Enroll New User</button>
   <button onclick="authenticateUser()">Authenticate User</button>

？当用户单击这些按钮时，他们将注册（保存他们的面部）或进行身份验证（检查他们的面部）。

注册用户？

保存新用户脸部的过程称为注册。这是它的 JavaScript 代码：

function enrollNewUser() {
    const faceio = new faceIO("app-public-id"); // Replace with your app's ID

    faceio.enroll({
        locale: "en", // This sets the language to English
        payload: {
            email: "user@example.com" // Link this user's email or any other unique ID
        }
    }).then(userInfo => {
        console.log("User enrolled successfully!");
        console.log("User ID: " + userInfo.facialId);
        console.log("Enrollment Date: " + userInfo.timestamp);
        alert("Enrollment successful! Welcome, user.");
    }).catch(err => {
        handleError(err);
    });
}

？‍♂️ 这段代码有什么作用？

• 它从 FaceIO 调用 enroll() 函数来启动该过程。
• locale 表示用户喜欢的语言。
• 有效负载是有关用户的额外信息（例如他们的电子邮件或ID）。
• 如果成功，会显示一条消息“注册成功！”并记录用户 ID 和日期等详细信息。
• 如果不起作用，它会调用handleError()函数来检查出了什么问题。

验证用户身份？

这是检查用户是否是他们所声称的人脸的方法：

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

？‍♂️ 这段代码有什么作用？

• 它使用 FaceIO 中的authenticate() 方法。
• 如果成功，它会记录一条消息并欢迎用户回来。
• 如果没有，它会调用handleError()来了解问题。

要在 FaceIO 中获取 API 密钥（也称为 **应用程序公共 ID），请按照以下简单步骤操作：**

1. 注册 FaceIO:

   • 如果您还没有帐户，请访问 FaceIO 网站并注册一个帐户。
   • 使用您的新帐户登录。

2. 创建新应用程序：

   • 登录后，转到仪表板。
   • 点击“创建新应用程序”。
   • 填写所需的详细信息，例如您的应用名称和描述，然后单击“创建”。

1. 查找应用公共 ID:

   • 创建应用程序后，您将看到它列在仪表板上的“应用程序”部分。
   • 在这里，您将找到您的应用公共 ID。这是您将在 JavaScript 代码中使用的 API 密钥，用于将您的网站与 FaceIO 连接。

2. 复制应用公共 ID:

   • 点击应用公共ID旁边的复制图标进行复制。
   • 现在，您可以将此密钥粘贴到代码中显示“app-public-id”的位置。

示例：将 JavaScript 代码中的“app-public-id”替换为您的实际应用公共 ID：

   <button onclick="enrollNewUser()">Enroll New User</button>
   <button onclick="authenticateUser()">Authenticate User</button>

现在，您的应用程序已连接到 FaceIO，并准备好使用面部识别功能！

在开始之前，让我向您展示如何在实时服务器上运行 FaceIO。

在实时服务器上运行：

• FaceIO 要求 JavaScript 文件由实时 HTTP 服务器提供，而不是来自 file:// URL（本地文件）。
• 确保您正在服务器上运行 HTML 文件。您可以使用 VS Code 的 Live Server 扩展或 Node.js 等工具。

首先，在计算机中安装node.js，然后在FaceIO项目中安装以下包：

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

然后通过以下命令使用它：

   <button onclick="enrollNewUser()">Enroll New User</button>
   <button onclick="authenticateUser()">Authenticate User</button>

这是您的 vscode 终端中的实时服务器链接：

处理错误？

并不是所有事情都一直顺利，所以我们需要在错误发生时进行处理。这是一个执行此操作的函数：

function enrollNewUser() {
    const faceio = new faceIO("app-public-id"); // Replace with your app's ID

    faceio.enroll({
        locale: "en", // This sets the language to English
        payload: {
            email: "user@example.com" // Link this user's email or any other unique ID
        }
    }).then(userInfo => {
        console.log("User enrolled successfully!");
        console.log("User ID: " + userInfo.facialId);
        console.log("Enrollment Date: " + userInfo.timestamp);
        alert("Enrollment successful! Welcome, user.");
    }).catch(err => {
        handleError(err);
    });
}

？‍♂️ 这段代码有什么作用？

• 它需要一个错误代码并将其与特定消息相匹配。
• 例如，如果用户不允许访问相机，它会告诉他们需要启用它。
• 每个错误案例都可以帮助用户了解出了什么问题以及下一步该做什么。

为什么 FaceIO 需要 HTTP 服务器？ ？

您可能想知道为什么此代码需要在服务器上运行，而不是仅仅在浏览器中将其作为常规文件打开。原因如下：

1. ?‍? JavaScript 和安全性:

   • JavaScript 代码在您的浏览器（客户端）中运行。但出于安全原因，它无法直接与非其来源的服务器通信。
   • 这称为同源策略。它可以保护您的数据安全，防止您未打开的网站访问。

2. ？️ FaceIO 需要与其服务器对话：

   • 当您注册或验证人脸时，FaceIO 库会将信息发送到其服务器以比较或保存数据。
   • 为了安全地执行此操作，它必须来自正确的网址（例如 http://yourwebsite.com），而不仅仅是计算机上的本地文件。

使用 FaceIO 控制台管理您的应用程序？

FaceIO 提供基于网络的应用程序管理器。这就像一个仪表板，您可以在其中控制应用程序的所有内容：

• ？用户管理：添加、编辑或删除用户。
• ？群组管理：将用户分组，以便更好地管理。
• ？权限管理：决定谁可以在您的应用程序中执行哪些操作。
• ？监控分析：检查有多少用户正在使用您的应用程序以及他们如何与之交互。
• ？安全功能：使用多重身份验证等功能使您的应用程序更安全。

要点回顾♻️

1. FaceIO 帮助网站使用面部识别来识别用户，使登录更快、更安全。
2. 要使用 FaceIO，您需要包含其 JavaScript 库、创建按钮并设置用于注册和验证用户的功能。
3. 错误处理对于在出现问题时指导用户非常重要。
4. 需要HTTP 服务器来绕过浏览器安全规则并与 FaceIO 的服务器正常通信。
5. 应用程序管理器可帮助您控制用户、设置和安全性。

按照以下步骤，您可以制作一个网站，用户只需查看网络摄像头即可登录！您正在将您的网站变成一个未来派应用程序，可以识别面孔，并使其更加用户友好和安全，以吸引您的面试官或客户！

---

希望这个解释对您有所帮助！它涵盖了从 FaceIO 的工作原理到设置和管理的所有内容。如果您还有任何疑问，请告诉我！

阅读更多： 6 个月内成为后端开发人员的技能（路线图）

以上是网站上的无密码面部认证！ （法塞奥）的详细内容。更多信息请关注PHP中文网其他相关文章！