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

Більшість програм надсилають людей для входу в 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 — це видавець вашого середовища.

Що відбувається

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

Використовуйте власний домен у робочому середовищі

Компонент зберігає сеанс Usher у файлах cookie вашого середовища. У робочому середовищі вони мають бути основними (first-party): призначте середовищу власний домен на тому самому сайті, що й ваша програма (login.example.com для app.example.com). У середовищі розробки середовище, яке дозволяє вбудовування, надсилає свої cookie між сайтами, і Chrome їх приймає. Там, де браузер їх не зберігає, компонент передає вхід вашому Lobby.