向Web應(yīng)用程序添加強(qiáng)大的生物識(shí)別身份驗(yàn)證

生物識(shí)別身份驗(yàn)證允許您使用指紋或面部識(shí)別對(duì)軟件系統(tǒng)進(jìn)行身份驗(yàn)證，已經(jīng)存在了一段時(shí)間。2003年，IBM Thinkpads有一個(gè)指紋讀取器，可以讓你登錄到你的電腦。2013年，蘋(píng)果在iPhone 5S上安裝了指紋掃描儀，盡管還有其他手機(jī)首先安裝了它（你好摩托羅拉Atrix?。?/p>

但是，直到最近，Web應(yīng)用程序才可以輕松使用生物識(shí)別身份驗(yàn)證。

新的 Web 瀏覽器 API 使您可以輕松地向 Web 應(yīng)用程序添加強(qiáng)大的生物識(shí)別身份驗(yàn)證。

什么是生物識(shí)別身份驗(yàn)證

首先，讓我們談?wù)勔话愕纳矸蒡?yàn)證。生物識(shí)別身份驗(yàn)證是任何身份驗(yàn)證方法的總稱，它取決于用戶的物理屬性，例如指紋、面部或語(yǔ)音。

有三種類型的身份驗(yàn)證：

您知道的東西，例如密碼

您擁有的東西，例如設(shè)備

你是什么，比如指紋

與其他選項(xiàng)相比，生物識(shí)別身份驗(yàn)證具有顯著優(yōu)勢(shì)：

很難失去

很難偷

無(wú)法共享

你不能忘記它

讓用戶使用其生物識(shí)別進(jìn)行身份驗(yàn)證具有顯著的安全性和便利性優(yōu)勢(shì)。根據(jù)“iPhone和Android上的生物識(shí)別身份驗(yàn)證”：

可用性，感知和對(duì)采用的影響，“2015年發(fā)表的一篇論文，”......參與者發(fā)現(xiàn)Android面部解鎖和iPhone指紋解鎖在許多常見(jiàn)的使用場(chǎng)景中都易于使用。就其本質(zhì)而言，生物識(shí)別方法比基于知識(shí)的身份驗(yàn)證方法（如密碼）更難獲得。

您也不必單獨(dú)使用生物識(shí)別身份驗(yàn)證。當(dāng)與其他身份驗(yàn)證方法（如密碼或魔術(shù)鏈接）結(jié)合使用時(shí)，生物識(shí)別身份驗(yàn)證可以提供額外的安全性，而不會(huì)增加用戶體驗(yàn)的摩擦。

如何向 Web 應(yīng)用添加生物識(shí)別功能

向 Web 應(yīng)用程序添加生物識(shí)別身份驗(yàn)證的最簡(jiǎn)單方法是使用名為WebAuhn 的標(biāo)準(zhǔn)。每個(gè)主要瀏覽器都支持此功能（除了IE，對(duì)不起IE用戶！），并將友好的JavaScript API鏈接到各種基于硬件的身份驗(yàn)證方法，包括桌面和移動(dòng)操作系統(tǒng)支持的生物識(shí)別選項(xiàng)。

大多數(shù)Web瀏覽器都支持WebAuthn。

要添加基于 WebAuthn 的強(qiáng)身份驗(yàn)證（包括生物識(shí)別選項(xiàng)），請(qǐng)執(zhí)行以下高級(jí)步驟：

檢查是否支持使用 JavaScript API 測(cè)試 WebAuthn 來(lái)測(cè)試當(dāng)前瀏覽器。

提示用戶添加生物識(shí)別身份驗(yàn)證方法

將方法與帳戶關(guān)聯(lián)

下次登錄時(shí)，以某種方式識(shí)別用戶

在添加方法時(shí)設(shè)置 cookie

詢問(wèn)他們的用戶名

當(dāng)您知道他們是誰(shuí)時(shí)，提示 WebAuthn 登錄

生物識(shí)別身份驗(yàn)證器（手機(jī)或操作系統(tǒng)）將發(fā)出身份驗(yàn)證質(zhì)詢

用戶通過(guò)提供指紋或任何需要的生物識(shí)別證明來(lái)回答它

您的 JavaScript 接收并解釋來(lái)自瀏覽器的消息

如果消息指示身份驗(yàn)證成功，請(qǐng)登錄用戶

實(shí)際代碼非常簡(jiǎn)單。

若要確認(rèn)瀏覽器是否支持 WebAuthn，請(qǐng)運(yùn)行以下代碼：

