网站上的无密码面部认证！（法塞奥）-js教程-PHP中文网

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

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

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

Passwordless Facial Authentication on Websites! (FACEIO)

这很有帮助，因为：

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

FaceIO 的工作原理是什么？

Passwordless Facial Authentication on Websites! (FACEIO)

FaceIO 有两个主要操作：

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

在网页中设置 FaceIO ？️

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

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

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

登录后复制

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

Passwordless Facial Authentication on Websites! (FACEIO)

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

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

登录后复制

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

Passwordless Facial Authentication on Websites! (FACEIO)

注册用户？

保存新用户脸部的过程称为注册。这是它的 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），请按照以下简单步骤操作：**

注册 FaceIO:
- 如果您还没有帐户，请访问 FaceIO 网站并注册一个帐户。
- 使用您的新帐户登录。
创建新应用程序：
- 登录后，转到仪表板。
- 点击“创建新应用程序”。
- 填写所需的详细信息，例如您的应用名称和描述，然后单击“创建”。

Passwordless Facial Authentication on Websites! (FACEIO)

查找应用公共 ID:
- 创建应用程序后，您将看到它列在仪表板上的“应用程序”部分。
- 在这里，您将找到您的应用公共 ID。这是您将在 JavaScript 代码中使用的 API 密钥，用于将您的网站与 FaceIO 连接。
复制应用公共 ID:
- 点击应用公共ID旁边的复制图标进行复制。
- 现在，您可以将此密钥粘贴到代码中显示“app-public-id”的位置。

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

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

登录后复制

Passwordless Facial Authentication on Websites! (FACEIO)

现在，您的应用程序已连接到 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>

登录后复制

Passwordless Facial Authentication on Websites! (FACEIO)

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

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

登录后复制

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

Passwordless Facial Authentication on Websites! (FACEIO)

处理错误？

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

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 服务器？？

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

?‍? JavaScript 和安全性:
- JavaScript 代码在您的浏览器（客户端）中运行。但出于安全原因，它无法直接与非其来源的服务器通信。
- 这称为同源策略。它可以保护您的数据安全，防止您未打开的网站访问。
？️ FaceIO 需要与其服务器对话：
- 当您注册或验证人脸时，FaceIO 库会将信息发送到其服务器以比较或保存数据。
- 为了安全地执行此操作，它必须来自正确的网址（例如 http://yourwebsite.com），而不仅仅是计算机上的本地文件。