本文將以時(shí)間維度介紹一些目前常見(jiàn)的Web驗(yàn)證方法以及相關(guān)協(xié)議，帶你了解Web驗(yàn)證的過(guò)去、現(xiàn)在與未來(lái)。

傳統(tǒng)身份驗(yàn)證方式

過(guò)去普遍的做法可能是這樣的

注冊(cè)

• 前端注冊(cè)頁(yè)面填寫(xiě)用戶(hù)名和密碼表單，發(fā)送給后臺(tái)服務(wù)器
• 后臺(tái)服務(wù)器將接收到的用戶(hù)名和密碼進(jìn)行加密并插入到數(shù)據(jù)庫(kù)，然后回饋是否成功的信息給前端頁(yè)面。

登錄

• 前端登錄頁(yè)面填寫(xiě)用戶(hù)名和密碼表單，發(fā)送給后臺(tái)服務(wù)器
• 后臺(tái)服務(wù)器將接收到的用戶(hù)名和密碼進(jìn)行加密后與數(shù)據(jù)庫(kù)儲(chǔ)存信息進(jìn)行對(duì)比，如果賬號(hào)密碼一致則返回給前端登錄成功信息，不一致則返回失敗信息。

這種做法存在普遍問(wèn)題

• 當(dāng)?shù)卿洯h(huán)境不安全時(shí)，輸入密碼時(shí)可能被監(jiān)控
• 發(fā)送密碼到服務(wù)器的過(guò)程中可能被劫持
• 密碼存儲(chǔ)在數(shù)據(jù)庫(kù)如果被黑客攻擊可能造成大量密碼泄露

這種做法最大的問(wèn)題在于你需要輸入密碼

• 人們通常使用一個(gè)密碼應(yīng)對(duì)所有賬號(hào)，而攻擊者獲取密碼的方式又?jǐn)?shù)不勝數(shù)，一旦在某個(gè)疏于防備的瞬間泄露了一個(gè)密碼，那么該用戶(hù)所有賬號(hào)都將面臨巨大安全風(fēng)險(xiǎn)

第三方登錄方式

現(xiàn)在，越來(lái)越多的站點(diǎn)開(kāi)放了第三方登錄的功能，使得賬號(hào)密碼登錄不再是唯一的身份驗(yàn)證方式，在可以進(jìn)行第三方登錄的站點(diǎn)，人們通常選擇使用第三方登錄的方式進(jìn)行身份驗(yàn)證。實(shí)現(xiàn)第三方登錄有兩種協(xié)議，分別為OpenID開(kāi)放認(rèn)證協(xié)議與OAuth開(kāi)放授權(quán)協(xié)議

OpenID和OAuth完全是為了兩種不同的需求而生，OpenID的目標(biāo)是為了幫助網(wǎng)站確認(rèn)一個(gè)用戶(hù)的身份 ，OAuth的目標(biāo)是為了授權(quán)第三方在可控范圍下訪問(wèn)用戶(hù)資源，OAuth有兩個(gè)版本，OAuth1.0由于其實(shí)現(xiàn)較為復(fù)雜，已經(jīng)基本被OAuth2.0所取代，以下分別對(duì)兩種協(xié)議進(jìn)行講解

OpenID 開(kāi)放認(rèn)證協(xié)議

定義

• OpenID是一個(gè)去中心化的網(wǎng)上身份認(rèn)證系統(tǒng)。對(duì)于支持OpenID的網(wǎng)站，用戶(hù)不需要記住像用戶(hù)名和密碼這樣的傳統(tǒng)驗(yàn)證標(biāo)記。取而代之的是，他們只需要預(yù)先在一個(gè)作為OpenID身份提供者（identity provider, IdP）的網(wǎng)站上注冊(cè)，比如google。OpenID是去中心化的，任何網(wǎng)站都可以使用OpenID來(lái)作為用戶(hù)登錄的一種方式，任何網(wǎng)站也都可以作為OpenID身份提供者。OpenID既解決了問(wèn)題而又不需要依賴(lài)于中心性的網(wǎng)站來(lái)確認(rèn)數(shù)字身份。
• OpenID是專(zhuān)為登錄認(rèn)證而生，它使用簡(jiǎn)單，門(mén)檻很低。一個(gè)網(wǎng)站如果想要接入OpenID認(rèn)證是非常簡(jiǎn)單的，不需要?jiǎng)?chuàng)建應(yīng)用，不需要App Key，不需要Secret，只需要將用戶(hù)導(dǎo)向OpenID Provider的Entry并帶上Callback，用戶(hù)只要同意提供信息，你就可以拿到這個(gè)用戶(hù)的唯一標(biāo)識(shí)。對(duì)于站點(diǎn)來(lái)說(shuō)只要有人使用Google OpenID授權(quán)并返回這個(gè)唯一標(biāo)識(shí)那就是我在登錄。

