如何使用FaceIO开发基于人工智能的Web App用户认证模块-51CTO.COM

译者 | 李睿

审校 | 重楼

在过去的Web应用信息系统开发中，用户认证是一个不可或缺的功能模块。用户认证功能包括用户注册和登录认证。在以往的开发方法中，用户认证功能模块实现的常见方式是使用电子邮件和短信进行验证。很多用户的电脑都安装了摄像头，采用摄像头可以充分利用人脸识别的人工智能技术来实现用户认证。而使用FaceIO的JavaScript库在Web应用程序项目中可以实现用户身份验证。

本文主要介绍如何通过第三方人工智能服务接口开发Web应用项目的用户登录模块。Web应用程序项目的源代码已上传到GitHub，并基于MIT协议。没有任何限制。

本项目是一个简单完整的Web微服务系统。本项目采用前后端分离的开发方法，使用不同的项目文件路径。

Plain Text 
 Technology stack of WEB APP project
 Operating System：Windows 10
 Front-end: Node.js 18.0.0, React 18.2.0, FaceIO, CoreUI 4.3.1
 Front-end development tool: WebStorm 2019
 Back-end: Java 1.8, Spring Boot, JWT, Mybatis, Maven
 Back-end development tool: IntelliJ IDEA 2019
 Database: MySQL 5.7+1.
2.
3.
4.
5.
6.
7.
8.

这个Web项目的源代码包括前端、后端和数据库，是一个完整的Web应用程序信息系统。前端开发使用React，后端开发使用Java和SpringBoot，数据库使用MySQL。第三方AI业务接口使用FaceIO。FaceIO提供了一个在线JavaScript库，可以在前端代码中直接引用。前端引用FaceIO库之后，添加少量代码即可轻松实现人脸认证，在与后端集成后，即可实现完整的用户认证。前端界面使用CoreUI免费模板。

FaceIO的使用并不局限于浏览器。它可以在任何浏览器上运行，包括IE、Chrome、Firefox和Safari。而且，所有人工智能业务处理都是在FaceIO的服务器上完成的，所以FaceIO需要能够访问用户当前浏览器上的摄像头。

如何在前端React框架中使用FaceIO库

步骤1：安装和配置Node.js环境

从Node.js官方网站下载对应版本的Node.js压缩包。这里使用的版本是V18.0.0。如果用户想运行发布的这个开源网络项目，最好也使用V18.0.0。由于Node.js版本的迭代速度相对较快，如果使用其他版本，这一开源Web项目中使用的本地JavaScript库可能不兼容，可能无法运行。

在下载Node.js压缩包之后，将压缩包解压到英文目录下。因为使用IntelliJ IDEA开发前端React，所以需要在IntelliJ IDEA中配置Node.js和NPM，并指定Node.js的安装目录。

在Intelli J IDEA中配置Node.js和NPM后，用户可以通过IntelliJ IDEA工具创建ReactApp项目。

步骤2：在FaceIO中申请公共ID

FaceIO提供了一个在线JavaScript库。如果想使用FaceIO提供的人工智能服务，则需要为其APP申请一个公共ID。在登录之前，首先注册一个帐户，然后根据项目创建一个应用程序以获得公共ID。这个公共ID需要写在ReactApp项目的代码中。在申请公共ID时，FaceIO将为应用程序提供一个免费的公共ID版本，并对使用次数进行限制。

步骤3：在React应用程序项目中使用FaceIO

外部JavaScript库地址由FaceIO提供。

JavaScript 
 const script = document.createElement('script');
 script.type = 'text/javascript';
 script.async = true;
 script.src = 'https://cdn.faceio.net/fio.js';
document.head.appendChild(script);1.
2.
3.
4.
5.
6.

在引入fio.js之后，定义常量就可以使用了。代码如下所示：

JavaScript 
 let myFaceIO;
 useEffect(()=>{
 //eslint-disable-next-line
 myFaceIO = new faceIO("fioab497");
 },[])1.
