在你自己的页面上登录

大多数 App 会把用户送到环境的 Lobby 去登录。如果你更希望让用户留在自己的页面上，@usher/react 中的 <SignIn /> 可以让他们就地登录，然后完全像以前一样通过 OpenID Connect 完成：你的服务器仍然从 Usher 获取令牌，而且任何密码或令牌都不会经过你的页面。

允许你的 App 的源

在 Usher Console 中打开环境，然后前往 登录 → 嵌入式登录，添加你的 App 的源，例如 https://app.example.com。只有列出的源才能使用环境的 Frontend API，而且只能用于登录。

添加组件

import { SignIn } from '@usher/react'

export function SignInPage() {
  return <SignIn frontendApi="https://login.example.com" returnTo="/dashboard" />
}

它位于 @usher/nextjs 已在使用的 UsherProvider 之内。frontendApi 就是你的环境的颁发者。

会发生什么

• 先输入电子邮件地址，然后输入密码或电子邮件验证码；如果用户设置了第二步验证，再完成第二步。社交账户登录和“通过 Usher 继续”会前往相应的提供商，然后返回你的 App。
• 然后是 OpenID Connect：在你的环境中登录后，组件会把浏览器送往你 App 的 /auth/sign-in，它会直接经过 Usher，并带着授权码返回。第一次登录时，Usher 会请用户允许你的 App。
• 机器人防护与 Lobby 中的做法相同：当 Usher 要求提供工作量证明时，组件会自动完成。
• 其他任何操作（通行密钥、企业登录、创建账户）都会以链接的形式指向你的 Lobby。

在生产环境中使用你自己的域名

组件把 Usher 的会话保存在环境的 Cookie 中。在生产环境中，这些 Cookie 必须是第一方 Cookie：请为环境配置你自己的域名，并与你的 App 同站（例如 app.example.com 对应 login.example.com）。在开发环境中，允许嵌入的环境会跨站发送 Cookie，Chrome 接受这种做法。如果某个浏览器不保留这些 Cookie，组件会改为转交给你的 Lobby。