如何在Web应用程序中使用面部识别来对用户进行身份验证

译者|陈军评论|方面。它不仅可以帮助服务提供商将非法用户拒之门外，还可以跟踪用户的使用状态。过去，流行基于电子邮件和密码组合的身份验证方法。随着时间的推移，大型科技公司收获了庞大的用户群，并相应地推出了全新的OAuth认证概念。即：作为站点的所有者，您信任OAuth提供者对用户的身份验证结果。作为回报，OAuth提供者需要向您提供该用户的详细信息。基于OAuth的身份验证对用户来说非常简单。他们只需要在OAuth提供商处维护一个帐户，并使用该帐户登录所有其他相关网站。整个认证机制交给OAuth来完成。过了一会儿，出现了无密码身份验证。基本流程是当你输入用户名或邮箱时，后台给你发一个链接。如果您将此链接粘贴到您的浏览器中，它将自动验证并完成登录。随着数据集变得越来越大，人工智能(AI)和机器学习(ML)不断迭代和进步，它们的准确性也得到了显着提高。今天，我们可以使用面部识别技术对网络应用程序中的用户进行身份验证。接下来，我将使用FaceIOAPI构建一个简单的应用程序来演示如何使用面部识别技术对用户进行身份验证。1、为什么需要基于人脸识别的身份认证？基于人脸识别的身份认证有五个优势：1.比传统方法更快：在人脸认证方式中，只需点击一个按钮即可启动身份认证过程，可以在毫秒内完成。在上述传统的基于邮箱和密码的方式中，你必须在键盘上一个一个地输入字母信息，收到验证码后，还得盯着验证码仔细输入数字。2.不需要特殊硬件：面部认证技术的唯一要求是摄像头。如今，所有智能手机都默认配备摄像头，而大多数台式机都配备了额外的网络摄像头。因此，用户无需为该技术添加专门的硬件。3、减少社交平台冒充：人脸认证最大的特点就是可以防止冒充。在社交平台上，许多黑客创建虚假账户冒充他人实施数字犯罪。在面部识别技术的帮助下，社交平台可以判断创建新帐户的用户是否真是这个人。4.减少来自机器人和自动化脚本的攻击：虽然机器人和自动化脚本可以帮助人们摆脱重复性任务，但黑客也可以利用它们向他人发送垃圾邮件或猜测密码。显然，机器人和自动化脚本都没有面部特征来完成身份验证。5、关注隐私：如今，隐私已经成为人们经常关注的话题。我们将使用的FaceIOAPI在身份验证过程中使用端到端加密。在后端，他们只能安全地存储面部特征的哈希值。这完全符合GDPR和CCPA标准。2.一个人脸认证项目下面给大家展示一个人脸认证Web应用的制作过程。1.安装需要的依赖创建一个空白目录，在里面创建一个index.html文件。当然，你也可以单独添加一个CSS文件。在这里，我只展示最简单的主要方面。如果你使用VSCode进行开发，你可以使用live-server来提供静态文件。在index.html中，我们首先添加以下最基本的HTML标签。左右滑动查看完整代码FaceIO提供了一个非常方便的Javascript库来与其AI模型进行交互，并允许我们仅用几行代码就可以实现面部识别。为此，我们需要通过以下代码在HTML文档的body标签中添加它的CDN（ContentDeliveryNetwork）。接下来，我们需要创建一个index.js文件并将其链接到FaceIObody中CDN后面的标签。接下来，让我们创建了2个辅助函数来简化开发过程。其中一个可用于注册用户（例如，注册功能），另一个用于身份验证（例如，登录功能）。2.注册用户FaceIO还通过提供Javascript库简化了用户注册过程。首先，我们在HTML标记中添加一个带有id="enroll"的按钮。我们可以使用getElementbyID方法来访问Javascript文件中的按钮。接下来，我们使用如下代码在index.js中初始化FaceIO对象。为了给FaceIO项目添加一个公共ID，您可以直接在项目仪表板中生成这样一个公共ID。constfaceio=newfaceIO("<这里是你的公共ID");让我们给注册按钮添加一个事件监听器，这样当有人点击按钮时，FaceIO对象的注册方法就会被执行。注册方法可以使用以下可选参数：(1)locale是用户的母语。(2)权限超时是等待用户授予访问摄像头权限的秒数。(3)termsTimeout是等待用户接受FaceIO相关条款的秒数。(4)idleTimeout是尝试识别人脸时等待的总秒数。(5)replyTimeout是等待从FaceIO节点接收处理后的人脸数据的秒数。(6)userConcent为布尔值，表示用户是否同意被扫脸。如果您已经征得用户同意，您可以将该值设置为true。(7)Payload是你可以在注册函数中添加的payload，以key-value对象的形式存在。您可以使用此有效负载功能来附加电子邮件或与用户相关的其他信息。以下代码片段显示了此示例中的注册功能：enroll.addEventListener("click",async()=>{letresponse=awaitfaceio.enroll({locale:"auto",payload:{email:"example@gmail.com",pin:"12345",},});console.log(`唯一面部识别码：${response.facialId}注册日期：${response.timestamp}性别：${response.details.gender}年龄近似值：${response.details.age}`);});运行此功能时，会在用户面前弹出一个包含各种条款和条件的窗口。只有当用户点击接受时，应用程序才能请求相机访问权限。FaceIO只有在用户授予摄像头访问权限后才能开始扫描人脸。FaceIO模型寻找能够将用户与其他人区分开来的独特面部特征。完成后，您需要在面部数据中添加PIN码并确保其安全。当以上所有步骤完成后，FaceIO会返回一个包含用户faceID的userInfo对象给用户。这个ID是一个通用的唯一标识符，可以用来对应其性别和年龄（毕竟人工智能模型可以很容易地预测出用户的性别和年龄）。这类faceID会被存储在应用的后台，这样当用户登录时，就可以通过匹配faceID来对用户进行身份验证。在工作流程中，如果出现任何错误，FaceIO会提供大量错误信息。而如果用户不允许应用访问摄像头，fioErrCode.PERMISSION_REFUSED会提示错误。同样，如果用户不接受弹出的条款和条件，服务器将抛出错误fioErrCode.TERMS_NOT_ACCEPTED。3.验证用户要启动验证过程，请在HTML标记中添加一个带有id="authenticate"的按钮，并在getElementbyID方法的帮助下访问位于index.js中的此按钮。现在，当用户按下此按钮时，我们将能够启动一个简单的身份验证流程。整个认证功能会涉及到permissionTimeout、idleTimeout、replyTimeout以及前面提到的enroll()等本地函数。对应的代码片段如下所示：authenticate.addEventListener("click",async()=>{letresponse=awaitfaceio.authenticate({locale:"auto",});console.log(`UniqueFacialID:${response.facialId}PayLoad:${response.payload}`);});当用户按下认证按钮时，屏幕上会弹出一个类似于注册功能的界面。它还需要访问您的相机才能扫描面部信息。扫描完成后，它会要求您输入您在注册时设置的PIN码。如果PIN码提供正确，FaceIO将返回您在注册过程中设置的面部数据和负载。此外，您还可以通过匹配服务器中的FaceID来仔细检查身份验证过程。至此，我们的身份认证过程就完成了。您可以看到，与使用电子邮件加密码相比，这是一个更加简洁的身份验证过程。也就是说，我们可以将繁重的工作全部交给FaceIO服务器及其AI模型。作为开发人员，您只需添加应用程序逻辑、修改身份验证流程并改善用户体验。4、隐私功能如前所述，FaceIO还具有强大的隐私保护功能。具体来说：FaceIO服务完全符合GDPR和CCPA：这里的GDPR在2018年通过了《通用数据保护条例》。它要求所有企业保护用户的个人数据和隐私。CCPA是《加州消费者保护法》的缩写。它使用户可以更好地控制他们的数据。如果您在这些地区开展业务，则需要遵守这两项法律。FaceIO只存储用户面部特征的hash值：由于客户端的代码库和组件不处理任何生物特征数据，所有处理都在后台完成，因此不存储任何原始数据，而存储其他相关信息为尽可能少。三、常见问题1、FaceIO是否独立于浏览器？FaceIO完全独立于浏览器。它可以在任何浏览器上运行，包括Chrome、Firefox和Safari。由于所有处理都在服务器上完成，因此FaceIO只需要访问摄像头即可工作。当然，如果你使用一些为了保护隐私而禁用了Javascript的浏览器，那么你必须启用它，因为FaceIO需要使用Javascript与服务器通信。2.我们不需要从头开始构建模型吗？是的。对于具有人工智能和机器学习背景的人，他们可能会选择从头开始构建模型，并在自己的Web应用程序中实现面部认证相关功能。但由于大多数Web开发人员不一定具备这种能力，因此使用现有服务来实现服务功能而无需重新发明轮子通常是明智的。目前，市场上还有其他竞争解决方案。例如，AWS提供的AWSRekognition的工作方式与FaceIO类似。您甚至可以在FaceIO控制面板中选择AWSRekognition。3.隐藏publicID如前所述，在FaceIO对象启动时必须提供publicID。如果需要，您可以使用环境变量隐藏它。如果您使用前端框架或构建系统，则可以在构建时动态添加ID。例如，如果您使用Nextjs，则可以使用.env.local文件来保存敏感凭证。当然，如果你不使用任何框架，也可以使用支持环境变量的Vite。它能够构建和缩小您的vanillajs项目以加快部署速度。您只需创建一个.env文件并将所有凭据放入其中。不要忘记将该.env文件放入您自己的.gitignore列表中。原文链接：https://hackernoon.com/how-to-authenticate-a-user-via-face-recognition-in-your-web-application译者介绍朱利安陈（JulianChen），社区编辑，有十多年IT项目实施经验，善于管控内外部资源和风险，注重传播网络和信息安全方面的知识和经验；持续以博文、专题、翻译等形式分享前沿技术和新知识；下一个方法是进行信息安全培训和讲座。