2.
3.
4.
5.
6.

fioab497是应用注册后的公共ID。用户需要替换应用程序的公共ID。

需要注意的是，在上面代码React的钩子函数useEffect()中，有一行代码//eslint-disable-next-line。如果用户已经在开发环境中安装了eslint插件，则需要添加这行代码。如果没有这行代码，eslint检测将认为存在错误。错误提示如下：

ERROR in [eslint]
src\views\pages\login\Login.js
 Line 52:20: 'faceIO' is not defined no-undef1.
2.
3.

在开发环境中，Web项目将无法运行。因此，需要添加这一行注释代码来让eslint跳过下一行代码的检测。

FaceIO提供了人脸注册函数enroll()。代码的使用方式如下：

JavaScript 
const faceSignUp = async ()=>{
 myFaceIO.enroll({
 "locale": "auto"
 }).then(userInfo => {
 console.log("facialId: " + userInfo.facialId)
 console.log(userInfo);
 handleLogin(userInfo,"login/signUp");
 }).catch(errCode => {
 console.log(errCode);
 })
 }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

在上面的代码中，函数enroll()以JSON字符串格式输入数据，并传递给FaceIO的人工智能接口。UserInfo是FaceIO人脸验证后返回的数据对象。handllogin()是一个用户定义的函数，用于在接收到FaceIO返回的数据对象后与后端通信。当然，用户也可以根据自己的开发情况，设置其他自定义函数来处理FaceIO返回的数据对象。

在函数enroll()输入的JSON字符串格式数据中，还可以添加自定义JSON字符串数据。代码如下所示：

JavaScript 
 const faceSignUp = async ()=>{
 myFaceIO.enroll({
 "locale": "auto", // Default user locale
 "payload": {
 "user": 123456, 
 "email": "name@example.com"
 }
 }).then(userInfo => {
 console.log("facialId: " + userInfo.facialId)
 console.log(userInfo);
 handleLogin(userInfo,"login/signUp");
 }).catch(errCode => {
 console.log(errCode);
 })
 }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

payload是FaceIO可以返回的数据节点。在“有效负载”中，可以添加需要返回的JSON格式数据，并根据开发需求定制数据内容。

调用函数enroll()后，浏览器将显示FaceIO提供的人机交互用户界面，并在浏览器提示符下启动摄像头。需要点击“是”。FaceIO提供的用户界面会自动在当前摄像头前确认用户的脸两次，并要求当前用户确认两次PIN码的设置。输入的PIN码将用于面部认证。

FaceIO提供了人脸认证函数authenticate()。代码的使用方式如下：

JavaScript 
 const faceSignIn = async ()=>{
 myFaceIO.authenticate({
 "locale": "auto"
 }).then(userInfo => {
 console.log("facialId: " + userInfo.facialId)
 console.log(userInfo);
 handleLogin(userInfo,"login/signIn");
 }).catch(errCode => {
 console.log(errCode);
 })
 }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

在调用authenticate()函数之后，浏览器将显示FaceIO提供的人机交互用户界面，启动摄像头，并要求当前登录用户输入人脸注册时设置的PIN码。

根据FaceIO返回的数据，自定义函数handleLogin()被传递到后端。后端接收数据，分析数据，并将结果返回给前端。前端执行后续业务逻辑。如果用户身份验证成功，后端将向前端返回令牌数据。在前端确认登录成功后，页面跳转到Dashboard完成整个用户身份验证过程。

前端接收到令牌数据后，将令牌数据保存在用户当前浏览器的会话存储中。在会话存储中自定义了一个名为“Authorization”的项来存储令牌数据。保存令牌数据的函数代码如下:

JavaScript 
const setAuthorization = (Auth) => {
sessionStorage.setItem('Authorization',Auth)
}1.




获取Token数据的函数代码如下:

