Вход на вашей странице

Большинство приложений отправляют людей для входа в Lobby своей среды. Если вы хотите, чтобы люди оставались на вашей странице, <SignIn /> из @usher/react выполняет вход прямо там, а затем завершает его через OpenID Connect точно так же, как раньше: ваш сервер по-прежнему получает токены от Usher, и ни пароль, ни токен не проходят через вашу страницу.

Разрешите источник вашего приложения

В Usher Console откройте среду, затем Вход → Встроенный вход и добавьте источник (origin) вашего приложения, например https://app.example.com. Только источники из списка могут обращаться к Frontend API среды, и только для входа.

Добавьте компонент

TSX

import { SignIn } from '@usher/react'

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

Он размещается внутри UsherProvider, который уже использует @usher/nextjs. frontendApi — это издатель вашей среды.

Что происходит

Сначала e-mail, затем пароль или код из письма, затем второй этап, если он у человека настроен. Вход через соцсети и «Продолжить с Usher» ведут к провайдеру и возвращают человека в ваше приложение.
Затем OpenID Connect. После входа в вашу среду компонент отправляет браузер на /auth/sign-in вашего приложения, откуда запрос сразу проходит через Usher и возвращается с кодом. В первый раз Usher просит человека разрешить доступ вашему приложению.
Защита от ботов работает так же, как в Lobby: когда Usher запрашивает доказательство выполнения работы (proof of work), компонент его выполняет.
Все остальное (ключи входа, корпоративный вход, создание аккаунта) — это ссылка на ваше Lobby.

Используйте свой домен в рабочей среде

Компонент хранит сеанс Usher в cookie вашей среды. В рабочей среде это должны быть основные (first-party) cookie: укажите для среды собственный домен на том же сайте, что и ваше приложение (login.example.com для app.example.com). В среде разработки среда, разрешающая встраивание, отправляет свои cookie между сайтами, и Chrome их принимает. Если браузер не сохраняет такие cookie, компонент передает вход вашему Lobby.