初探 WebAuthn UAF 的無密碼 Passwordless 登入技術

Posted on2022-10-20 Edit on2024-02-26 by jimmysu

前陣子看到幾個國際科技大公司不約而同都在發 passwordless 無密碼登入的新聞，登入不用記密碼，聽起來很酷炫，再多加搜尋都會找到 FIDO, WebAuthn 之類的技術名詞，讓人想到那個行動自然人憑證(TW FIDO)，註冊就有點麻煩，要用自然人憑證和讀卡機插電腦，然後每次在電腦上登入時還要多拿一支手機來刷臉，在手機上登入要跨應用程式跳轉來跳轉去，手機有時候卡一下就逾時的那個東西嗎?

稍微摸了一下發現別有洞天，而 TW FIDO 只是產品名稱，行動自然人憑證 TW FIDO 的使用體驗未必會在 FIDO 上復刻，跟各大科技廠在推的概念有點雷同，但不是同一個東西。

這些不是無密碼登入

這些國際大型科技公司和金融公司現在在推的無密碼登入，跟目前市面上一些比較特別的神奇登入方式，完全不是同一個層級的東西，目標更加遠大。
先盤點一下目前比較特別的登入方式，還有他們跟 passwordless 有什麼不同

Windows 的 Active Directory(AD)

使用者透過 Windows 使用帳號登入網頁或一些微軟的軟體，實際上還是有密碼，有心人士偷偷記下別人的密碼，一樣可以登入作壞事。

手機 APP 掃 QRCode 登入

要在電腦或平板登入微信、bilibili、LINE 電腦版、Discord，可以使用手機 APP 掃 QRCode 登入，雖然登入不用打密碼，但使用者的 LINE、微信、B站帳號背後的系統伺服器還是以某種方式儲存著「使用者密碼」，而且通常還要開發 APP、APP 必須是登入狀態，使用者用起來才會順。

Single sign-on(SSO)

一些遊戲或購物網站使用 Facebook, Google, LINE, Apple 帳號登入，這個是 Single sign-on(SSO)，網站的應用程式透過 API 傳來的使用者 ID 來做驗證。而使用者的 Facebook, Google, LINE, Apple 帳號本身當然還是有密碼的，不是完全無密碼。
而線上服務為了怕這些社群服務掛掉，導致使用者就無法登入，或是有些使用者就是不想用這些社群帳號註冊登入，還是有設計傳統登入流程和密碼欄位。

MFA 多因素驗證碼

輸入帳號密碼登入之後，還要再到信箱/簡訊/Authenticator APP 拿到一組暫時驗證碼才能成功登入，這個是多因素驗證(MFA)，那些驗證碼多半是用 TOTP (基於時間的一次性密碼演算法)的機制，跟無密碼登入沒什麼關係。

信箱簡訊登入碼

有些國外的網路服務是輸入使用者名稱後，直接收 email 點一次性連結，或是用簡訊收到的一次性編號，就可以完成註冊跟登入，雖然整個流程完全不用打密碼，但是這個有收發郵件收發簡訊的成本跟各種雷點。

Web3 加密錢包登入

玩過國外一些 NFT 或 GameFi 的 Web3 項目的可能都有經驗，註冊或登入時不用填一堆什麼個資或密碼，只要用 Metamask 之類的加密錢包點一下就可以登入驗證了，這個之前的文章已經摸索過，跟 FIDO 的這個 Passwordless 也沒什麼關係。
不過有些加密錢包註冊時還是有密碼，或是電腦開機初次打開錢包時要輸入密碼呀。

傳統的登入機制顯然有很多痛點，開發者需要以某種方式儲存並妥善管理使用者的密碼，還有設計萬無一失的重設密碼機制，還要擔心可能遇到機器人自動 try 帳密、人機驗證被破解、撞庫(Credential-Stuffing)、使用者在釣魚網站自己送上帳密…等各種攻擊方式。

