跳到主要内容

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

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

实时预览​

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

备注:

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

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

开发面板​

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

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

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

Logto 配置​

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

备注:

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

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

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

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

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

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

备注:

对于 offline_access，请在 prompt 参数中包含 consent。只有在 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)。