跳至主要內容

使用即時預覽 (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)：提供額外的驗證 (Authentication) 參數以測試自訂登入流程。例如：
  • Prompt：新增 OIDC prompt 參數（以空格分隔），指定授權伺服器是否要求終端使用者重新驗證 (Authentication) 或同意。可用值如下：
    • login：強制終端使用者重新驗證 (Authentication)。
    • consent：要求使用者同意後才與客戶端分享資訊。
    • none：表示不顯示任何 UI。用於檢查是否已有驗證 (Authentication) 或同意。
  • Scope：指定宣告 (Claims) 請求的權限範圍 (Scopes)（以空格分隔）。例如：
    • 若要請求使用者組織資訊，請使用兩個權限範圍：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)。