跳到主要内容

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

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

实时预览​

导航到 控制台 > 登录与账户 > 注册与登录，点击右上角的“实时预览”按钮，将在新浏览器标签页中打开一个完整功能的 Logto 能力演示。该演示展示了我们在登录和注册流程中的体验设计方法。它高度可定制，并可无缝集成到你的应用中。

备注:

在此预览中，你需要先创建一个账户以测试体验。你可以稍后在 控制台 > 用户管理 中管理该账户。

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

开发面板​

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

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

开发面板为 OIDC 集成故障排查、令牌和声明 (Claims) 检查以及高级身份场景测试提供实时洞察。

Logto 配置​

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

备注:

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

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

刷新令牌 (Refresh token) 授权 (Authorization)​

本节详细介绍如何为不同访问类型刷新令牌 (Refresh token)。

  • Resource：如需刷新 API 资源访问令牌 (Access token)，请填写具体的 API 标识符（以空格分隔）。
  • Organization ID：如需刷新组织令牌 (Organization token)，请填写组织 ID（以空格分隔）。

更多关于如何使用刷新令牌 (Refresh token) 授权 (Authorization) 的信息，请参见 授权 (Authorization)。

备注:

在 prompt 参数中包含 consent 以获取 offline_access。只有当 prompt 包含 consent 时，才会颁发刷新令牌 (Refresh token)。

用户信息​

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

  • 获取 ID 令牌 (ID token) 声明 (Claims)：获取 ID 令牌 (ID token) 中包含的所有声明 (Claims)，如 at_hash、aud、auth_time、exp、iat、issu 以及其他用户资料。这有助于验证令牌并提取所需的用户信息。
  • 获取用户信息：通过查询 userinfo 端点，仅获取用户资料信息。
备注:

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