JavaScript 
1function getAuthorization () {
let Author = sessionStorage.getItem('Authorization')
if (Author === null) return ''
return Author
}1.






已经在系统中设置了自动加载令牌数据。在后续的业务处理中，当访问后端API时，令牌数据将自动放置在请求头的授权中。代码如下所示：

JavaScript 
 instanceForm.interceptors.request.use(
 (config) => {
 config.headers.authorization = getAuthorization()
 return config
 }
 )1.
2.
3.
4.
5.
6.
7.

如何在后端完成用户认证

在Web项目中，使用SpringBoot作为后台，开发语言为Java 1.8。在Spring框架中，创建一个处理用户登录身份验证的控制层类。这个LoginController类也是一个用于处理用户登录身份验证的API接口。代码如下：

Java 
 package com.auto17.base.controller;
 import ...
 import ...
 @RestController
 @RequestMapping("/login")
 @CrossOrigin
 public class LoginController{
 protected final Logger logger = LoggerFactory.getLogger(LoginController.class);
 @Autowired
 private IAppUserService appUserService;
 @PostMapping("/signUp")
 public AjaxResult signUp(@RequestBody JSONObject userInfo) {
 ...
 }
15 @PostMapping("/signIn")
16 public AjaxResult signIn(@RequestBody JSONObject userInfo) {
17 ...
18 }
19 }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

在上面的代码中，@RequestMapping("/login")表示整个LoginController类的API路径。

@PostMapping("/signUp")表示用户注册的API路径，接收POST数据请求，使用函数signUp()处理用户注册。完整的API路径是/login/signUp。

@PostMapping("/signIn")表示用户身份验证的API路径。它接收POST数据请求。函数signIn()用于处理用户身份验证。完整的API路径是/login/signIn。

在函数signUp()或signIn()中，解析前端React传递的JSON格式数据。从JSON数据中提取nodefacialId的值。FacialId是FaceIO成功验证用户时返回的唯一标识符。该ID是唯一的。在这个Web项目中，通过“facialId”判断用户，并通过facialId识别用户。

需要注意的是，在这个Web项目中，JSON格式的数据从前端传输到后端是明文的，没有进行数据加密。如果使用它，可以添加安全函数来加密JSON格式的数据。前端加密完成后，消息从前端传输到后端。在后端解密后，将解析JSON格式数据。加密方法有很多种。在此推荐RSA算法。RSA算法是一种非对称加解密算法。在后端，也就是在用户访问Web时，服务器端生成一对RSA密钥，包括公钥和私钥，并将公钥提供给前端。前端使用公钥对JSON格式的数据进行加密，然后传输到后端。后端根据私钥对其进行解密。在解密之后，解析JSON格式数据。这可以最大限度地保护“facialId”的值不被轻易拦截。

在后端，在用户被facialId成功识别之后。使用JWT方法保存当前登录用户的信息。JWT Utils类中的函数getToken(AppUser用户)获取当前用户的令牌。使用facialId的值作为签名密钥。代码如下所示：

Java 
 public class JWTUtils {
 public static String getToken(AppUser user) {
 Calendar instance = Calendar.getInstance();
 //Token expiration time
 instance.add(Calendar.DATE, 1);
 JWTCreator.Builder builder = JWT.create();
 return builder.withAudience(String.valueOf(user.getUserId()))
 .withClaim("userId", user.getUserId())
 .withClaim("facialId", user.getFacialId())
 .withExpiresAt(instance.getTime())
 .sign(Algorithm.HMAC256(user.getFacialId()));
 }
 }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

在后端获取当前登录用户的令牌后，将令牌数据返回给前端。

用户身份验证成功后，后端将在每个后续API请求中接收用于用户身份验证的Token数据。已经创建了一个拦截器类JWTInterceptor，用于在每个API请求之前验证令牌数据。代码如下所示：