優(yōu)點(diǎn)

• 使用門(mén)檻變低，免去注冊(cè)流程，且用戶(hù)不再需要輸入密碼，可直接使用第三方登錄，有利于產(chǎn)品的廣泛傳播
• 由于客戶(hù)端不在需要輸入密碼，很大程度上減少了安全風(fēng)險(xiǎn)，客戶(hù)端不接觸用戶(hù)密碼，服務(wù)器端更易于集中保護(hù)

缺點(diǎn)

• 依賴(lài)開(kāi)放平臺(tái)的安全防護(hù)能力，因?yàn)殚_(kāi)放平臺(tái)本身也可能是使用賬號(hào)密碼登錄或者其他第三方平臺(tái)登錄，所以開(kāi)放平臺(tái)本身也會(huì)出現(xiàn)一定的安全風(fēng)險(xiǎn)。如果開(kāi)放平臺(tái)本身出現(xiàn)安全問(wèn)題，那么所有與其關(guān)聯(lián)的第三方認(rèn)證站點(diǎn)都將會(huì)出現(xiàn)安全問(wèn)題
• 依賴(lài)開(kāi)放平臺(tái)的認(rèn)證，如果開(kāi)放平臺(tái)的穩(wěn)定性不達(dá)標(biāo)，會(huì)導(dǎo)致自身登錄穩(wěn)定性差。如第三方平臺(tái)暫時(shí)不可用，則自身登錄也不可用，如果開(kāi)放平臺(tái)惡意不給予認(rèn)證，那么用戶(hù)將無(wú)法登錄，這個(gè)在較大的站點(diǎn)上是致命的。
• 用戶(hù)流失的風(fēng)險(xiǎn)，因?yàn)橛脩?hù)只記得是用第三方登錄的，而往往不是該網(wǎng)站的帳號(hào)，弱化了自身賬號(hào)的影響力。

OAuth2.0 開(kāi)放授權(quán)協(xié)議

定義

• 提到OAuth，可以想像這樣一幅畫(huà)面，在一個(gè)炎熱且忙碌的夏天，小明與妻子在公司不分晝夜的趕著項(xiàng)目，可家里又有老人需要照顧，所以小明決定請(qǐng)一個(gè)保姆照顧老人，但是又覺(jué)得如果保姆能在家里亂走的話(huà)很不放心，就授權(quán)給保姆一個(gè)只能打開(kāi)老人房門(mén)且有效期僅為7天的臨時(shí)密碼憑證，之后一周內(nèi)保姆拿著這個(gè)臨時(shí)密碼憑證便可以不經(jīng)過(guò)小明同意隨意出入老人房間，但不能進(jìn)入小明和他妻子的房間。
• 我們把上面的例子搬到互聯(lián)網(wǎng)，就是 OAuth 的設(shè)計(jì)了，OAuth與OpenID最大的區(qū)別就是，OpenID是一種認(rèn)證協(xié)議，是開(kāi)放平臺(tái)給第三方一個(gè)能夠代表用戶(hù)身份的唯一標(biāo)識(shí)，而OAuth是一種授權(quán)協(xié)議。授權(quán)允許第三方直接從開(kāi)放平臺(tái)讀取用戶(hù)信息。

優(yōu)點(diǎn)

• 使用門(mén)檻變低，免去注冊(cè)流程，且用戶(hù)不再需要輸入密碼，可直接使用第三方登錄，有利于產(chǎn)品的廣泛傳播
• 由于客戶(hù)端不在需要輸入密碼，很大程度上減少了安全風(fēng)險(xiǎn)，客戶(hù)端不接觸用戶(hù)密碼，服務(wù)器端更易于集中保護(hù)
• 客戶(hù)可以具有不同的信任級(jí)別，級(jí)別越高，可獲取資料越多

缺點(diǎn)