更複雜的登入機制，除了增加開發和維護時間，也表示我可能還要幫使用 Authenticator 遇到問題的人做 Authenticator APP 的客服，幫電信商解釋為什麼有使用者收不到簡訊，幫電子郵件業者解釋為什麼有使用者收不到信。

我的理念就是要減少開發複雜度、減少客服時間、提升安全性，那來研究一下 FIDO 這玩意有沒有什麼幫助?
先講結論，還是挺麻煩的啊

常見名詞簡介

FIDO : Fast IDentity Online，FIDO 聯盟於 2012 年 7 月成立，官網是 FIDO Alliance，成員有一些國際科技業者像 Google，微軟和金融業者 MasterCard，VISA…商議了跟聯盟名稱一樣的 FIDO 和 FIDO2 的數位識別標準。
U2F : Universal 2nd Factor，使用 YubiKey 之類的硬體作為驗證金鑰的標準規格。
UAF : Universal Authentication Framework，使用設備本身的認證機制，如 iOS 的TouchID/FaceID，Android 手機的 PIN 解鎖或各種刷臉掃指紋機制。
WebAuthn: Web Authentication API，現代網頁瀏覽器提供的 API 功能，各大主流瀏覽器和 iOS13~16+ 支援，但是 IE 不支援，LINE 跟 FB 裡面的瀏覽器也是沒反應。
CTAP : Client-to-Authenticator Protocol，客戶端至驗證器協定，WebAuthn API 與硬體的驗證機制溝通用的規範標準。
CBOR : Concise Binary Object Representation，簡明二進制物件表示法，一種資料格式，上述功能牽涉與硬體溝通的相關部分，跟動輒送一大包資料的網路程式開發不一樣，實作時發現滿多部分都需要將資料做格式轉換處理，這也是開發中的其中一小環。

用 FIDO 來做 passwordless，簡單來說就是讓瀏覽器跟裝置之間做溝通，中間出現的什麼視窗、訊息，都有可能隨作業系統與瀏覽器而長得不一樣，是開發者與設計師完全無法控制或美化的。

要兼顧網頁端與行動端，Passwordless 豈是如此不便之物?

使用一些範例程式或是相關廠商的展示程式，都發現一些共同的使用者體驗問題啊

可以在下面這邊試玩一下無密碼登入的註冊跟登入流程。

尚未進行任何操作

預期操作
1.輸入一組 email
2.然後點擊註冊，
3.會出現神奇的驗證視窗，
4.正常走完流程的話，網頁會自動顯示註冊成功。
5.註冊成功之後。會跑出登入按鈕
6.一樣掃 QR Code 登入之後。網頁會自動顯示成功登入，

註 : 本 DEMO 僅用於體驗無密碼註冊與登入流程，不是用 WordPress 套件，沒有特別做後端驗證或紀錄資料，也不用擔心資料會被記錄，網頁重新整理之後就要重新註冊。也沒有設計檢查資料是否重複，或是防止偷填別人的資料然後拿自己的手機來驗證的情況。

點了沒反應，或是出現一些不知道啥的訊息無法完成註冊? 這很正常啊，下面來聽我踩坑的經驗…

沒有藍牙的 Windows 10 電腦使用 Google Chrome

例如使用者用一台 Windows10 的普通桌上型電腦，插著有線網路，不是新的高階電腦，什麼 WiFI6 天線、藍芽、紅外線攝影機、指紋辨識器的功能當然是通通都沒有。

操作時可能會先跳出一個詢問「安全性金鑰設定」，然後要使用者插入硬體金鑰，

馬上遇到第一個問題，使用者電腦根本沒有這東西，還跑出來讓人選?
為了無密碼，要多買 YubiKey 之類的東西，然後占掉一個 PC USB 孔? 有點麻煩啊。

