人脸识别作为一种基于人工智能的生物识别技术，近年来在许多领域得到了广泛的应用。在网络应用中，基于人脸识别的身份认证也越来越受欢迎。同时，用户体验也在不断提高。本文将介绍如何在Vue.js和Golang中集成FaceIo来实现面部识别的身份认证。
在网络应用中，基于面部识别的身份认证所带来的安全和便利因素可以提升用户体验。
FaceIo作为一个第三方技术服务商，提供基于人工智能的面部身份识别服务。此外，FaceIo还提供一个在线的JavaScript库。它可以非常容易地被集成到网络应用程序中。在以下代码中可以找到对在线JavaScript库的引用
<script src="https://cdn.faceio.net/fio.js"></script>
进入全屏模式 退出全屏模式
与本文对应的项目代码已经上传到GitHub。上传的代码是一个完整的项目代码。该代码是基于MIT协议的，没有任何限制。
Technology Stack
Front-end: Vue.Js v2.7.14, Node.Js v18.13.0, JQuery
Back-end: Golang v1.13.15
Development Tool: GoLand 2019
进入全屏模式 退出全屏模式
如果你有兴趣，可以从GitHub下载。这个项目前端的UI框架使用Bootstrap，并参考了Gentella的使用。下面是一个登录的屏幕截图
在整合网络应用之前，你需要先从FaceIo的官方网站为你的应用申请一个公共ID。申请过程非常简单，并提供免费试用次数。本文将不介绍申请过程。
如何在Vue.js的前端集成FaceIo
第一步：在开发工具GoLand中创建Vue工程文件
这个工程使用Node.Js 18.13.0版本。在GoLand中安装插件Vue.js后，我们可以创建Vue工程文件。要安装插件，需要在 "文件>设置>插件 "中输入Vue.js，找到并安装。
第二步：在 "public "目录下的index.html中引用 "fio.js"
代码如下所示
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script src="https://cdn.faceio.net/fio.js"></script>
<script src="ajaxScript.js"></script>
<script src="jquery.min.js"></script>
<script type="text/javascript">
let myFaceIO
function initFaceIO(result) {
myFaceIO = new faceIO(result.Result.FaceIOAppCode);
window.myFaceIO=myFaceIO
}
jPost("config","",initFaceIO)
</script>
在上面的代码中，使用JQuery从后端获取网络应用程序在FaceIo注册的公共ID。这样设计的目的是为了防止Public ID直接暴露在代码中。如果公共ID被写死在代码中，灵活性就会很低。
在我定制的JavaScript文件 "ajaxScript.js "中，我实现了一个通过JQuery与后端通信的通用函数。自定义函数jPost()负责与后端进行交互。同时，在数据交互后，在结果中调用回调函数initFaceIO()。所有的数据交互都使用JSON数据格式。在回调函数initFaceIO()中，初始化faceIO对象。
初始化faceIO的代码
myFaceIO = new faceIO(result.Result.FaceIOAppCode);
初始化后，使用
window.myFaceIO=myFaceIO
这将使myFaceIO成为一个全局变量。它可以在Vue的框架代码中生效并可以使用。
请注意，这里引用的JavaScript文件 "ajaxScript.js "和 "jquery.min.js "都在 "public "目录下，没有使用Vue的库文件。
第三步：如何在Vue框架中使用FaceIO
在这个项目中，我在Vue框架中使用JQuery，并定制了JavaScript库文件 "scripts.js"。在这个JavaScript库文件中，JQuery被重新封装，一些操作函数也被定制。因此，为了全局有效，在文件 "main.js "中进行了引用。同时，代码还使用了UI框架Bootstrap，需要在文件 "main.js "中引用。文件 "main.js "的代码如下所示
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import {AjaxPost} from './assets/build/js/scripts.js'
import './assets/vendors/bootstrap/dist/css/bootstrap.min.css'
import './assets/vendors/font-awesome/css/font-awesome.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
Vue.prototype.AjaxPost = AjaxPost
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render: h => h(App)
})
在自定义JavaScript库文件 "scripts.js "中设置后端服务的HTTP访问地址
const serverUrl='http://127.0.0.1:8888/'
因为在这个项目中，前端和后端是独立的开发框架。我使用Golang实现了后端。这个后端启动后，它是一个独立的HTTP服务器，会占用端口号。8888是我自定义的监听端口号。这个后端服务的接口地址可以根据自己的项目情况进行定制和部署，你可以修改自定义常量 "serverUrl "的值。
完成上述代码后，你可以在Vue文件中使用FaceIO函数。
例如，在 "userLogin.vue "中，面部认证代码的用法如下所示
window.myFaceIO.authenticate({
"locale": "auto"
}).then(userInfo => {
checkFaceLogin(userInfo);
}).catch(errCode => {
console.log(errCode);
window.myFaceIO.restartSession();
})
其中，函数checkFaceLogin()是一个自定义回调函数。它用于处理FaceIO在认证后返回的用户认证结果数据。我们可以根据FaceIO返回的验证结果数据，进行下一步的业务逻辑处理。以运行时的截图为例，如下所示
例如，在'sysDashboard.vue'中，可以发现面部身份注册码的用法如下
<script>
export default {
name: 'sysDashboard',
activated() {
this.AjaxPost("dashboard","",initData);
function initData(result) {
if(result.Code===1){
let fid=result.Result.FacialId
if(fid.length>4){
document.getElementById("myFacialId").innerHTML=fid
document.getElementById("FacialIdReg").disabled=true;
}
}
}
},
methods: {
faceReg: function() {
const that=this
window.myFaceIO.enroll({
"locale": "auto"
}).then(userInfo => {
addFacialAuth(userInfo);
}).catch(errCode => {
console.log(errCode);
})
function addFacialAuth(userInfo) {
let obj = {};
obj.FacialId = userInfo.facialId;
that.AjaxPost("userEdit",obj,addFacialAuthEnd);
}
function addFacialAuthEnd(result) {
if(result.Code===1){
document.getElementById("myFacialId").innerHTML=result.Result.FacialId
document.getElementById("FacialIdReg").disabled=true;
}else {
alert("add Facial Auth fail")
}
}
}
}
}
</script>
其中，函数faceReg()是一个自定义的面部识别注册函数。
子函数addFacialAuth()是一个自定义回调函数。它用于处理身份注册完成后由FaceIO返回的用户注册结果数据。我们可以使用由FaceIO返回的注册结果数据。进入下一步的业务逻辑处理。
请注意这里的自定义函数AjaxPost()的调用方法。它不是使用'this.AjaxPost()'的方法直接调用的。AjaxPost()'。而是在函数faceReg()的第一行中
const that=this
在使用'that.AjaxPost()'之前，定义一个常量'that'。AjaxPost()'在子函数addFacialAuth()中。这是因为在子函数 addFacialAuth() 中，'this.AjaxPost()'是无效的。拍摄一张运行时的截图，如下所示
如何在Golang的后端集成FaceIO
在这个项目的代码中，Golang被用来实现后端服务。Golang具有良好的并发性能、内存管理自动化等优点，所以在构建后端服务时被广泛使用。请先安装Golang。在这个项目代码中，我使用的是1.13.15版本。安装Golang后，在Goland开发工具中创建Golang项目文件是很容易的。
另外，请注意一点。在这个项目中，Golang中没有持久性数据存储。数据都在内存中，如果服务被重新启动，数据将被初始化。因为这个项目是一个演示，所以它只是一个简单的例子。
第一步：创建一个HTTP服务器
在这个项目的代码中，在 "api_router. go "文件中创建了一个HTTP服务器。以下是代码
package routes
import (
"../conf"
"../handlers"
"fmt"
"log"
"net/http"
)
func ApiRouter() {
http.HandleFunc("/dashboard", handlers.Dashboard)
http.HandleFunc("/config", handlers.Config)
http.HandleFunc("/login", handlers.Login)
http.HandleFunc("/loginWithFace", handlers.LoginWithFace)
http.HandleFunc("/userEdit", handlers.UserEdit)
port := conf.GetEnv().ServerPort
if port == "" {
port = "8080"
log.Printf("Defaulting to port %s", port)
}
log.Printf("Listening on port %s", port)
log.Printf("Open http://localhost:%s in the browser", port)
log.Fatal(http.ListenAndServe(fmt.Sprintf(":%s", port), nil))
}
在上述代码中，使用 "http.HandleFunc() "函数将多个路由器函数注册到HTTP复用器中。这些路由器函数将处理来自客户端的所有请求。
最后，调用'http.ListenAndServe()'函数，开始监听端口上的HTTP请求。当当前端向后端发送请求时，相应的路由器函数将被执行并返回一个响应。
第二步：接收来自Vue.js前端的请求
为了方便代码管理，我将所有这些路由器函数都包含在 "handlers "包中。例如，获取在FaceIO注册的应用程序的公共ID。这个函数的代码在文件 "config.go "中，如下所示
package handlers
import (
"../conf"
"../model"
"encoding/json"
"io"
"net/http"
)
func Config(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Headers", "*")
result := make(map[string]string)
result["FaceIOAppCode"] = conf.GetEnv().FaceIOAppCode
jsonResult := new(model.JsonResult)
jsonResult.Code = conf.GetEnv().CodeSuccess
jsonResult.Msg = conf.GetEnv().MsgSuccess
jsonResult.Result = result
msg, _ := json.Marshal(jsonResult)
_, _ = io.WriteString(w, string(msg))
}
请注意，在上面的代码中，有两行代码
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Headers", "*")
这就是允许跨域访问的设置。因为在我的本地开发环境中，前端启动是一个独立的HTTP服务器，而后端启动也是一个独立的HTTP服务器。前端和后端之间的数据交互属于跨域访问。如果你在生产环境中部署，你可能会使用HTTP服务器来运行。例如，使用Nginx，你可以设置一个反向代理。这属于同域访问，所以这两行代码是不需要的。
因为在这个项目的代码中，前端和后端的数据交互都使用JSON数据格式。所以在上面的代码中，调用函数'json.Marshal()'来格式化数据。
在FaceIO控制台查看应用程序的使用情况
作为一个面部识别技术服务提供商，FaceIO在其控制台提供了许多服务。例如，面部检测、面部搜索、面部认证、活体检测等等，这些功能只需调用其提供的在线JavaScript库就可以完成。此外，在你注册并登录其管理后台后，你可以根据你的业务场景创建不同的应用程序并分配多个公共ID。每个应用程序的使用情况都有记录，如以下截图所示
在这篇文章中，将简要介绍如何使用Vue.js和Golang整合FaceIO，实现基于面部识别的身份认证系统。在Vue.js环境中，FaceIO提供了一个用于面部检测和识别的在线JavaScript库。它可以直接启动用户电脑的摄像头，将拍摄的面部照片直接发送到FaceIO服务器上进行处理，并将识别结果返回给前端。拍摄的面部照片不需要经过我们的应用程序。
通过这个示范项目，我们不仅可以学习如何使用两种不同的编程语言构建完整的网络应用程序，还可以学习如何整合面部识别技术来提高应用的安全性和用户体验。这些技能和知识可以帮助我们更好地理解计算机科学和软件开发，提高我们的专业竞争力。通过实践，我们可以更好地理解代码的工作原理，掌握一些实用技能和最佳实践。在这个过程中，我们可以结识新的朋友和同事，一起探索和创造更多有价值的东西。我希望大家都能保持一种不断学习和进步的态度，不断探索，创造更多的价值。
