發布日期：2026 年 5 月 12 日
登入的即時 UI 模式是一項網頁功能，可簡化登入流程。當使用者點選「登入」或「結帳」等按鈕，準備登入時，這項功能可主動提供密碼金鑰和管理密碼。
摘要
如果沒有本機可用的憑證，立即 UI 模式會立即失敗。這項行為與 Android 和 iOS 等行動平台上的 API 類似。preferImmediatelyAvailableCredentials如果憑證存在，瀏覽器會立即向使用者顯示登入對話方塊。否則，系統會以無訊息方式拒絕 Promise，讓您提供替代登入方法 (例如登入表單)，不會中斷使用者體驗。
自 2026 年 5 月起，只有 Chrome 瀏覽器支援即時 UI 模式。
查看需求條件
如要使用即時 UI 模式，使用者必須在裝置本機上擁有符合資格的憑證。在 Chrome 中，這些憑證包括：
- 儲存在密碼金鑰供應商 (例如 Google 密碼管理工具、Windows Hello 或 iCloud 鑰匙圈) 中的密碼金鑰。
- 儲存在 Google 密碼管理工具中的密碼。
如果沒有本機憑證，API 會拒絕要求，不會顯示即時登入對話方塊。
偵測功能支援
呼叫即時 UI 模式前，請先使用 PublicKeyCredential.getClientCapabilities() 方法，確認瀏覽器是否支援 immediateGet 功能。如果系統不支援密碼金鑰，請改用現有的登入方式，例如電子郵件和密碼表單、電話號碼驗證或社群登入。
async function checkImmediateAvailability() {
try {
const capabilities = await PublicKeyCredential.getClientCapabilities();
if (capabilities.immediateGet) {
console.log("Immediate UI mode is supported.");
} else {
console.log("Immediate UI mode is NOT supported.");
}
} catch (error) {
console.error("Error checking client capabilities:", error);
}
}
如要支援更多瀏覽器，請使用 WebAuthn Polyfills GitHub 存放區提供的 Polyfill。
要求憑證
如要觸發立即登入流程，請呼叫 navigator.credentials.get()，並將 uiMode 欄位設為 'immediate'。
在要求中加入 password: true，如果瀏覽器支援密碼憑證，使用者就能享有這項體驗。
// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
event.preventDefault();
try {
const cred = await navigator.credentials.get({
password: true,
publicKey: {
challenge: serverGeneratedChallenge,
rpId: 'example.com'
},
uiMode: 'immediate',
});
// Handle successful sign-in
} catch (error) {
if (error.name === 'NotAllowedError') {
// Provide a fallback sign-in experience
showFallbackUI();
}
}
});
您必須在 catch 區塊中處理 NotAllowedError，才能提供備用登入體驗。
處理登入流程
您可以針對兩種主要情況導入即時 UI 模式。
使用按鈕登入
提供專用的登入按鈕，讓使用者享有乾淨的使用體驗，不會看到非預期的提示。
- 使用者點選「登入」按鈕。
- 您的網站會使用
uiMode: "immediate"呼叫navigator.credentials.get()。 - 瀏覽器會檢查本機憑證。
- 如果瀏覽器找到憑證，會立即顯示登入對話方塊，供使用者選取帳戶。
- 如果瀏覽器找不到憑證，或使用者關閉即時登入對話方塊，系統會擲回
NotAllowedError。 - 如果擲回
NotAllowedError，網站就會繼續顯示標準登入頁面。
結帳前請先登入
在使用者執行需要驗證的動作前，主動提供憑證，例如在網路店面啟動結帳程序。
在電子商務中，訪客使用者通常會選擇登入現有帳戶，或是以訪客身分結帳。提供即時登入對話方塊，可簡化回訪顧客的結帳流程。
- 使用者發起動作，例如在購物流程中點選「結帳」按鈕。
- 您的網站會使用
uiMode: "immediate"呼叫navigator.credentials.get()。 - 如果存在憑證，使用者會選取其中一個來完成登入。
- 如果沒有憑證，瀏覽器會擲回錯誤，且不會顯示即時登入對話方塊。使用者體驗不會受到影響，您可以將使用者帶往現有的結帳畫面，該畫面可能會提供其他登入選項或訪客結帳表單。
檢查隱私權和安全性措施
瀏覽器會採取重要措施來保護使用者隱私：
- 使用者手勢規定：您必須透過使用者手勢 (例如點選) 啟動 API 呼叫，防止無聲探查。通話不會消耗啟用次數。
- 無痕模式限制：無痕或私密工作階段中的要求一律會擲回
NotAllowedError。 - 沒有允許清單：如果要求包含非空白的
allowCredentials清單，系統會擲回NotAllowedError，防止跨工作階段追蹤。 - 無法以程式輔助方式取消：您無法使用
signal參數，以程式輔助方式關閉立即登入對話方塊。