沒藍芽的 Windows PC 就沒辦法使用無密碼登入了?
如果電腦有視訊鏡頭，而且視訊鏡頭有紅外線偵測功能，可以選取 [Windows Hello 臉部] 設定使用電腦紅外線照相機或外部紅外線照相機的臉部辨識登入。
如果是筆電或是一些有指紋辨識功能的鍵盤，可以選取 [Windows Hello 指紋] 設定使用指紋辨識器進行登入。
如果通通都沒有，可以另外設定 [Windows Hello PIN] 設定使用 PIN 進行登入。

PIN 一不小心打錯就會變成鎖定狀態，然後那個 PIN 視窗就不給輸入了，需要重新開機才能重試。

為了 Passwordless，使用者註冊網路服務不用打密碼、記密碼，但是要記得電腦本機的 PIN 碼，感覺好像哪裡怪怪的? 也許要等這個機制全面推廣起來，才真的有效益吧。

有藍牙的 Windows 10 電腦使用 Google Chrome

Windows10 的普通桌上型電腦，但插了個 USB 藍芽接收器，在 Google Chrome 重新試一遍，畫面又長得不一樣了。

選項主要會有三個
– 使用外部的安全金鑰或是內部的感應器 : 就是剛剛的 Windows Hello 的那幾個，指紋辨識跟紅外線相機我都沒有，PIN 又因為打錯被鎖要重開機
– 使用手機掃描QR圖碼 : 點了之後會自動跑出一個 Chrome 小恐龍的 QR Code
– 跑出幾支綁定此 Google 帳號的 Android 手機 : 那為什麼沒有我的 iPhone 或 iPad? 這看來不是我能控制的。

使用手機掃描QR圖碼大概長這樣

用一支有 TouchID 的 iOS16 手機為例，掃描後會跑出一個「儲存通行密鑰」的按鈕，依照畫面指示操作，密鑰就存好了。電腦上的網頁程式這邊也會自動得到 credentialId 和公鑰，網站的開發者在拿到資料之後要把東西存起來，然後顯示一個綁定成功的訊息。
這樣就註冊成功了，使用者除了解鎖手機之外，真的不用輸入密碼。

可以把 authenticatorAttachment 從 cross-platform 調整成 platform，QR Code 的選項就會消失，強制只能用本機硬體來認證。但現階段找不到只保留 QR Code 註冊和登入，把硬體金鑰鎖的選項藏起來的法子。

上面這是最幸福美滿的狀態，不出意外的話，就要出意外了。

以一台 FaceID 的 iOS15 手機為例，掃描後點選儲存密鑰，會跑出不知所云的訊息，無法完成流程。

在手機的設定沒找到什麼啟用同步平台的，Xcode 的 preferences > developer 裡面也沒看出要怎麼設定。(應該是 iOS15 不支援)

而且這些訊息在 IPhone 上都是無法截圖的，一按下截圖的組合鍵，底部這個長得像 Activity views 元件的東西就會消失，非得用螢幕錄影的才能保留下來。
這下可好了，如果碰到功能無法正常使用的，使用者回報問題只會說「沒辦法登入」「掃了不能用」「手機沒空間錄影」，半點訊息都講不出來? 光是問出到底發生什麼問題，半個小時一個小時又過去了。

如果功能流程設計成不管怎樣就是要用手機無密碼認證，沒有其他替代方案，
除了有各種瀏覽器、作業系統相容性的神奇問題，
手機沒網路也是沒辦法用。
不過手機 4G 上網，電腦接有線網路，這樣還是可以驗證通過的。

有藍牙的 Windows 10 電腦使用 Firefox

桌上型電腦接上藍芽接收器後，不用買硬體金鑰，不用買指紋辨識跟紅外線相機設備，不用記 PIN 碼，輕鬆就可以用手機掃碼完成註冊。

