使用脸部辨识验证使用者于网路应用程序中的方式
|
众所周知，在向用户提供某种服务或销售某些产品时，身份认证是Web应用的一个非常重要的方面。它不但能够帮助服务提供方将非法用户拒之门外，而且可以跟踪用户的使用状况。过去，基于电子邮件和密码组合的身份认证方式曾广为流行。而随着时间的推移，大型科技公司收获了庞大的用户群，并相应推出了OAuth的新认证概念。即：作为站点的所有者，您信任OAuth提供者对于用户实施的身份认证结果。而作为回报，OAuth提供者需要向您提供该用户的详细信息。 一、为什么需要基于面部识别的身份认证? 基于面别识别的身份认证有五项优点： 1、比传统方法更快：在面部认证方法中，您只需单击一个按钮，即可启动身份认证过程，而且能够在一毫秒内完成。而在上述提到的基于电子邮件与密码的传统方法中，您必须在键盘上逐个输入字母信息，而在收到认证码后，还得一边盯着认证码，一边小心地输入数字。 2、不需要专门的硬件：面部认证技术的唯一要求就是摄像头。而现在，所有的智能手机都默认带有摄像头，大多数台式机也都被额外配置了网络摄像头。因此，用户无需为该技术专门增配硬件。 3、减少社交平台上的冒名顶替：面部认证最重要的特点便是可以防止冒名顶替。在社交平台上，许多黑客会冒充他人去创建虚假账户，以实施数字犯罪。而在面部识别技术的帮助下，社交平台可以识别创建新帐户的用户是否确属本人。 4、减少机器人和自动化脚本的攻击：虽然机器人和自动化脚本可以帮助人们摆脱重复性的任务，但是黑客也可以使用它们向他人发送垃圾邮件、或猜测密码。显然，无论是机器人还是自动化脚本都不具备面部特征，无法完成身份认证。 5、注重隐私：如今，隐私已成为了人们时常关注的话题。我们将使用的FaceIO API，在身份认证过程中采用的是端到端的加密方式。在后端，它们能够安全地、且仅存储面部特征的哈希值。这完全符合GDPR和CCPA的要求。 二、一个面部认证项目 下面，我将向您展示一个面部认证Web应用的制作过程。 1.安装所需的依赖项 创建一个空白目录，并在其中创建一个index.html文件。当然，您也可以添加一个单独的CSS文件。在此，我仅展示最简单的主要方面。 如果您使用VSCode进行开发，那么可以使用live-server来提供静态文件。在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模型进行交互，并让我们只需几行代码，便可以实现面部识别功能。为此，我们需要通过如下代码，在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个帮助函数（helper function），以简化开发过程。其中的一种可用于注册用户（如，注册函数），另一种则用于身份认证（如，登录函数）。 2.注册用户 FaceIO同样通过提供Javascript库的方式，来简化用户的注册过程。首先，我们在HTML标签中添加一个带有id="enroll"的按钮。我们可以使用getElementbyID方法去访问Javascript文件中的该按钮。 接着，我们使用如下代码，来初始化index.js里面的FaceIO对象。为了给FaceIO项目添加公共ID，您可以在项目仪表板中直接产生此类公共ID。 const faceio = new faceIO("<Your Public ID here"); 让我们在注册按钮中添加一个事件监听器，以便当有人点击该按钮时，便可执行FaceIO对象的注册方法。该注册方法可使用如下备选参数： （1）locale是用户的本地语言。 （2）permissions timeout是等待用户授予访问摄像头权限的秒数。 （3）termsTimeout是等待用户接受FaceIO相关条款和条件的秒数。 （4）idleTimeout是尝试识别人脸时等待的总秒数。 （5）replyTimeout是等待从FaceIO节点接收处理后的面部数据的秒数。 （6）userConcent是一个布尔值，表示用户是否同意扫描他们的面部。如果您已经征得用户的同意，则可以将该值设置为true。 （7）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码，并且妥善保存。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
