跳至主要內容

使用即時預覽測試使用者體驗

你可以使用 即時預覽 功能方便地測試你的登入體驗配置。

即時預覽​

導航至 Console > Sign-in experience，然後點擊右上角的「即時預覽」按鈕，將開啟一個新的瀏覽器標籤頁，展示 Logto 功能的完整演示。此演示展示了我們的登入和註冊流程的體驗設計方法。它高度可自訂，並可無縫整合到你的應用程式中。

備註:

在此預覽中，你應該先創建一個帳戶以測試體驗。稍後你可以在 Console > User management 中管理此帳戶。

如果你嘗試使用創建的使用者帳戶登入並且過程順利無誤，你將被重定向到一個成功頁面，顯示你的識別符和 ID。

開發面板​

使用 Logto 的即時預覽成功登入後，你將進入一個儀表板，其中包含兩個主要操作：

  • 登出即時預覽按鈕：終止當前會話。
  • 開啟開發面板按鈕：啟動調試工具以分析你的驗證流程。

開發面板提供即時洞察以排除 OIDC 整合故障，檢查權杖和宣告，並測試進階身分情境。

Logto 配置​

即時預覽依賴於一個隱藏的演示應用程式，預設提供統一的登入體驗。在 Logto 配置 部分，你可以配置包含在驗證請求中的驗證參數，以指示 Logto OIDC 端點如何處理驗證過程。這包括定義你的應用程式 ID、分配組織 ID、請求特定權限範圍等。此設置類似於使用 LogtoProvider 初始化 LogtoClient，為你的應用程式建立 Logto 上下文。

備註:

記得保存你的配置更改。它們將在下次使用即時預覽登入時生效。

  • App ID：指定你的唯一 App ID。這對於測試 每個應用程式的登入體驗、資源保護策略至關重要。
  • 登入額外參數：提供額外的 驗證參數 以測試自訂登入過程。例如：
  • Prompt：新增 OIDC prompt 值（以空格分隔）以指定授權伺服器是否提示終端使用者重新驗證和授權。定義的值包括：
    • login：強制重新驗證終端使用者。
    • consent：在與客戶端共享資訊前需要使用者授權。
    • none：表示不應顯示任何 UI。此選項用於檢查是否存在預先驗證或授權。
  • Scope：指定宣告請求的權限範圍（以空格分隔）。例如：
    • 若要請求使用者組織詳細資訊，使用兩個權限範圍：urn:logto:scope:organizations urn:logto:scope:organization_roles
    • 若要請求 API 權限，在 Scope 欄位中提供 權限範圍名稱，並在下方的 Resource 欄位中輸入對應的 API 標識符。
  • Resource：輸入應用程式需要存取的 API 資源標識符（以空格分隔）。此欄位允許你的應用程式根據需要請求特定資源存取權杖。

重新整理權杖授權​

此部分詳細說明如何為不同存取類型 重新整理權杖：

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

如果同時提供 Resource 和 Organization ID，重新整理請求將返回一個支援 使用組織模板保護 API 資源 的存取權杖。

備註:

在 prompt 參數中包含 consent 以獲取 offline_access。只有在 prompt 包含 consent 時才會發行 重新整理權杖。

使用者資訊​

檢查從你的驗證流程中檢索的使用者數據：

  • 獲取 ID 權杖宣告：檢索 ID 權杖 中包含的所有宣告，例如 at_hash、aud、auth_time、exp、iat、issu 和其他使用者資料。這對於驗證權杖和提取必要的使用者資訊非常有用。
  • 獲取使用者資訊：通過查詢 userinfo 端點僅檢索使用者資料資訊。
備註:

使用 Chrome 的開發者工具（F12 → Console）檢查網路請求並查看權杖和宣告。