但是剛剛用的都是 Google Chrome，版本 106.0.5249.119 (正式版本) (64 位元)，其他瀏覽器是否也能成功?
IE11 試過了，因為不支援所以點了沒反應。
改用 Firefox，剛剛弄老天的 QRCode 掃描視窗又不知道跑哪去了，還多了一個「某某網域會看到安全性金鑰的製作和建模」的可怕訊息?

剛剛有提到 authenticatorAttachment 可以控制一些驗證方式，推測是因為 Firefox 的 authenticatorAttachment 是 No support，所以只能插硬體金鑰。

MDN – Web Authentication API

Windows 7 電腦使用 Google Chrome

Google Chrome 版本只有 64 ，一開始是得到 NotReadableError: An unknown error occurred while talking to the credential manager. 的錯誤訊息，認證視窗根本跳不出來，而 Caniuse – webauthn 寫說 Google Chrome 至少需要版本號 67 以上。

更新瀏覽器之後成功彈出來認證視窗，但是有的網頁範例就是可以比別人多一句出來….造訪紀錄要怎麼偷拿呢?

沒有生物辨識裝置的Ｍac Mini 和 macOS Monterey

蘋果電腦不管是筆電、iMac、Mac mini 全系列都內建藍芽，筆電也有配備指紋解鎖，Apple Silcon 的桌機機型還可以買有 TouchID 指紋辨識功能的 Apple 巧控鍵盤，但這些東西我都沒有，只有藍牙。

在 macOS Monterey(12.5.1) 的 Google Chrome 上操作，跟在 Windows 一樣，可以選擇硬體金鑰或是手機掃 QR Code，感覺沒什麼問題(如下圖)

使用 Safari，奇變陡生，手機掃 QR Code 的選項不見了，訊息視窗還變成英文的(如下圖)，當然就卡在這邊無法完成驗證。

因為我的 Intel CPU Mac mini 設備升不上去 macOS Ventura，所以不曉得 macOS Safari 跟著新版作業系統升級之後，是否能變得更好用。

Macbook Air M1 和 macOS Ventura

這筆電有指紋解鎖，macOS Ventura 的官方網頁介紹有一大塊介紹通行密鑰的，想必是輕鬆秒殺？結果情況從糟糕變得難以理解…

macOS Ventura 是在這篇文章寫完之後過幾天才發布正式版更新，更新前先用 Monterey+Safari 來試一下
結果在 cross-platform 的參數下，竟然沒叫我掃指紋，也沒叫我刷手機 QR Code，又是叫人插密鑰

而且訊息視窗還是中文的，明明都是 Safari，都是 Monterey，同一個測試網頁，操作畫面長得跟上面那段Ｍac Mini 的完全不一樣。

升級 macOS Ventura 之後，在 cross-platform 的選項下，還是沒叫我掃指紋，也沒叫我刷手機 QR Code，又叫人插密鑰

只好更改參數成 platform，總算出現比較順暢的流程…

選擇儲存到其他裝置，會出現下圖畫面
如果藍牙有開的話，會直接顯示一個 QR Code

更改參數成 platform，在 Google Chrome 就比較沒有什麼問題，除了操作畫面又長得很不一樣…

在 cross-platform 參數的情況，Safari 會只剩叫人插入不存在的密鑰的選項，Google Chrome 會出現刷手機條碼之類的一大塊預期操作介面，
在 platform 參數的情況，Safari 可以刷筆電指紋或是手機掃條碼，但 Google Chrome 卻只剩刷指紋或是打電腦密碼的選項，
這功能又是個跨瀏覽器＆跨作業系統的地獄吧！

iPhone 直接註冊和登入

在正常情況下，iPhone 可以用自己的 TouchID 或 FaceID 完成儲存通行密鑰的操作(下圖)

然後在手機的 iCloud KeyChain 裡面可以看到密鑰資訊(下圖)
iOS 的 UI 上面還說密鑰會使用 iCloud 在所有裝置間同步。

但是不出意外的話，就要出意外了，以下解鎖更多 iOS FIDO 的錯誤訊息…