• 依賴(lài)開(kāi)放平臺(tái)的安全防護(hù)能力，因?yàn)殚_(kāi)放平臺(tái)本身也可能是使用賬號(hào)密碼登錄或者其他第三方平臺(tái)登錄，所以開(kāi)放平臺(tái)本身也會(huì)出現(xiàn)一定的安全風(fēng)險(xiǎn)。如果開(kāi)放平臺(tái)本身出現(xiàn)安全問(wèn)題，那么所有與其關(guān)聯(lián)的第三方認(rèn)證站點(diǎn)都將會(huì)出現(xiàn)安全問(wèn)題
• 依賴(lài)開(kāi)放平臺(tái)的授權(quán)，如果開(kāi)放平臺(tái)的穩(wěn)定性不達(dá)標(biāo)，會(huì)導(dǎo)致自身登錄穩(wěn)定性差。如開(kāi)放平臺(tái)暫時(shí)不可用，則自身登錄也不可用，如果開(kāi)放平臺(tái)惡意不給予授權(quán)，那么用戶(hù)將無(wú)法登錄，這個(gè)在較大的站點(diǎn)上是致命的。
• 用戶(hù)流失的風(fēng)險(xiǎn)，因?yàn)橛脩?hù)只記得是用第三方登錄的，而往往不是該網(wǎng)站的帳號(hào)，弱化了自身賬號(hào)的影響力。
• 站點(diǎn)獲取到開(kāi)放平臺(tái)用戶(hù)的臨時(shí)權(quán)限后利用這些權(quán)限來(lái)做什么完全由該站點(diǎn)決定，在一定程度上會(huì)帶來(lái)安全隱患。

第三方登錄總結(jié)

第三方登錄簡(jiǎn)化了注冊(cè)登錄流程，用戶(hù)在使用時(shí)大部分情況下都不需要輸入賬號(hào)密碼來(lái)進(jìn)行登錄操作，但第三方登錄依賴(lài)開(kāi)放平臺(tái)，開(kāi)放平臺(tái)依然需要進(jìn)行賬號(hào)密碼的儲(chǔ)存與管理，而且當(dāng)開(kāi)放平臺(tái)出現(xiàn)安全事故時(shí)，所有通過(guò)該平臺(tái)登錄的站點(diǎn)都將面臨安全風(fēng)險(xiǎn)。

2FA 雙因素認(rèn)證

什么是雙因素認(rèn)證

• 雙因素認(rèn)證也叫二次驗(yàn)證就是指同時(shí)使用兩種及以上能夠證明自己身份的方式進(jìn)行驗(yàn)證，雙因素認(rèn)證就是在使用用戶(hù)名密碼登錄網(wǎng)站、應(yīng)用、賬號(hào)之后，還需要一個(gè)驗(yàn)證碼才能正常登錄。
• 其實(shí)雙因素認(rèn)證早在十幾年前就已經(jīng)開(kāi)始應(yīng)用，諸如短信驗(yàn)證碼、郵件驗(yàn)證碼、動(dòng)態(tài)令牌、RSA電子動(dòng)態(tài)令牌等都屬于雙因素認(rèn)證。各大網(wǎng)銀廣泛使用的各種盾、各種 Key 其實(shí)也屬于雙因素認(rèn)證，包括短信驗(yàn)證碼，它能夠讓用戶(hù)的數(shù)據(jù)多一層保護(hù)。

常見(jiàn)的雙因素認(rèn)證方法

• 第一種是短信驗(yàn)證，也是目前較為常用的，每一次認(rèn)證時(shí)會(huì)生成短信驗(yàn)證碼發(fā)送到指定手機(jī)上，輸入的內(nèi)容與發(fā)送的內(nèi)容一致則完成認(rèn)證。
• 第二種是認(rèn)證APP，基于TOTP的加密算法，利用應(yīng)用與認(rèn)證APP共同持有的種子密鑰，每隔30秒生成一個(gè)新的6位驗(yàn)證碼，應(yīng)用與APP之間的驗(yàn)證碼一致則完成驗(yàn)證，通常在公司內(nèi)部使用的VPN就是采用這種方式來(lái)進(jìn)行身份驗(yàn)證。
• 第三種是登錄確認(rèn)的方式，這種方式不需要輸入驗(yàn)證碼，而是通過(guò)登錄確認(rèn)點(diǎn)擊的方式來(lái)完成雙因素認(rèn)證的過(guò)程，這種方式是通過(guò)公鑰加密算法來(lái)確認(rèn)你的身份，應(yīng)用會(huì)生成一個(gè)密鑰對(duì)，私鑰存儲(chǔ)在本地，公鑰發(fā)送給服務(wù)端作為用戶(hù)信息存儲(chǔ)，當(dāng)用戶(hù)進(jìn)行登錄操作時(shí)，服務(wù)端會(huì)用公鑰加密一段信息發(fā)送到你的設(shè)備上，只有擁有正確私鑰的設(shè)備才能解密并完成二次認(rèn)證。

優(yōu)點(diǎn)

• 必須通過(guò)兩種及以上的驗(yàn)證才能確認(rèn)身份，安全性較高

缺點(diǎn)

