跳至主要內容

使用即時預覽 (Live preview) 測試使用者體驗

你可以利用 即時預覽 (Live preview) 功能，方便地測試你的登入體驗設定。

即時預覽 (Live preview)​

前往 主控台 > 登入體驗 (Sign-in experience)，點擊右上角的「即時預覽 (Live preview)」按鈕，即可在新分頁開啟一個完整展示 Logto 能力的互動式範例。這個範例展示了我們對登入與註冊流程的體驗設計方式，具有高度自訂性，並可無縫整合至你的應用程式。

備註:

在此預覽中，你需先建立一個帳號以測試體驗。稍後可在 主控台 > 使用者管理 (User management) 中管理此帳號。

若你使用所建立的使用者帳號登入並順利完成流程，將會被導向一個成功頁面，顯示你的識別資訊與 ID。

開發面板 (Dev panel)​

使用 Logto 的即時預覽 (Live Preview) 成功登入後，你會進入一個儀表板，包含兩個主要操作：

  • 登出即時預覽按鈕 (Sign out the live preview button)：結束目前的會話。
  • 開啟開發面板按鈕 (Open dev panel button)：啟動除錯工具，分析你的驗證 (Authentication) 流程。

開發面板 (Development Panel) 提供即時洞察，協助你排查 OIDC 整合問題、檢查權杖與宣告 (Claims)，並測試進階身分情境。

Logto 設定 (Logto Config)​

即時預覽 (Live Preview) 預設依賴一個隱藏的範例應用，提供統一的登入體驗。在 Logto 設定 (Logto Config) 區塊，你可以設定驗證 (Authentication) 請求中包含的參數，指示 Logto OIDC 端點如何處理驗證流程。這包括設定你的 App ID、指定組織 ID、請求特定權限範圍 (Scopes) 等。這個設定類似於用 LogtoProvider 初始化 LogtoClient，為你的應用建立 Logto context。

備註:

請記得儲存你的設定變更。下次使用即時預覽 (Live Preview) 登入時才會生效。

  • App ID：指定你的唯一 App ID。這對測試 應用程式專屬登入體驗、資源保護政策等非常重要。
  • 登入額外參數 (Sign-in extra parameters)：提供額外的 驗證參數 以測試自訂登入流程。例如：
  • Prompt：新增 OIDC prompt 參數值（以空格分隔），指定授權伺服器是否要求終端使用者重新驗證 (Authentication) 或同意。可用值如下：
    • login：強制終端使用者重新驗證 (Authentication)。
    • consent：要求使用者在與客戶端分享資訊前給予同意。
    • none：表示不應顯示任何 UI。此選項用於檢查是否已存在驗證 (Authentication) 或同意。
  • Scope：指定宣告 (Claims) 請求的權限範圍（以空格分隔）。例如：
    • 若要請求使用者組織資訊，請使用兩個權限範圍：urn:logto:scope:organizations urn:logto:scope:organization_roles
    • 若要請求 API 權限，請在 Scope 欄位填入權限範圍名稱，並在下方 Resource 欄位填入對應的 API 識別碼。
  • Resource：輸入你的應用程式需要存取的 API 資源 (API resource) 識別碼（以空格分隔）。此欄位允許你的應用請求特定資源存取權杖 (Access token)。

重新整理權杖 (Refresh token) 授權 (Grant)​

本區說明如何針對不同存取類型 重新整理權杖 (Refresh tokens)。

  • Resource：若需重新整理 API 資源 (API resource) 存取權杖 (Access token)，請輸入特定 API 識別碼（以空格分隔）。
  • Organization ID：若需重新整理組織權杖 (Organization token)，請輸入組織 ID（以空格分隔）。

更多關於如何使用重新整理權杖 (Refresh token) 授權 (Grant) 的細節，請參閱 授權 (Authorization)。

備註:

若需 offline_access，請在 prompt 參數中包含 consent。只有當 prompt 包含 consent 時才會發放 重新整理權杖 (Refresh token)。

使用者資訊 (User info)​

檢查從你的驗證 (Authentication) 流程取得的使用者資料：

  • 取得 ID 權杖 (ID token) 宣告 (Claims)：取得 ID 權杖 (ID token) 中所有宣告 (Claims)，如 at_hash、aud、auth_time、exp、iat、issu 及其他使用者資料。這有助於驗證權杖並擷取所需的使用者資訊。
  • 取得使用者資訊 (Fetch user info)：僅查詢 userinfo 端點以取得使用者個人資料資訊。
備註:

可使用 Chrome 的開發者工具（F12 → Console）檢查網路請求，並檢視權杖與宣告 (Claims)。