FedCM 更新:Domain Hint API

在 Chrome 123 版中,您可以使用網域提示Federated Credential Management API (FedCM)。透過 Domain Hint API,開發人員可以只顯示來自接受網域的聯合登入帳戶,藉此提供更優質的使用者體驗。

網域提示 API

FedCM 可讓使用者利用識別資訊提供者 (IdP) 提供的帳戶資訊,輕鬆登入依賴方 (RP,參照網站)。但是在某些情況下,RP 必須知道只有與特定網域相關聯的帳戶才能登入網站。這在企業情境中尤其常見,而存取的網站僅限公司網域使用。為了提供更優質的使用者體驗,FedCM API 允許 RP 只顯示可用於登入 RP 的帳戶。這可避免使用者嘗試透過公司網域外的帳戶登入 RP 時,只會因為未使用正確的帳戶類型,而顯示稍後的錯誤訊息 (或停止登入無法運作的位置)。

透過 Domain Hint API,RP 可以在 FedCM API 呼叫中指定 domainHint 屬性,只顯示相符的使用者帳戶。IdP 可以在帳戶清單端點的回應中提供 domain_hints 屬性,指出帳戶所連結的網域。如此一來,瀏覽器就能顯示相符的帳戶,而不會將要求的網域提示提供給 IdP。

帳戶清單端點的 JSON 回應範例如下所示:

{
 "accounts": [{
   "id": "1234",
   "given_name": "John",
   "name": "John Doe",
   "email": "john_doe@idp.example",
   "picture": "https://idp.example/profile/123",
   "approved_clients": ["123", "456", "789"],
  }, {
   "id": "5678",
   "given_name": "Johnny",
   "name": "Johnny",
   "email": "johnny@idp.example",
   "picture": "https://idp.example/profile/456"
   "approved_clients": ["abc", "def", "ghi"],
   "domain_hints": ["corp.example"]
  }]
}

RP 可以使用 domainHint 屬性呼叫 navigator.credentials.get() 來篩選帳戶。舉例來說,假設使用者造訪 corp-partner.example,並使用 corp.example 的帳戶登入。網站會叫用 API,如下所示:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "abc",
      nonce: nonce,
      domainHint : "corp.example"
    }]
  }
});

domainHint 值不會傳送至帳戶清單端點以進行伺服器端篩選,因為這是傳送給 IdP 的指紋向量。而是會照常執行 FedCM 要求,並篩除與 navigator.credentials.get() 呼叫指定的 domainHint 值不符的帳戶。接著,Chrome 會向使用者顯示新帳戶清單,顯示 FedCM 對話方塊。這個方法與 Login Hint API 類似,但這兩個 API 會回答不同的問題。Login Hint API 旨在回答「我要為使用者的 ID 為何?」,而 Domain Hint 的目標是回答「這個帳戶必須屬於哪個公司或伺服器?」。

使用 domainHint: "any" 時,Chrome 會篩除沒有任何網域 (即 domain_hints 不會傳遞或空白) 的帳戶。例如,當 RP 僅允許代管帳戶在註冊程序中。

如果沒有帳戶與 domainHint 相符,FedCM 對話方塊會顯示登入提示,讓使用者能登入與 RP 要求提示相符的 IdP 帳戶。使用者輕觸提示時,系統會開啟彈出式視窗,其中包含設定檔中指定的登入網址。連結後方會附加登入提示和網域提示查詢參數。

如果沒有任何帳戶與 domainHint 相符,便會顯示登入提示範例。
沒有帳戶符合 domainHint 時的登入提示範例。