Prihlásenie na vlastnej stránke

Väčšina aplikácií posiela ľudí na prihlásenie do Lobby svojho prostredia. Ak ich radšej chcete nechať na vlastnej stránke, <SignIn /> z @usher/react ich prihlási priamo tam a potom prihlásenie dokončí cez OpenID Connect presne ako doteraz: váš server stále dostáva tokeny od služby Usher a cez vašu stránku neprejde žiadne heslo ani token.

Povoľte pôvod svojej aplikácie

V Usher Console otvorte prostredie a potom Prihlásenie → Vložené prihlásenie a pridajte pôvod svojej aplikácie, napríklad https://app.example.com. Frontend API prostredia smú používať len uvedené pôvody, a to len na prihlasovanie.

Pridajte komponent

TSX

import { SignIn } from '@usher/react'

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

Komponent je vnútri UsherProvider, ktorý už používa @usher/nextjs. frontendApi je vydavateľ vášho prostredia.

Čo sa deje

Najprv e-mail, potom heslo alebo kód poslaný e-mailom a potom druhý krok, ak ho človek má. Prihlásenie cez sociálne siete a Pokračovať cez Usher presmerujú k poskytovateľovi a vrátia sa do vašej aplikácie.
Potom OpenID Connect. Po prihlásení vo vašom prostredí pošle komponent prehliadač na /auth/sign-in vašej aplikácie, odkiaľ ide priamo cez Usher a späť s kódom. Pri prvom prihlásení Usher požiada človeka, aby vašu aplikáciu povolil.
Ochrana pred botmi funguje ako v Lobby: keď Usher žiada dôkaz vykonanej práce, komponent ho vypočíta.
Všetko ostatné (prístupové kľúče, podnikové prihlásenie, vytvorenie účtu) je odkaz do vášho Lobby.

V produkcii použite vlastnú doménu

Komponent uchováva reláciu Usher v súboroch cookie vášho prostredia. V produkcii musia byť tieto súbory cookie prvej strany: dajte prostrediu vlastnú doménu na rovnakom webe ako vaša aplikácia (login.example.com pre app.example.com). Vo vývoji prostredie, ktoré povoľuje vkladanie, posiela svoje súbory cookie medzi webmi, čo Chrome akceptuje. Ak ich prehliadač neuchová, komponent namiesto toho odovzdá prihlásenie vášmu Lobby.