如何使用 FaceIO 在 Vue.JS 中实现人脸识别?

我们甚至需要人脸识别吗？

首先，您应该为您的项目考虑人脸识别，因为人工智能技术仍然很神秘，这使得它们更具吸引力。事实上，在制作我自己的应用程序之前，我不会相信人脸识别存在。您的网站使用人脸识别这一事实将使用户想要访问您的网站以尝试这项新技术。

其次，人脸识别很容易集成到您的应用程序中。为了展示这一点，我们将使用 fio.js 库构建一个带有 FaceIO 面部识别的 vue.js 应用程序，该库为我们承担了所有繁重的工作，因此我们可以轻松地使用面部识别。

最后，这项技术使用户的生活变得更加轻松，因此他们不必记住密码，否则我们可以添加另一层验证来保护用户，这可以是FaceIO的情况。因此，作为用户，您只需让摄像头扫描您的面部即可通过身份验证。

您首先想到的问题是，它安全吗？

这个时代被称为大数据时代，企业视数据为宝，不惜一切代价保护客户的数据。

同样从用户的角度来看，确保他的数据安全是他消费其产品的公司所期望的。此外，对用户进行身份验证是任何 Web 应用程序的一项极其重要的功能。因此安全性是一个关键因素 FaceIO 也是验证用户身份的最安全方法之一。为什么？实际上有很多原因，我将列举几个：

第一个原因是 Faceio 遵守广泛适用的隐私法，例如 GDPR、CCPA 和其他隐私标准。此类法律可能会因违反有关用户隐私的规则而向企业收取高达其年收入 4% 的费用。此外，FaceIO 从不存储您的图像，它只存储图像的散列键，因此您的照片无处可去。

第二个是 FaceIO 使用的模型的高精度，在准确度指标中得分几乎 100%，这是一个疯狂的数字，需要大量的高质量数据，这需要花费大量资金.

使用 FaceIO 制作注册应用

我们已经谈得够多了，现在是时候构建我们的简单应用程序了。用户界面非常简单，通常是 3 个按钮，一个用于登录，一个用于注册，一个用于注销。该应用程序以一种简单的方式工作，您首先注册然后登录，此时原本隐藏的注销按钮显示，另外两个将消失。这是我们完成后项目的样子：

首先，如果您没有帐户，您需要在 FaceIO 网站上注册，这很容易，我会等您登录，以便我们继续构建这个应用程序。完成后，您将拥有一个与您的应用程序相关联的公共 ID，该 ID 类似于 fio9362。我们需要这个公共 ID 来连接我们的应用程序。

所以首先我们需要建立一个 vue.js 项目。您需要首先创建一个文件夹，然后使用命令外壳导航到文件夹位置并运行如下所示的命令。

现在让我们将 fio.js 添加到我们的项目中。现在转到 HTML 文件并在正文末尾添加一个带有 idfaceio-modal和fio.jscdn 的 div：

另一种解决方法是分配window.faceio给 faceIO 对象，然后在 vue.js JavaScript 代码中创建一个实例，同时将应用程序 ID 存储在 .env 文件中。

现在转到App.vue文件将 HelloWorld 组件更新为一个AuthenticationComponent并添加下面的 CSS 代码。该App.vue组件应如下所示：

现在转到Authentication.vue之前是HelloWorld组件的文件，我们首先从清除模板开始，然后添加三个按钮，一个用于登录，一个用于注册，一个用于注销。我们需要创建一个用户状态并将其值设置为空字符串。

现在使用该v-if属性，我们可以使登录和注册按钮仅在未设置用户的地方显示，而注销按钮仅在用户登录时显示，我们还将为每个按钮添加其相应的点击事件。我们将在一分钟内创建这 3 个函数。模板如下所示，我添加了非常基本的 CSS 没什么疯狂的：

现在对于 JavaScript 部分，我们需要首先创建一个用于跟踪用户的状态，如下所示：

现在让我们创建登录、注册和注销功能：

注销按钮只是将用户设置为一个空字符串。这很容易实现，但是对于注册功能，我们将使用 fio.js 提供的方法，该方法可以从 window 对象访问。该函数接受一个有效负载对象，该对象是同一用户登录时将返回的数据，代码相当简单，如下所示。

fio.js 库的文档可以在这里找到。

现在对于登录函数，fio.js 提供了一个用户登录函数，它返回我们在用户注册时作为参数传递给注册函数的数据，它是这样工作的：

对于更大的项目，您可以设置 cookie 并根据需要调整功能。

现在我们终于完成了，希望你喜欢这个项目

结论

Ai 正在以如此之快的速度重塑网络，因此请尽快将人脸识别添加到您的网络应用程序中，这将产生巨大的影响。

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