建站
咨詢
售后
建站咨詢
新聞中心
?譯者 | 陳峻
審校 | 孫淑娟
眾所周知，在向用戶提供某種服務(wù)或銷售某些產(chǎn)品時(shí)，身份認(rèn)證是Web應(yīng)用的一個(gè)非常重要的方面。它不但能夠幫助服務(wù)提供方將非法用戶拒之門外，而且可以跟蹤用戶的使用狀況。過(guò)去，基于電子郵件和密碼組合的身份認(rèn)證方式曾廣為流行。而隨著時(shí)間的推移，大型科技公司收獲了龐大的用戶群，并相應(yīng)推出了OAuth的新認(rèn)證概念。即：作為站點(diǎn)的所有者，您信任OAuth提供者對(duì)于用戶實(shí)施的身份認(rèn)證結(jié)果。而作為回報(bào)，OAuth提供者需要向您提供該用戶的詳細(xì)信息。
基于OAuth的身份認(rèn)證對(duì)用戶來(lái)說(shuō)十分簡(jiǎn)單。他們只需在OAuth提供商處維護(hù)一個(gè)帳戶，并使用該帳戶登錄其他所有的相關(guān)網(wǎng)站即可。整個(gè)認(rèn)證機(jī)制都交由OAuth來(lái)完成。
一段時(shí)間過(guò)后，無(wú)密碼身份認(rèn)證出現(xiàn)了。其基本過(guò)程是，當(dāng)您輸入用戶名或電子郵件時(shí)，后臺(tái)會(huì)向您發(fā)送一個(gè)鏈接。如果您將該鏈接粘貼到瀏覽器中，它將自動(dòng)進(jìn)行身份認(rèn)證并完成登錄。
而隨著數(shù)據(jù)集變得越來(lái)越大，人工智能（AI）和機(jī)器學(xué)習(xí)（ML）不斷迭代和進(jìn)步，其準(zhǔn)確性也得到了大幅提升。如今，我們可以使用面部識(shí)別技術(shù)在Web應(yīng)用中對(duì)用戶進(jìn)行身份認(rèn)證。
下面，我將使用FaceIO APIs，構(gòu)建一個(gè)簡(jiǎn)單的應(yīng)用，以演示如何使用面部識(shí)別技術(shù)，對(duì)用戶進(jìn)行身份認(rèn)證。
一、為什么需要基于面部識(shí)別的身份認(rèn)證?
基于面別識(shí)別的身份認(rèn)證有五項(xiàng)優(yōu)點(diǎn)：
1、比傳統(tǒng)方法更快：在面部認(rèn)證方法中，您只需單擊一個(gè)按鈕，即可啟動(dòng)身份認(rèn)證過(guò)程，而且能夠在一毫秒內(nèi)完成。而在上述提到的基于電子郵件與密碼的傳統(tǒng)方法中，您必須在鍵盤上逐個(gè)輸入字母信息，而在收到認(rèn)證碼后，還得一邊盯著認(rèn)證碼，一邊小心地輸入數(shù)字。
2、不需要專門的硬件：面部認(rèn)證技術(shù)的唯一要求就是攝像頭。而現(xiàn)在，所有的智能手機(jī)都默認(rèn)帶有攝像頭，大多數(shù)臺(tái)式機(jī)也都被額外配置了網(wǎng)絡(luò)攝像頭。因此，用戶無(wú)需為該技術(shù)專門增配硬件。
3、減少社交平臺(tái)上的冒名頂替：面部認(rèn)證最重要的特點(diǎn)便是可以防止冒名頂替。在社交平臺(tái)上，許多黑客會(huì)冒充他人去創(chuàng)建虛假賬戶，以實(shí)施數(shù)字犯罪。而在面部識(shí)別技術(shù)的幫助下，社交平臺(tái)可以識(shí)別創(chuàng)建新帳戶的用戶是否確屬本人。
4、減少機(jī)器人和自動(dòng)化腳本的攻擊：雖然機(jī)器人和自動(dòng)化腳本可以幫助人們擺脫重復(fù)性的任務(wù)，但是黑客也可以使用它們向他人發(fā)送垃圾郵件、或猜測(cè)密碼。顯然，無(wú)論是機(jī)器人還是自動(dòng)化腳本都不具備面部特征，無(wú)法完成身份認(rèn)證。
5、注重隱私：如今，隱私已成為了人們時(shí)常關(guān)注的話題。我們將使用的FaceIO API，在身份認(rèn)證過(guò)程中采用的是端到端的加密方式。在后端，它們能夠安全地、且僅存儲(chǔ)面部特征的哈希值。這完全符合GDPR和CCPA的要求。
二、一個(gè)面部認(rèn)證項(xiàng)目
下面，我將向您展示一個(gè)面部認(rèn)證Web應(yīng)用的制作過(guò)程。
1.安裝所需的依賴項(xiàng)
創(chuàng)建一個(gè)空白目錄，并在其中創(chuàng)建一個(gè)index.html文件。當(dāng)然，您也可以添加一個(gè)單獨(dú)的CSS文件。在此，我僅展示最簡(jiǎn)單的主要方面。
如果您使用VSCode進(jìn)行開發(fā)，那么可以使用live-server來(lái)提供靜態(tài)文件。在index.html中，我們首先添加如下最基本的HTML標(biāo)簽。
Document
左右滑動(dòng)查看完整代碼FaceIO提供了一個(gè)非常方便的Javascript庫(kù)，來(lái)與其AI模型進(jìn)行交互，并讓我們只需幾行代碼，便可以實(shí)現(xiàn)面部識(shí)別功能。為此，我們需要通過(guò)如下代碼，在HTML文檔的body標(biāo)簽中，添加其CDN（內(nèi)容交付網(wǎng)絡(luò)）。
下面，我們需要?jiǎng)?chuàng)建一個(gè)index.js文件，并將該文件鏈接到FaceIO的CDN之后的body標(biāo)簽內(nèi)。
接著，讓我們創(chuàng)建2個(gè)幫助函數(shù)（helper function），以簡(jiǎn)化開發(fā)過(guò)程。其中的一種可用于注冊(cè)用戶（如，注冊(cè)函數(shù)），另一種則用于身份認(rèn)證（如，登錄函數(shù)）。
2.注冊(cè)用戶
FaceIO同樣通過(guò)提供Javascript庫(kù)的方式，來(lái)簡(jiǎn)化用戶的注冊(cè)過(guò)程。首先，我們?cè)贖TML標(biāo)簽中添加一個(gè)帶有id="enroll"的按鈕。我們可以使用getElementbyID方法去訪問(wèn)Javascript文件中的該按鈕。
接著，我們使用如下代碼，來(lái)初始化index.js里面的FaceIO對(duì)象。為了給FaceIO項(xiàng)目添加公共ID，您可以在項(xiàng)目?jī)x表板中直接產(chǎn)生此類公共ID。
const faceio = new faceIO("讓我們?cè)谧?cè)按鈕中添加一個(gè)事件監(jiān)聽器，以便當(dāng)有人點(diǎn)擊該按鈕時(shí)，便可執(zhí)行FaceIO對(duì)象的注冊(cè)方法。該注冊(cè)方法可使用如下備選參數(shù)：
（1）locale是用戶的本地語(yǔ)言。
（2）permissions timeout是等待用戶授予訪問(wèn)攝像頭權(quán)限的秒數(shù)。
（3）termsTimeout是等待用戶接受FaceIO相關(guān)條款和條件的秒數(shù)。
（4）idleTimeout是嘗試識(shí)別人臉時(shí)等待的總秒數(shù)。
（5）replyTimeout是等待從FaceIO節(jié)點(diǎn)接收處理后的面部數(shù)據(jù)的秒數(shù)。
（6）userConcent是一個(gè)布爾值，表示用戶是否同意掃描他們的面部。如果您已經(jīng)征得用戶的同意，則可以將該值設(shè)置為true。
（7）payload是在注冊(cè)函數(shù)中，您可以添加的、以鍵值對(duì)象存在的有效負(fù)載。您可以使用該有效負(fù)載功能，附加電子郵件或與用戶相關(guān)的其他信息。如下代碼段展示了本例中的注冊(cè)函數(shù)：
enroll.addEventListener("click", async () => {
let response = await faceio.enroll({
locale: "auto",
payload: {
email: "[email protected]",
pin: "12345",
},
});
console.log(` Unique Facial ID: ${response.facialId}
Enrollment Date: ${response.timestamp}
Gender: ${response.details.gender}
Age Approximation: ${response.details.age}`);
});運(yùn)行此函數(shù)時(shí)，用戶面前會(huì)出現(xiàn)一個(gè)包含有各種條款和條件的彈窗。只有用戶點(diǎn)擊接受，應(yīng)用方可請(qǐng)求攝像頭的訪問(wèn)權(quán)限。而只有用戶授予了攝像頭的訪問(wèn)權(quán)限，F(xiàn)aceIO才能開始掃描面部。
FaceIO模型會(huì)去尋找能夠?qū)⒂脩襞c他人區(qū)分開來(lái)的獨(dú)特面部特征。完成后，您需要為自己的面部數(shù)據(jù)添加一個(gè)PIN碼，并且妥善保存。
當(dāng)上述所有步驟完成后，F(xiàn)aceIO會(huì)向用戶返回一個(gè)包含著用戶faceID的userInfo對(duì)象。此ID是一個(gè)通用的唯一標(biāo)識(shí)符，可用來(lái)對(duì)應(yīng)其性別和年齡（畢竟人工智能模型很容易預(yù)測(cè)到用戶的性別和年齡）。此類faceID會(huì)被存儲(chǔ)在應(yīng)用的后端，以便在用戶登錄時(shí)，通過(guò)匹配faceID的方式去認(rèn)證用戶。
在工作流程中，如果發(fā)生任何錯(cuò)誤，F(xiàn)aceIO會(huì)提供大量的錯(cuò)誤消息。而如果用戶不允許應(yīng)用訪問(wèn)攝像頭的話，fioErrCode.PERMISSION_REFUSED則會(huì)提示錯(cuò)誤。同樣，如果用戶不接受條款和條件的彈窗的話，服務(wù)器則會(huì)拋出fioErrCode.TERMS_NOT_ACCEPTED的錯(cuò)誤。
3.認(rèn)證用戶
為了啟動(dòng)身份認(rèn)證流程，請(qǐng)?jiān)贖TML標(biāo)簽中添加一個(gè)帶有id="authenticate"的按鈕，并在getElementbyID方法的幫助下，訪問(wèn)位于index.js內(nèi)部的該按鈕?，F(xiàn)在，當(dāng)用戶按下此按鈕時(shí)，我們將能夠啟動(dòng)簡(jiǎn)單的身份認(rèn)證流程。整個(gè)認(rèn)證函數(shù)會(huì)涉及到permissionTimeout、idleTimeout、replyTimeout、以及前面提到的enroll()等局部函數(shù)。下面展示了對(duì)應(yīng)的代碼段：
authenticate.addEventListener("click", async () => {
let response = await faceio.authenticate({
locale: "auto",
});
console.log(` Unique Facial ID: ${response.facialId}
PayLoad: ${response.payload}
`);
});當(dāng)用戶按下認(rèn)證按鈕時(shí)，屏幕上會(huì)彈出類似注冊(cè)功能的界面。它同樣需要您的攝像頭訪問(wèn)權(quán)限，以掃描面部信息。掃描完成后，它會(huì)要求您輸入在注冊(cè)期間設(shè)置的PIN碼。如果PIN碼提供正確，F(xiàn)aceIO會(huì)返回您在注冊(cè)過(guò)程中設(shè)定的面部數(shù)據(jù)和有效負(fù)載。
此外，您也可以通過(guò)匹配服務(wù)器中的FaceID，來(lái)仔細(xì)檢查身份認(rèn)證的流程。
至此，我們的身份認(rèn)證流程已完成。您可以看到它比使用電子郵件加密碼的身份認(rèn)證流程要更簡(jiǎn)潔。也就是說(shuō)，我們可以把所有繁重的工作都交由FaceIO服務(wù)器、及其AI模型去完成。作為開發(fā)人員，您只需添加應(yīng)用程序邏輯，修改身份認(rèn)證流程，以及提高用戶體驗(yàn)即可。
4.隱私功能
如前文所述，F(xiàn)aceIO也擁有強(qiáng)大的隱私保護(hù)功能，具體而言：
FaceIO服務(wù)完全符合GDPR和CCPA：此處的GDPR是于2018年通過(guò)的《通用數(shù)據(jù)保護(hù)條例》。它要求所有企業(yè)都應(yīng)保護(hù)用戶的個(gè)人數(shù)據(jù)和隱私。而CCPA則是《加州消費(fèi)者保護(hù)法》的縮寫。它讓用戶可以更好地控制自己的數(shù)據(jù)。如果您在這些地區(qū)開展業(yè)務(wù)，就需要遵守這兩部法律。
FaceIO僅存儲(chǔ)用戶的面部特征的哈希值：由于客戶端的代碼庫(kù)和組件并不處理任何生物特征數(shù)據(jù)，而且是在后端完成所有的過(guò)程，因此它并不會(huì)存儲(chǔ)任何未處理過(guò)的數(shù)據(jù)，且盡可能少地存儲(chǔ)其他相關(guān)信息。
三、常見問(wèn)答
1.FaceIO是否獨(dú)立于瀏覽器？
FaceIO完全與瀏覽器無(wú)關(guān)。它可以運(yùn)行在包括Chrome、Firefox和Safari在內(nèi)的任何瀏覽器上。而且由于所有處理都在服務(wù)器上完成的，因此FaceIO只需擁有攝像頭訪問(wèn)權(quán)限即可運(yùn)行。當(dāng)然，如果您使用某些通過(guò)禁用Javascript來(lái)保護(hù)隱私的瀏覽器，那么由于FaceIO需要使用Javascript與服務(wù)器通信，因此請(qǐng)務(wù)必啟用之。
2.我們無(wú)需從頭開始構(gòu)建模型嗎？
是的。對(duì)于那些有人工智能和機(jī)器學(xué)習(xí)基礎(chǔ)的人來(lái)說(shuō)，他們可能會(huì)選擇從頭開始構(gòu)建模型，并在自己的Web應(yīng)用中實(shí)現(xiàn)面部認(rèn)證的相關(guān)功能。但是由于大多數(shù)Web開發(fā)人員不一定具備此能力，因此使用現(xiàn)有的服務(wù)來(lái)實(shí)現(xiàn)服務(wù)功能，而無(wú)需重復(fù)發(fā)明輪子往往是明智之舉。目前，市場(chǎng)上也有其他競(jìng)品方案。例如，由AWS提供的AWS Rekognition，具有與FaceIO類似的工作方式。您甚至可以在FaceIO控制面板中選擇AWS Rekognition。
3.隱藏公共ID
正如前文提到的您必須在啟動(dòng)FaceIO對(duì)象期間，提供公共ID。您可以按需使用環(huán)境變量將其隱藏。如果您用到了某個(gè)前端框架或構(gòu)建系統(tǒng)，則可以在構(gòu)建時(shí)動(dòng)態(tài)添加ID。例如，如果您使用Nextjs，則可以使用.env.local文件，來(lái)保存敏感憑據(jù)。
當(dāng)然，如果您不使用任何框架，則可以使用支持環(huán)境變量的Vite。它能夠構(gòu)建和壓縮您的vanilla js項(xiàng)目，以加快部署速度。您只需創(chuàng)建一個(gè).env文件，并將所有憑據(jù)放入其中即可。不過(guò)，請(qǐng)不要忘記將該.env文件放入自己的.gitignore列表中。
網(wǎng)站題目：如何在Web應(yīng)用中使用面部識(shí)別來(lái)認(rèn)證用戶
地址分享：http://fisionsoft.com.cn/article/dhippdi.html