Java 
 package com.auto17.base.security;
 import com.auto17.base.domain.AjaxResult;
 import com.auto17.faceLogin.domain.AppUser;
 import com.auto17.faceLogin.service.IAppUserService;
 import org.apache.commons.lang3.StringUtils;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import java.io.PrintWriter;
 public class JWTInterceptor extends HandlerInterceptorAdapter {
 protected final Logger log = LoggerFactory.getLogger(JWTInterceptor.class);
 @Autowired
 private IAppUserService appUserService;

 @Override
 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
 String token = request.getHeader("authorization");
 log.info("token="+token);
 if(StringUtils.isEmpty(token)){
 log.error("authorization is Empty");
 errorOut(response,"authorization is Empty");
 return false;
 }
 try {
 //get login user info
 String userNoString=JWTUtils.getAudience(token);
 log.info("userNoString="+userNoString);
 AppUser loginUser=appUserService.selectAppUserById(Long.valueOf(userNoString));
 if(loginUser!=null){
 JWTUtils.verify(token,loginUser.getFacialId());
 request.setAttribute("loginUser", loginUser);
 }else{
 errorOut(response,"check user fail");
 }
 } catch (Exception e) {
 errorOut(response,"check verify fail");
 e.printStackTrace();
 return false;
 }
 return true;
 }

 private void errorOut(HttpServletResponse response,String msg){
 try {
 response.setHeader("Access-Control-Allow-Origin","*");
 response.setContentType("text/json; charset=utf-8");
 response.setHeader("Access-Control-Allow-Methods","GET,POST,OPTIONS,DELETE");
 response.setHeader("Access-Control-Max-Age","3600");
 response.addHeader("Access-Control-Allow-Headers", "*");
 PrintWriter writer=response.getWriter();
 writer.print(AjaxResult.error(msg));
 writer.flush();
 writer.close();
 }catch (Exception e){
 e.printStackTrace();
 }
 }
 }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.

除了在前端提供易于使用的功能之外，FaceIO还提供了REST API，允许从后端管理应用程序。每个FaceIO应用程序都会自动分配一个API密钥，可以从FaceIO控制台的应用程序管理器中检索这一密钥。API键允许用户从专用的后端环境以编程方式管理应用程序，可以使用SpringBoot的RestTemplate轻松实现它。因为这一项目是一个简单的应用程序，所以没有在这方面使用它。如果用户感兴趣，可以访问FaceIO其余API的在线文档。

如何设计数据库

在这个Web项目中，数据库使用MySQL。为了配合人脸识别，设计了一个简单的用户表。创建表SQL语句：

SQL 
 CREATE TABLE `app_user` (
 `user_id` int(11) NOT NULL AUTO_INCREMENT,
 `facial_id` varchar(60) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
 `nick_name` varchar(120) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
 `true_name` varchar(160) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
 `age` smallint(6) DEFAULT NULL,
 `gender` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
 `reg_time` datetime(0) DEFAULT NULL,
 `last_login_time` datetime(0) DEFAULT NULL,
 PRIMARY KEY (`user_id`) USING BTREE,
 UNIQUE INDEX `idx_facialid`(`facial_id`) USING BTREE
 )1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

数据表中的字段facal_id用于存储FaceIO返回的唯一用户ID。这是一个简单的用户数据表。没有用户密码字段或用户手机字段。该用户数据表仅使用字段“facal_id”完成登录用户的认证和识别。

用户在FaceIO完成注册后，FaceIO返回的JSON字符串数据中包含“details”节点，即FaceIO人工智能识别的当前用户的年龄和性别。将它存储在用户数据表中的“年龄”和“性别”字段中，这是目前的开发方法。

当然，也可以保留以前的用户认证的开发方法，同时仍然保留登录密码和SMS认证。在原有开发方法的基础上，增加了FaceIO的人脸认证方法。在原有的用户数据表中，添加字段facal_id绑定人工智能的人脸识别。

原文标题：Using the JavaScript library of FaceIO to implement user authentication in a web application project，作者：jianxiang sun