從 Chrome 123 開始,您可以搭配使用網域提示和 Federated Credential Management API (FedCM)。開發人員可以透過 Domain Hint API,只顯示他們接受的網域中的聯合登入帳戶,進而提供更優質的使用者體驗。
Domain Hint 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 的指紋向量。相反地,Chrome 會照常執行 FedCM 要求,並篩除不符合 navigator.credentials.get()
呼叫指定 domainHint
值的帳戶。接著,Chrome 會向使用者顯示 FedCM 對話方塊,並列出新帳戶。這個方法與登入提示 API 類似,但這兩個 API 會回答不同的問題。Login Hint API 旨在回答「哪個 ID 是我想找的使用者?」,而 Domain Hint 則旨在回答「這個帳戶必須屬於哪家公司或伺服器?」
使用 domainHint: "any"
時,Chrome 會篩除沒有任何網域的帳戶 (也就是未傳入或為空的 domain_hints
)。舉例來說,這可用於以下用途:RP 只允許使用者在註冊程序中建立受管理帳戶。
如果沒有任何帳戶與 domainHint
相符,FedCM 對話方塊會顯示登入提示,讓使用者登入與 RP 要求提示相符的 IdP 帳戶。使用者輕觸提示時,系統會開啟彈出式視窗,其中包含設定檔中指定的登入網址。然後附加登入提示和網域提示查詢參數。

domainHint
相符時的登入提示範例。