if (window.PublicKeyCredential) {
  // do your webauthn stuff
} else {
  // wah-wah, back to passwords for you
}

然后，要添加生物識(shí)別身份驗(yàn)證方法，請(qǐng)調(diào)用此 JavaScript 方法：

navigator.credentials.create(options);

要提示生物識(shí)別登錄，請(qǐng)使用以下 JavaScript：

navigator.credentials.get(options);

對(duì)象至關(guān)重要，包括有關(guān)所請(qǐng)求憑據(jù)類型的信息、防止重放攻擊的隨機(jī)數(shù)以及有關(guān)請(qǐng)求網(wǎng)站的信息。規(guī)范中涵蓋了完整的詳細(xì)信息，但我們也將在下面詳細(xì)介紹該對(duì)象。optionsoptions

我們有標(biāo)準(zhǔn)

值得了解的是，允許Web應(yīng)用程序利用用戶手機(jī)的TouchID系統(tǒng)之類的東西進(jìn)行登錄的標(biāo)準(zhǔn)。您應(yīng)該了解三個(gè)主要標(biāo)準(zhǔn)：

WebAuthn，如前所述

CTAP2

菲多2

WebAuthn 也稱為 Web 身份驗(yàn)證 API。這是上面提到的標(biāo)準(zhǔn)，作為Web開(kāi)發(fā)人員，您將與之交互的主要標(biāo)準(zhǔn)。此 API 允許您與瀏覽器（如 Chrome 或 Safari）通信，以請(qǐng)求生物識(shí)別和其他身份驗(yàn)證方式。

第二個(gè)是CTAP2，它規(guī)定了瀏覽器如何與所謂的身份驗(yàn)證器交互。身份驗(yàn)證器是使用加密確定性對(duì)用戶進(jìn)行身份驗(yàn)證的硬件。在生物識(shí)別方案中，這可能是 iOS 設(shè)備或 Windows Hello。一般來(lái)說(shuō)，作為Web開(kāi)發(fā)人員，您不會(huì)關(guān)心此標(biāo)準(zhǔn)，因?yàn)闉g覽器將您與它隔離開(kāi)來(lái)，但值得知道它是混合的。

如果您對(duì)WebAuthn和CTAP2如何交互感到困惑，這里有一個(gè)圖表。在此圖中，用戶是笑臉，橙色框是TouchID或Android指紋傳感器等身份驗(yàn)證器，白色地球是瀏覽器，藍(lán)色框是網(wǎng)站。

WebAuthn 協(xié)議涉及瀏覽器到網(wǎng)站的通信，CTAP2 協(xié)議解決瀏覽器和身份驗(yàn)證器之間的通信。

最后，最后但并非最不重要的一點(diǎn)是，F(xiàn)IDO2 是傘形標(biāo)準(zhǔn)。FIDO2包括CTAP2和WebAuthn。（CTAP1 是 CTAP 的第一個(gè)版本，支持向后兼容。

什么是身份驗(yàn)證器？

身份驗(yàn)證器是實(shí)際執(zhí)行生物識(shí)別或其他形式的身份驗(yàn)證的器。雖然本文重點(diǎn)介紹生物識(shí)別身份驗(yàn)證，但身份驗(yàn)證器提供了其他方法來(lái)對(duì)用戶進(jìn)行身份驗(yàn)證。每個(gè)身份驗(yàn)證器的核心是一種生成和存儲(chǔ)公鑰/私鑰對(duì)的方法。公鑰與 Web 應(yīng)用程序共享，私鑰由身份驗(yàn)證器安全保存。

身份驗(yàn)證器可以在硬件或軟件中實(shí)現(xiàn)，但建議僅將軟件身份驗(yàn)證器（例如Chrome DevTools 中提供的身份驗(yàn)證器）用于測(cè)試，而不建議用于生產(chǎn)用途。

身份驗(yàn)證器主要分為兩類，跨平臺(tái)和平臺(tái)?？缙脚_(tái)身份驗(yàn)證器可以在多個(gè)設(shè)備上使用。平臺(tái)身份驗(yàn)證器綁定到特定設(shè)備，例如電話。大多數(shù)以消費(fèi)者為中心的生物識(shí)別身份驗(yàn)證器都集成到iOS，Android或Windows等操作系統(tǒng)中。這意味著它們綁定到給定設(shè)備，因此是平臺(tái)身份驗(yàn)證器。