• 使用門(mén)檻變高，登錄多了一步，費(fèi)時(shí)且麻煩，不有利于產(chǎn)品的廣泛傳播
• 2FA 不意味著賬戶(hù)的絕對(duì)安全，入侵者依然可以通過(guò)克隆SIM卡、盜取cookie或token等方式進(jìn)行攻擊
• 一旦忘記密碼或者遺失手機(jī)，想要恢復(fù)登錄，勢(shì)必就要繞過(guò)雙因素認(rèn)證，這就形成了一個(gè)安全漏洞。除非準(zhǔn)備兩套雙因素認(rèn)證，一套用來(lái)登錄，另一套用來(lái)恢復(fù)賬戶(hù)。

Web驗(yàn)證的未來(lái) WebAuthn

WebAuthn是什么？

• WebAuthn是由W3C萬(wàn)維網(wǎng)聯(lián)盟發(fā)布的 Web 標(biāo)準(zhǔn)。WebAuthn 是FIDO聯(lián)盟指導(dǎo)下的FIDO2項(xiàng)目的核心組成部分。WebAuthn的目標(biāo)就是提供一系列標(biāo)準(zhǔn)化的協(xié)議，讓用戶(hù)告別過(guò)去繁瑣且不安全的賬號(hào)密碼登錄方式，以實(shí)現(xiàn)安全的無(wú)密登錄體驗(yàn)為目的。
• WebAuthn 徹底拋棄了傳統(tǒng)的賬號(hào)密碼登錄方式，它允許用戶(hù)直接使用設(shè)備的指紋識(shí)別、面部識(shí)別、虹膜識(shí)別、聲音識(shí)別、實(shí)體密鑰（USB連接、藍(lán)牙連接、NFC連接）等方式來(lái)進(jìn)行登錄驗(yàn)證。

體驗(yàn)WebAuthn

https://demo.yubico.com/webauthn-technical/registration

• windows 10 用戶(hù)可以購(gòu)買(mǎi)型號(hào)為yubikey 5 NFC版密鑰，插入設(shè)備的USB接口后訪問(wèn)以上網(wǎng)址體驗(yàn)WebAuthn。
• 有touch bar功能的macbook可以直接訪問(wèn)以上網(wǎng)址體驗(yàn)WebAuthn。
• iphone 用戶(hù)可以購(gòu)買(mǎi)型號(hào)為yubikey 5 NFC版密鑰，打開(kāi)以上網(wǎng)址后將密鑰放在手機(jī)背后通過(guò)密鑰NFC的驗(yàn)證功能體驗(yàn)WebAuthn。
• Android/ target=_blank class=infotextkey>安卓用戶(hù)可以在手機(jī)開(kāi)啟GMS服務(wù)并升級(jí)Google Play為最新版后訪問(wèn)以上網(wǎng)址體驗(yàn)WebAuthn。

優(yōu)點(diǎn)

• 使用WebAuthn進(jìn)行賬號(hào)登錄的安全性非常高
• 即不需要輸入密碼，又不需要征求第三方授權(quán)，直接利用設(shè)備的生物識(shí)別功能，登錄流程非常簡(jiǎn)單快速，有利于產(chǎn)品的廣泛傳播

缺點(diǎn)

• 目前還不成熟，國(guó)內(nèi)大部分站點(diǎn)都不支持使用WebAuthn登錄

WebAuthn學(xué)習(xí)資料

1. 想要快速了解WebAuthn可以參考我的PPT，并結(jié)合Demo源碼來(lái)學(xué)習(xí)

PPT：https://ppt.baomitu.com/d/129a784a
Demo源碼：https://github.com/hanyonggang/WebAuthnDemo

2. 有關(guān)WebAuthn詳細(xì)用法，可以查閱W3C或MDN的官方文檔。

總結(jié)

WebAuthn的無(wú)密登錄體驗(yàn)無(wú)論在安全性方面還是在易用性方面都是未來(lái)更好的選擇，預(yù)計(jì)在不久的將來(lái)有望成為主流的Web驗(yàn)證方式。也希望我們能夠早日使用上這樣的無(wú)密登錄體驗(yàn)吧！

希望本文能幫助到您！

點(diǎn)贊+轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容（收藏不點(diǎn)贊，都是耍流氓-_-）

關(guān)注 ｛我｝，享受文章首發(fā)體驗(yàn)！

每周重點(diǎn)攻克一個(gè)前端技術(shù)難點(diǎn)。更多精彩前端內(nèi)容私信 我 回復(fù)“教程”

原文鏈接：https://mp.weixin.qq.com/s/-PlSYKTgu9h-bYMknTKNkw

作者：韓永剛