在你自己的頁面上登入

大多數 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 處理。