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

Повечето приложения изпращат хората в Lobby на своята среда, за да влязат. Ако предпочитате да ги задържите на собствената си страница, <SignIn /> от @usher/react осигурява входа им точно там, след което завършва с OpenID Connect точно както преди: сървърът ви пак получава токените си от Usher, а през страницата ви не минава нито парола, нито токен.

Разрешете произхода на приложението си

В Usher Console отворете средата, след това Вход → Вграден вход, и добавете произхода на приложението си, например 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 е издателят на вашата среда.

Какво се случва

Първо имейлът, след това парола или код по имейл, после втората стъпка, ако човекът има такава. Входът със социален акаунт и „Продължаване с Usher“ отиват при доставчика и се връщат в приложението ви.
След това OpenID Connect. Щом човекът е влязъл в средата ви, компонентът изпраща браузъра към /auth/sign-in на приложението ви, откъдето той минава направо през Usher и се връща с код. Първия път Usher моли човека да разреши приложението ви.
Защитата от ботове работи както в Lobby: когато Usher поиска доказателство за извършена работа, компонентът го осигурява.
Всичко останало (ключове за достъп, корпоративен вход, създаване на акаунт) е връзка към вашето Lobby.

Използвайте собствен домейн в продукция

Компонентът пази сесията на Usher в бисквитките на средата ви. В продукция те трябва да са бисквитки от първа страна: дайте на средата собствен домейн в същия сайт като приложението ви (login.example.com за app.example.com). В разработка среда, която позволява вграждане, изпраща бисквитките си между сайтове, което Chrome приема. Където браузърът не ги запазва, компонентът предава нещата на вашето Lobby.