跳至主要內容

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

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

即時預覽 (Live preview)​

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

備註:

在此預覽中，你需先建立帳號以測試體驗。稍後可於 主控台 > 使用者管理 管理該帳號。

若你以所建立的使用者帳號登入且流程順利，將會被導向成功頁面，顯示你的識別資訊與 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) 請求的權限範圍（以空格分隔）。例如：
    • 若要請求使用者組織資訊，請使用兩個權限範圍：urn:logto:scope:organizations urn:logto:scope:organization_roles
    • 若要請求 API 權限，請於 Scope 欄位填入權限範圍名稱，並於下方 Resource 欄位輸入對應的 API 標識符。
  • 資源 (Resource)：輸入你的應用程式需要存取的 API 資源標識符（以空格分隔）。此欄位允許你的應用請求特定資源的存取權杖。

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

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

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

更多關於如何使用重新整理權杖授權 (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)。