Logowanie na Twojej stronie

Większość aplikacji kieruje ludzi do Lobby swojego środowiska, aby się zalogowali. Jeśli wolisz zatrzymać ich na swojej stronie, <SignIn /> z @usher/react zaloguje ich właśnie tam, a następnie zakończy logowanie przez OpenID Connect dokładnie tak jak dotąd: Twój serwer nadal otrzymuje tokeny od Usher, a przez Twoją stronę nie przechodzi żadne hasło ani token.

Zezwól na źródło swojej aplikacji

W Usher Console otwórz środowisko, a następnie wybierz Logowanie → Osadzone logowanie i dodaj źródło (origin) swojej aplikacji, takie jak https://app.example.com. Z Frontend API środowiska mogą korzystać tylko źródła z listy, i to wyłącznie do logowania.

Dodaj komponent

TSX

import { SignIn } from '@usher/react'

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

Komponent umieszcza się wewnątrz UsherProvider, którego już używa @usher/nextjs. frontendApi to wystawca Twojego środowiska.

Co się dzieje

Najpierw e-mail, potem hasło lub kod wysłany e-mailem, a następnie drugi krok, jeśli dana osoba go ma. Logowanie społecznościowe i „Kontynuuj przez Usher” przechodzą do dostawcy i wracają do Twojej aplikacji.
Potem OpenID Connect. Po zalogowaniu w Twoim środowisku komponent kieruje przeglądarkę do /auth/sign-in Twojej aplikacji, skąd droga prowadzi prosto przez Usher i z powrotem z kodem. Za pierwszym razem Usher prosi daną osobę o zgodę dla Twojej aplikacji.
Ochrona przed botami działa tak jak w Lobby: gdy Usher poprosi o dowód wykonania pracy (proof of work), komponent go dostarczy.
Wszystko inne (klucze dostępu, logowanie firmowe, tworzenie konta) to link do Twojego Lobby.

W środowisku produkcyjnym używaj własnej domeny

Komponent przechowuje sesję Usher w plikach cookie Twojego środowiska. W środowisku produkcyjnym muszą to być pliki cookie własne (first-party): nadaj środowisku własną domenę, w tej samej witrynie co Twoja aplikacja (login.example.com dla app.example.com). W środowisku deweloperskim środowisko, które zezwala na osadzanie, wysyła swoje pliki cookie między witrynami, co Chrome akceptuje. Tam, gdzie przeglądarka ich nie zachowa, komponent przekazuje logowanie do Twojego Lobby.