Vue 和 Golang 實(shí)現(xiàn)人臉識(shí)別認(rèn)證
人臉識(shí)別作為一種基于人工智能的生物特征識(shí)別技術(shù)，近年來(lái)在多個(gè)領(lǐng)域得到了廣泛的應(yīng)用。在web應(yīng)用程序中，基于人臉識(shí)別的身份驗(yàn)證也變得越來(lái)越流行，用戶(hù)體驗(yàn)也隨之不斷提升。
本文將介紹如何將FaceIO集成到Vue.js和Golang，以實(shí)現(xiàn)人臉識(shí)別的身份認(rèn)證。
在web應(yīng)用中，基于人臉識(shí)別的身份認(rèn)證所帶來(lái)的安全和便利因素，可以增強(qiáng)用戶(hù)體驗(yàn)。
FaceIO作為第三方技術(shù)服務(wù)提供商，提供基于人工智能的面部身份識(shí)別服務(wù)。此外，F(xiàn)aceIO還提供一個(gè)在線的JavaScript庫(kù)，非常容易集成到web應(yīng)用程序。下面的代碼表示對(duì)在線JavaScript庫(kù)的引用：
<script src="https://cdn.faceio.net/fio.js"></script>本文對(duì)應(yīng)的項(xiàng)目代碼已上傳到GitHub。代碼基于MIT協(xié)議，因此沒(méi)有任何限制。
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
項(xiàng)目前端的UI框架使用Bootstrap，并引用Gentella。登錄截圖如下所示：
圖片
在集成web應(yīng)用程序之前，你需要先從FaceIO的官方網(wǎng)站為應(yīng)用程序申請(qǐng)公共的ID。申請(qǐng)過(guò)程非常簡(jiǎn)單，且有免費(fèi)的試用次數(shù)。有興趣的話(huà)可以登錄FaceIO的官網(wǎng)。
將FaceIO集成到Vue.js前端
第1步：在開(kāi)發(fā)工具GoLand中創(chuàng)建Vue工程文件
本項(xiàng)目使用Node.Js 18.13.0版本。在GoLand中安裝插件Vue.js后，才能創(chuàng)建Vue項(xiàng)目文件。要安裝插件，則需要在File>Settings>Plugins中輸入Vue.js來(lái)查找并進(jìn)行安裝。
第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應(yīng)用程序在FaceIO中注冊(cè)的公共ID。這樣做的目的是為了防止公共ID直接在代碼中公開(kāi)。如果公共ID在代碼中被寫(xiě)死，靈活性就會(huì)非常低。
在自定義的JavaScript文件ajaxScript.js中，我實(shí)現(xiàn)了一個(gè)通過(guò)JQuery與后端通信的通用函數(shù)。自定義函數(shù)jPost()負(fù)責(zé)與后端交互。同時(shí)，數(shù)據(jù)交互后，調(diào)用結(jié)果中的回調(diào)函數(shù)initFaceIO()。所有數(shù)據(jù)交互都采用JSON數(shù)據(jù)格式。在回調(diào)函數(shù)initFaceIO()中，初始化FaceIO對(duì)象。
初始化FaceIO的代碼：
myFaceIO = new faceIO(result.Result.FaceIOAppCode);初始化后，通過(guò)以下代碼：
window.myFaceIO = myFaceIO使myFaceIO成為全局變量，并可用于Vue的框架代碼。
請(qǐng)注意，這里引用的JavaScript文件ajaxScript.js和jquery.min.js都在public目錄中，不使用Vue的庫(kù)文件。
第3步：在Vue框架中使用FaceIO
在這個(gè)項(xiàng)目中，我在Vue框架中使用了JQuery，并自定義 JavaScript庫(kù)文件scripts.js。在這個(gè)JavaScript庫(kù)文件中，重新封裝JQuery，并自定義一些操作函數(shù)。因此，為了全局有效，文件main.js中需要實(shí)現(xiàn)引用。同時(shí)，代碼還使用了UI框架Bootstrap，文件main.js需要引用這個(gè)框架。文件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文件中設(shè)置后端服務(wù)的HTTP訪問(wèn)地址：
const serverUrl='http://127.0.0.1:8888/'在這個(gè)項(xiàng)目中，前端和后端是獨(dú)立的開(kāi)發(fā)框架。我使用Golang實(shí)現(xiàn)后端。后端啟動(dòng)后，將占用端口號(hào)的獨(dú)立HTTP服務(wù)器。8888 是我自定義的端口號(hào)。該后端服務(wù)的接口地址可以根據(jù)具體的項(xiàng)目情況進(jìn)行自定義和部署，并且可以修改自定義常量serverUrl的值。
完成上面的代碼后，就可以使用Vue文件中的FaceIO函數(shù)了。
例如，在userLogin.vue中，人臉識(shí)別的代碼如下所示：
window.myFaceIO.authenticate({
"locale": "auto"
}).then(userInfo => {
checkFaceLogin(userInfo);
}).catch(errCode => {
console.log(errCode);
window.myFaceIO.restartSession();
})其中，函數(shù)checkFaceLogin()是自定義回調(diào)函數(shù)。用于處理FaceIO認(rèn)證后返回的用戶(hù)認(rèn)證結(jié)果數(shù)據(jù)。我們可以根據(jù)FaceIO返回的驗(yàn)證結(jié)果數(shù)據(jù)進(jìn)行下一步的業(yè)務(wù)邏輯處理。運(yùn)行時(shí)的屏幕截圖如下：
圖片
例如，在sysDashboard.vue中，面部身份注冊(cè)的代碼如下所示：
<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>其中，函數(shù)faceReg()是自定義的面部識(shí)別注冊(cè)函數(shù)。
子函數(shù)addFacialAuth()是自定義的回調(diào)函數(shù)，用于處理身份注冊(cè)完成后FaceIO返回的用戶(hù)注冊(cè)結(jié)果數(shù)據(jù)。我們可以使用FaceIO返回的注冊(cè)結(jié)果數(shù)據(jù)，繼續(xù)執(zhí)行業(yè)務(wù)邏輯處理的下一步。
請(qǐng)注意自定義函數(shù)AjaxPost()的調(diào)用方法。它不是使用this.AjaxPost()的方法直接調(diào)用的。而是在函數(shù)faceReg()的第一行，在使用子函數(shù)addFacialAuth()中的AjaxPost()之前定義常量that。
const that = this因?yàn)樵谧雍瘮?shù)addFacialAuth()中，this.AjaxPost()是無(wú)效的。運(yùn)行時(shí)的屏幕截圖如下：
圖片
將FaceIO集成到Golang后端
在這個(gè)項(xiàng)目的代碼中，Golang用于實(shí)現(xiàn)后端服務(wù)。Golang具有良好的并發(fā)性能、內(nèi)存管理自動(dòng)化等優(yōu)點(diǎn)，因此在構(gòu)建后端服務(wù)時(shí)得到了廣泛的應(yīng)用。首先需要安裝Golang。這里我使用的是1.13.15版本。安裝Golang后，在Goland開(kāi)發(fā)工具中創(chuàng)建Golang項(xiàng)目文件，這很容易。
另外注意，在這個(gè)項(xiàng)目中，Golang中沒(méi)有持久性數(shù)據(jù)存儲(chǔ)。數(shù)據(jù)全部在內(nèi)存中，如果服務(wù)重新啟動(dòng)，數(shù)據(jù)將初始化。這是因?yàn)檫@個(gè)項(xiàng)目用作演示，所以怎么簡(jiǎn)單我就怎么來(lái)。
步驟1：創(chuàng)建HTTP服務(wù)器
在文件api_router.go中創(chuàng)建HTTP服務(wù)器。代碼如下：
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()函數(shù)將多個(gè)路由函數(shù)注冊(cè)到HTTP多路復(fù)用器中。這些路由函數(shù)將處理來(lái)自客戶(hù)端的所有請(qǐng)求。
最后，調(diào)用http.ListenAndServe()函數(shù)開(kāi)始偵聽(tīng)端口上的HTTP請(qǐng)求。當(dāng)前端向后端發(fā)送請(qǐng)求時(shí)，將執(zhí)行相應(yīng)的路由函數(shù)，并返回響應(yīng)數(shù)據(jù)。
步驟2：接收來(lái)自Vue.js前端的請(qǐng)求
為了便于代碼管理，我將所有路由函數(shù)都包含在包handlers中。例如，獲取在FaceIO中注冊(cè)的應(yīng)用程序的公共ID。這個(gè)函數(shù)的代碼在文件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", "*")這樣設(shè)置的目的是允許跨域訪問(wèn)。因?yàn)樵谖业谋镜亻_(kāi)發(fā)環(huán)境中，前端啟動(dòng)是獨(dú)立的HTTP服務(wù)器，后端啟動(dòng)也是獨(dú)立的HTTP服務(wù)器。前端和后端之間的數(shù)據(jù)交互屬于跨域訪問(wèn)。如果你是在生產(chǎn)環(huán)境中部署，則可以使用HTTP服務(wù)器運(yùn)行。例如，可以通過(guò)Nginx設(shè)置反向代理。這樣屬于同一域訪問(wèn)，就不需要這兩行代碼。
此項(xiàng)目的前端和后端數(shù)據(jù)交互都使用JSON數(shù)據(jù)格式。因此，上面的代碼調(diào)用函數(shù)json.Marshal()來(lái)格式化數(shù)據(jù)。
查看應(yīng)用程序使用情況
作為人臉識(shí)別技術(shù)服務(wù)提供商，F(xiàn)aceIO控制臺(tái)提供了許多服務(wù)。例如，面部檢測(cè)、面部搜索、面部認(rèn)證、活體檢測(cè)等這些功能都可以通過(guò)簡(jiǎn)單地調(diào)用FaceIO提供的在線JavaScript庫(kù)來(lái)實(shí)現(xiàn)。此外，在注冊(cè)并登錄到管理后端后，你可以根據(jù)業(yè)務(wù)場(chǎng)景創(chuàng)建不同的應(yīng)用程序并分配多個(gè)公共ID。每個(gè)應(yīng)用程序的使用記錄截圖如下所示：
圖片
本文簡(jiǎn)要介紹如何使用通過(guò)Vue.js和Golang集成FaceIO，來(lái)實(shí)現(xiàn)基于人臉識(shí)別的身份認(rèn)證系統(tǒng)。在Vue.js環(huán)境中，F(xiàn)aceIO提供了一個(gè)用于面部檢測(cè)和識(shí)別的在線JavaScript庫(kù)。你可以直接啟動(dòng)用戶(hù)電腦的攝像頭，將拍攝到的面部照片直接發(fā)送給FaceIO服務(wù)器進(jìn)行處理，并將識(shí)別結(jié)果返回給前端。拍攝的面部照片不需要通過(guò)應(yīng)用程序。
圖片
通過(guò)這個(gè)演示項(xiàng)目，我們不僅學(xué)習(xí)了如何使用兩種不同的編程語(yǔ)言構(gòu)建完整的web應(yīng)用程序，還學(xué)習(xí)了如何集成人臉識(shí)別技術(shù)來(lái)增強(qiáng)應(yīng)用程序的安全性和用戶(hù)體驗(yàn)。這些技能和知識(shí)可以幫助我們更好地了解計(jì)算機(jī)科學(xué)和軟件開(kāi)發(fā)，增強(qiáng)我們的專(zhuān)業(yè)競(jìng)爭(zhēng)力。保持不斷學(xué)習(xí)和進(jìn)步的態(tài)度，不斷探索，才能掌握更多的實(shí)踐技能、創(chuàng)造更多價(jià)值。
