Vue 和 Golang 實現人臉識別認證
人臉識別作為一種基于人工智能的生物特征識別技術，近年來在多個領域得到了廣泛的應用。在web應用程序中，基于人臉識別的身份驗證也變得越來越流行，用戶體驗也隨之不斷提升。
本文將介紹如何將FaceIO集成到Vue.js和Golang，以實現人臉識別的身份認證。
在web應用中，基于人臉識別的身份認證所帶來的安全和便利因素，可以增強用戶體驗。
FaceIO作為第三方技術服務提供商，提供基于人工智能的面部身份識別服務。此外，FaceIO還提供一個在線的JavaScript庫，非常容易集成到web應用程序。下面的代碼表示對在線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
項目前端的UI框架使用Bootstrap，并引用Gentella。登錄截圖如下所示：
圖片
在集成web應用程序之前，你需要先從FaceIO的官方網站為應用程序申請公共的ID。申請過程非常簡單，且有免費的試用次數。有興趣的話可以登錄FaceIO的官網。
將FaceIO集成到Vue.js前端
第1步：在開發工具GoLand中創建Vue工程文件
本項目使用Node.Js 18.13.0版本。在GoLand中安裝插件Vue.js后，才能創建Vue項目文件。要安裝插件，則需要在File>Settings>Plugins中輸入Vue.js來查找并進行安裝。
第2步：在public目錄中引用fio.js
代碼如下所示：
<body>
<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用于從后端獲取web應用程序在FaceIO中注冊的公共ID。這樣做的目的是為了防止公共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的庫文件。
第3步：在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)
})在自定義的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()的方法直接調用的。而是在函數faceReg()的第一行，在使用子函數addFacialAuth()中的AjaxPost()之前定義常量that。
const that = this因為在子函數addFacialAuth()中，this.AjaxPost()是無效的。運行時的屏幕截圖如下：
圖片
將FaceIO集成到Golang后端
在這個項目的代碼中，Golang用于實現后端服務。Golang具有良好的并發性能、內存管理自動化等優點，因此在構建后端服務時得到了廣泛的應用。首先需要安裝Golang。這里我使用的是1.13.15版本。安裝Golang后，在Goland開發工具中創建Golang項目文件，這很容易。
另外注意，在這個項目中，Golang中沒有持久性數據存儲。數據全部在內存中，如果服務重新啟動，數據將初始化。這是因為這個項目用作演示，所以怎么簡單我就怎么來。
步驟1：創建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請求。當前端向后端發送請求時，將執行相應的路由函數，并返回響應數據。
步驟2：接收來自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服務器進行處理，并將識別結果返回給前端。拍攝的面部照片不需要通過應用程序。
圖片
通過這個演示項目，我們不僅學習了如何使用兩種不同的編程語言構建完整的web應用程序，還學習了如何集成人臉識別技術來增強應用程序的安全性和用戶體驗。這些技能和知識可以幫助我們更好地了解計算機科學和軟件開發，增強我們的專業競爭力。保持不斷學習和進步的態度，不斷探索，才能掌握更多的實踐技能、創造更多價值。