使用有藍芽的 Windows 10 電腦，然後拿 iPhone 上面 LINE 的相機去掃註冊流程的 QR Code。跑出不知所云的訊息，連接此裝置? 看起來是 LINE 不能連，只有用 Safari 就可以連。(下圖)

手機上直接點擊註冊按鈕，跑出很麻煩的選項，一台有生物辨識驗證功能的 iPhone 需要另一台來掃? 或是還要再生一台 NFC 密鑰設備?(下圖)
這個可以嘗試修改 authenticatorAttachment 或 transports 的參數，才會有一開始那種最簡單的驗證步驟。

或是沒有理由，就是不停的轉轉轉

在蘋果 iOS16 與 macOS 13 (Ventura) 的網頁上都有一大塊版面介紹 Passkey 這新功能，看起來這就是讓舊系統 iOS15 Safari 跟 macOS Montery Safari 卡在奇怪地方的關鍵…

Android 手機登入

使用一支有指紋辨識的 Android 8 手機進行測試，想不到竟然意外的順利，
除了手機一定要設定螢幕鎖定密碼，或是偶爾連不上(下圖)

讓手機當成電腦金鑰的跨裝置驗證，或是手機自己當金鑰，都輕鬆秒殺，跟神功護體一樣。

問題總結

串接 WebAuthn 的時候，極有可能在各種作業系統、瀏覽器、硬體裝置環境下出現各種讓人卡住的操作，例如

只有插入安全性金鑰可以選
手機跑出將裝置連接到 Xcode，請用同步平台…之類的訊息
同一台電腦，A瀏覽器能刷手機，B瀏覽器只能插硬體金鑰
各瀏覽器顯示的訊息和操作畫面各不相同，或是讓使用者覺得緊張不安全
修改參數，本來能刷手機 QR Code 的變成只能插硬體金鑰或其他異常情況
APP內的瀏覽器支援性較差，出現非預期操作或訊息
在手機上跑出掃描 QR Code 畫面
認證時一直轉圈圈或出現不明錯誤

傳統密碼登入要終結了嗎?

把密碼存在瀏覽器、存在 Password manager 不是用得好好的嗎? 一般公司沒有程式開發人員的，真不曉得誰會沒事去改登入系統驗證機制。

以往聽到大公司推廣某某技術，背後通常有利益，但推行無密碼機制對大公司有什麼特別的好處?
Yubikey 之類的 USB 硬體金鑰或 NFC 硬體金鑰最低大概台幣 1000 上下就買得到，一支最貴通常也不會超過美金 100 塊，難道這東西很容易壞，很好賺?
也許一些提供簡化型 FIDO/Webauthn API 服務的國外業者可以賺月費?
賣 Windows Hello 相容性設備，像指紋鑰匙、高階視訊攝影機的業者，可以提升銷量?

稍微摸過了這些東西之後，重新回頭檢驗一下蘋果新聞稿的說法:

無密碼登入可以防範網路釣魚，登入安全性也將大幅躍升
確實不用怕帳密被人偷走，以後記得隨時把手機或硬體金鑰隨時帶在身邊啊。

讓使用者在多種裝置 (包括全新裝置) 上，自動存取他們的 FIDO 登入憑證 (或稱為「密鑰」)，而無須重新註冊每個帳戶
iCloud 說會自動同步，反正蘋果說的都是對的，不可質疑。沒有用蘋果全家餐的自己耗子尾汁。

讓使用者在行動裝置上使用 FIDO 認證，以透過附近的裝置登入 app 或網站，無論這些裝置執行的是何種 OS 平台或瀏覽器皆然
根本在喇叭，實測 APP 裡面的瀏覽器，還有太舊的作業系統，根本就跑不起來。

下方截一張相關 API 廠商的瀏覽器相容性圖

Does your current browser support WebAuthn?

更詳細的瀏覽器支援性可以參考 MDN – Web Authentication API。