身份驗(yàn)證器的另一個(gè)重要方面是它們是測(cè)試用戶狀態(tài)還是用戶驗(yàn)證。用戶狀態(tài)僅表示某人可能通過(guò)單擊按鈕與身份驗(yàn)證器進(jìn)行了交互（此交互稱為“授權(quán)手勢(shì)”）。如果在多重身份驗(yàn)證過(guò)程中使用身份驗(yàn)證器，則此類狀態(tài)測(cè)試非常有用。

另一方面，用戶驗(yàn)證可以保證進(jìn)行身份驗(yàn)證的用戶實(shí)際上是我們認(rèn)為的用戶。這可以通過(guò)提供他們知道的東西來(lái)完成，或者在生物識(shí)別情況下，使用用戶的屬性，例如他們的臉的尺寸。在大多數(shù)情況下，您會(huì)對(duì)用戶驗(yàn)證感興趣，這是常見(jiàn)的生物識(shí)別身份驗(yàn)證器提供的功能。

選擇，選擇

由于 WebAuthn API 的抽象，您無(wú)法確定用戶是否通過(guò)生物識(shí)別進(jìn)行身份驗(yàn)證。你可以采取某些措施來(lái)鼓勵(lì)它，但你不能強(qiáng)迫它。

但是，與流行操作系統(tǒng)綁定的生物識(shí)別身份驗(yàn)證是WebAuthn兼容硬件的一種非常普遍的形式，因此，如果您鼓勵(lì)用戶設(shè)置WebAuthn登錄，他們很可能會(huì)使用生物識(shí)別技術(shù)。您也可以通過(guò)網(wǎng)站上的消息傳遞來(lái)鼓勵(lì)這樣做。

即使他們不使用生物識(shí)別技術(shù)，如果您使用 WebAuthn，您也可以放心，他們將使用安全的硬件解決方案來(lái)滿足他們的身份驗(yàn)證需求。

如果 WebAuthn 身份驗(yàn)證成功，您將不知道使用了什么方法。您可以控制的內(nèi)容：

如果您希望使用跨平臺(tái)或平臺(tái)身份驗(yàn)證器。

請(qǐng)求用戶狀態(tài)或用戶驗(yàn)證。

接下來(lái)，讓我們更深入地了解使用支持 WebAuthn 的生物識(shí)別方法登錄的用戶的流程。

什么是“儀式”？

如果你讀過(guò)關(guān)于WebAuhn的文章，你可能會(huì)聽(tīng)到“儀式”這個(gè)詞。在WebAuthn的上下文中，儀式是軟件，硬件和物理實(shí)體（如人類或設(shè)備）之間的規(guī)定交互。您可以將儀式視為擴(kuò)展到物理世界的網(wǎng)絡(luò)協(xié)議。

WebAuthn 中定義了兩種類型的儀式，生物識(shí)別身份驗(yàn)證都需要這兩種儀式才能與您的 Web 應(yīng)用程序配合使用。

注冊(cè)

第一個(gè)儀式是注冊(cè)，身份驗(yàn)證器在您的網(wǎng)站上注冊(cè)。同樣，您的網(wǎng)站已向身份驗(yàn)證器注冊(cè)。注冊(cè)的最終結(jié)果是一個(gè)證書(shū)，用于以后的儀式。

要注冊(cè)身份驗(yàn)證器，請(qǐng)使用以下代碼：

navigator.credentials.create(options);

如上所述，讓我們更詳細(xì)地了解這一點(diǎn)。對(duì)象如下所示：options

options =  {
  publicKey: {
	rp: { id: "cosmosclownstore.com",
      	name: "Cosmo’s Clown Store" },
	user: { id: "1234",
        	name: "krusty@example.com",
        	displayName: "Krusty The Clown" },
	challenge: "...",
	pubKeyCredParams: [ { type: "public-key", alg: -7 }],
            authenticatorSelection: {}
	//...
  }
}

讓我們更詳細(xì)地看一下這個(gè)對(duì)象。options

首先，該字段包含有關(guān) Web 應(yīng)用程序的數(shù)據(jù)。WebAuthn 包括內(nèi)置的安全約束，例如：rp

要求所有 API 調(diào)用都從 HTTPS 提供的頁(yè)面進(jìn)行。

強(qiáng)制注冊(cè)時(shí)網(wǎng)站的標(biāo)識(shí)符與當(dāng)前主機(jī)名匹配。

注冊(cè)時(shí)，如果您希望能夠跨多個(gè)子域接受新憑據(jù)，則作為 Web 應(yīng)用開(kāi)發(fā)人員可以指定更廣泛的域。

