跳到主要内容

使用实时预览测试用户体验

你可以使用 实时预览 功能方便地测试你的登录体验配置。

实时预览​

导航到 Console > Sign-in experience，然后点击右上角的“实时预览”按钮，将打开一个新的浏览器标签页，展示 Logto 功能的完整演示。此演示展示了我们的登录和注册流程的体验设计方法。它高度可定制，可以无缝集成到你的应用程序中。

备注:

在此预览中，你需要先创建一个账户以测试体验。你可以稍后在 Console > User management 中管理此账户。

如果你尝试使用你创建的用户账户登录，并且过程顺利无误，你将被重定向到一个成功页面，显示你的标识符和 ID。

开发面板​

使用 Logto 的实时预览成功登录后，你将进入一个包含两个主要操作的仪表板：

  • 退出实时预览按钮：终止当前会话。
  • 打开开发面板按钮：启动调试工具以分析你的认证 (Authentication) 流程。

开发面板提供实时洞察，用于排查 OIDC 集成问题，检查令牌和声明，以及测试高级身份场景。

Logto 配置​

实时预览依赖于一个默认的隐藏演示应用程序，提供统一的登录体验。在 Logto 配置 部分，你可以配置认证 (Authentication) 请求中包含的认证 (Authentication) 参数，以指导 Logto OIDC 端点如何处理认证 (Authentication) 过程。这包括定义你的应用 ID，分配一个组织 ID，请求特定的权限 (Scope) 等。此设置类似于使用 LogtoProvider 初始化 LogtoClient，为你的应用程序建立 Logto 上下文。

备注:

记得保存你的配置更改。它们将在你下次使用实时预览登录时生效。

  • App ID：指定你的唯一应用 ID。这对于测试 每个应用的登录体验、资源保护策略至关重要。
  • 登录额外参数：提供额外的 认证 (Authentication) 参数 以测试自定义登录过程。例如：
  • Prompt：添加 OIDC prompt 值（以空格分隔）以指定授权 (Authorization) 服务器是否提示终端用户重新认证 (Authentication) 和授权 (Authorization)。定义的值包括：
    • login：强制重新认证 (Authentication) 终端用户。
    • consent：在与客户端共享信息之前需要用户同意。
    • none：表示不应显示任何 UI。此选项用于检查预先存在的认证 (Authentication) 或授权 (Authorization)。
  • Scope：指定声明请求的权限 (Scope)（以空格分隔）。例如：
    • 要请求用户组织详细信息，使用两个权限 (Scope)：urn:logto:scope:organizations urn:logto:scope:organization_roles
    • 要请求 API 权限 (Permissions)，在 Scope 字段中提供 权限 (Scope) 名称，并在下面的 Resource 字段中输入相应的 API 标识符。
  • Resource：输入你的应用程序需要访问的 API 资源标识符（以空格分隔）。此字段允许你的应用程序根据需要请求特定的资源访问令牌。

刷新令牌授权​

本节详细说明如何为不同的访问类型 刷新令牌：

  • Resource：如果你需要刷新 API 资源访问令牌，请输入特定的 API 标识符（以空格分隔）。
  • Organization ID：如果你需要刷新 组织令牌，请输入组织 ID（以空格分隔）。

如果同时提供了 Resource 和 Organization ID，刷新请求将返回一个支持 使用组织模板保护 API 资源 的访问令牌。

备注:

在 offline_access 的 prompt 参数中包含 consent。只有在 prompt 包含 consent 时才会发放 刷新令牌。

用户信息​

检查从你的认证 (Authentication) 流程中检索到的用户数据：

  • 获取 ID 令牌声明：检索 ID 令牌 中包含的所有声明，如 at_hash、aud、auth_time、exp、iat、issu 和其他用户配置文件。这对于验证令牌和提取必要的用户信息非常有用。
  • 获取用户信息：通过查询 userinfo 端点仅检索用户配置信息。
备注:

使用 Chrome 的开发者工具（F12 → 控制台）检查网络请求并查看令牌和声明。