例如，如果我使用 anof cosmosclownstore.com 注冊(cè)，但后來(lái)從托管在 app.cosmosclownstore.com 的 Web 應(yīng)用程序請(qǐng)求生物識(shí)別登錄，則將允許。rp.id

但是，如果我使用 anof app.cosmosclownstore.com 注冊(cè)，然后嘗試從托管在 store.cosmosclownstore.com 的應(yīng)用程序啟動(dòng)生物識(shí)別身份驗(yàn)證會(huì)話，則不會(huì)。rp.id

其次，您有字段，其中包含有關(guān)此用戶的信息。這會(huì)將在身份驗(yàn)證器上創(chuàng)建的憑據(jù)綁定到網(wǎng)站上的帳戶。您可能會(huì)注意到，這意味著用戶已經(jīng)在網(wǎng)站上擁有帳戶，并且新的WebAuthn憑據(jù)只是另一種身份驗(yàn)證方式，而不是主要身份驗(yàn)證方式。這通常是正確的，盡管有些身份驗(yàn)證器支持稱為“可發(fā)現(xiàn)憑據(jù)”的東西，這些憑據(jù)可以繞過(guò)此限制。user

第三，是遠(yuǎn)場(chǎng)，這是防止重播攻擊的隨機(jī)數(shù)。這是一個(gè)獨(dú)特的高熵字符串，作為 Web 應(yīng)用程序開(kāi)發(fā)人員必須提供。此質(zhì)詢將在響應(yīng)中返回，您必須驗(yàn)證它們是否相同。challenge

第四，有字段，它表明你有興趣支持什么樣的公鑰算法。數(shù)組中對(duì)象的值在此IANA 文檔中定義，但 -7（表示帶有 SHA-256 的 ECDSA）保證受支持，這是規(guī)范所要求的。pubKeyCredParams

最后，還有 thefield，它可以讓您指示此儀式的身份驗(yàn)證器的某些屬性。這包括上述跨平臺(tái)/平臺(tái)類別。authenticatorSelection

構(gòu)建對(duì)象并調(diào)用后，身份驗(yàn)證器將提示用戶為您的網(wǎng)站添加憑據(jù)。他們將從對(duì)象中看到有關(guān)您的網(wǎng)站的信息，以及有關(guān)他們?cè)趯?duì)象中的帳戶的信息。如果他們選擇注冊(cè)，您將收到回復(fù)。下面是一個(gè)示例響應(yīng)：optionsnavigator.credentials.create(options);rpuser

{
  response: {
    clientDataJSON: { 
      type: “webauthn.create”,
      challenge: ... // should match initial challenge
      origin: ... //
    },
    attestationObject: {
      authData: {
        attestedCredentialData: {
          credentialId: ..., 
          credentialPublicKey: ...,
        }
      }, // other stuff about attestation 
    }
  }
}

The interesting parts are the object, which has a couple of fields you should validate, including the , , and . Make sure these are as expected.clientDataJSONtypechallengeorigin

成功注冊(cè)的確認(rèn)發(fā)生在對(duì)象中，其中包括和。這些值必須與用戶帳戶相關(guān)聯(lián);它們將在下一個(gè)儀式（身份驗(yàn)證）中使用，這將在下面詳細(xì)討論。attestationObject.authData.attestedCredentialDatacredentialIdcredentialPublicKey

就像用戶名/密碼憑據(jù)一樣，多個(gè)用戶可以在給定的網(wǎng)站上使用生物識(shí)別身份驗(yàn)證進(jìn)行注冊(cè)。下面，Cosmo's Clown Store的網(wǎng)站保存著來(lái)自多個(gè)用戶身份驗(yàn)證器的公鑰：

每個(gè)身份驗(yàn)證器都有一個(gè)私鑰和一個(gè)相應(yīng)的公鑰，位于已注冊(cè)的站點(diǎn)上。

但是，至關(guān)重要的是，每個(gè)不同的網(wǎng)站在同一身份驗(yàn)證器上獲得不同的注冊(cè)和憑據(jù)（也稱為“密鑰”）。下面，多個(gè)網(wǎng)站持有一個(gè)公鑰，與單個(gè)用戶的身份驗(yàn)證器上的許多私鑰之一匹配：

身份驗(yàn)證器可以保存多個(gè)私鑰，每個(gè)私鑰對(duì)應(yīng)于不同的網(wǎng)站。

認(rèn)證

一旦您的用戶注冊(cè)了生物識(shí)別身份驗(yàn)證方法，他們現(xiàn)在就可以使用面部或指紋登錄。要提示生物識(shí)別登錄，請(qǐng)使用以下 JavaScript：

navigator.credentials.get(options);

同樣，對(duì)象是關(guān)鍵的。下面是一個(gè)示例對(duì)象：optionsoptions

credentialId = // value pulled from data stored at registration 

options = {
  publicKey: {
	rpId: "cosmosclownstore.com",
	challenge: "...",
	userVerification: "preferred",
	allowCredentials: [{ type: "public-key", id: credentialId }]
	//...
  }
}

在這里，這是之前注冊(cè)的網(wǎng)站標(biāo)識(shí)符。質(zhì)詢又是一個(gè)隨機(jī)字符串。指定我們是要驗(yàn)證用戶還是只測(cè)試用戶狀態(tài)。rpIduserVerification

該字段包括此登錄名允許的憑據(jù)列表。的值由服務(wù)器在注冊(cè)過(guò)程中存儲(chǔ)。因此，在發(fā)出請(qǐng)求之前，必須有其他方法來(lái)標(biāo)識(shí)用戶，以便可以從服務(wù)器端數(shù)據(jù)存儲(chǔ)區(qū)檢索正確的憑據(jù) ID。allowCredentialscredentialIdnavigator.credentials.get(options);

選項(xiàng)包括：

在他們注冊(cè)時(shí)設(shè)置 cookie

詢問(wèn)他們的用戶名

構(gòu)建對(duì)象并發(fā)出請(qǐng)求后，將返回響應(yīng)。這可能看起來(lái)像這樣：optionsget

{
  authenticatorData: {
	rpIdHash : ..., // hash of the requesting party Id
	flags : ..., // bit array including authentication results
	// other info
  },
  clientDataJSON: {
	type: "webauthn.get",
	challenge: ... // should match initial challenge
  }
}

與注冊(cè)儀式類似，驗(yàn)證對(duì)象中的值（例如the和the），以確保它們是您所期望的。challengetypeclientDataJSON

此外，檢查 the以確保該值與請(qǐng)求中呈現(xiàn)的 SHA256 哈希匹配。此值是瀏覽器看到的哈希值。如果它與 Web 應(yīng)用程序顯示的不同，則可能會(huì)受到中間人攻擊。authenticatorData.rpIdHashrpIdrpId

最后，該字段是一個(gè)位字段，其中包含身份驗(yàn)證的結(jié)果。如果用戶在場(chǎng)，則設(shè)置位 0，如果用戶已驗(yàn)證，則設(shè)置位 2。authenticatorData.flags

儀式之外

在沒(méi)有大量集成工作的情況下將生物識(shí)別身份驗(yàn)證集成到您的 Web 應(yīng)用程序中非?？?，特別是因?yàn)楝F(xiàn)在幾乎每個(gè)擁有智能手機(jī)的人口袋里都有這樣的身份驗(yàn)證器。

但是，要構(gòu)建完整的生物識(shí)別登錄系統(tǒng)，還有其他工作要做。需要注意的其他事項(xiàng)：

除非您執(zhí)行超出規(guī)范的某些操作（由中央服務(wù)器管理的“密鑰”），否則每個(gè)憑據(jù)都綁定到特定的身份驗(yàn)證器。這意味著，雖然生物識(shí)別身份驗(yàn)證作為一種替代身份驗(yàn)證方法很好，但它不應(yīng)該是唯一的方法，除非您有一個(gè)強(qiáng)大的帳戶恢復(fù)過(guò)程。否則，丟失的手機(jī)將意味著帳戶被遺棄。

雖然注冊(cè)和登錄用戶的 JavaScript 代碼非常簡(jiǎn)單，但需要做一些工作來(lái)確定用戶是否具有有效的生物識(shí)別身份驗(yàn)證器，在注冊(cè)后安全地存儲(chǔ)憑據(jù)，并提示用戶使用其生物識(shí)別憑據(jù)登錄。這個(gè)腳手架是必需的，但我還沒(méi)有看到可以幫助它的庫(kù);準(zhǔn)備好編寫(xiě)自己的邏輯。

如上所述，您可以將 WebAuthn 用作 MFA 過(guò)程的第二部分。它具有非?？咕W(wǎng)絡(luò)釣魚(yú)的能力，因?yàn)槟仨殦碛猩矸蒡?yàn)證器才能完成身份驗(yàn)證儀式。