Ugrás a tartalomhoz
Dokumentáció · Bejelentkezés a saját oldaladon

Bejelentkezés a saját oldaladon

A legtöbb app a környezete Lobbyjába küldi bejelentkezni az embereket. Ha inkább a saját oldaladon tartanád őket, a @usher/react csomag <SignIn /> komponense ott helyben bejelentkezteti őket, majd pontosan úgy fejezi be OpenID Connecttel, mint eddig: a szervered továbbra is az Ushertől kapja a tokenjeit, és sem jelszó, sem token nem halad át az oldaladon.

Engedélyezd az appod originjét

Az Usher Console-ban nyisd meg a környezetet, majd a Bejelentkezés → Beágyazott bejelentkezés részt, és add hozzá az appod originjét, például https://app.example.com. Csak a felsorolt originek használhatják a környezet Frontend API-ját, és csak bejelentkezésre.

Add hozzá a komponenst

TSX
import { SignIn } from '@usher/react'

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

Abban az UsherProvider komponensben kap helyet, amelyet a @usher/nextjs már használ. A frontendApi a környezeted kibocsátója.

Mi történik

  • Először az e-mail-cím, aztán egy jelszó vagy egy e-mailben küldött kód, majd a második lépés, ha az illetőnek van ilyen. A közösségi bejelentkezés és a Folytatás az Usherrel a szolgáltatóhoz visz, onnan pedig vissza az appodba.
  • Aztán OpenID Connect. Miután az illető bejelentkezett a környezetedben, a komponens az appod /auth/sign-in útvonalára küldi a böngészőt, amely egyenesen átmegy az Usheren, és egy kóddal tér vissza. Első alkalommal az Usher megkérdezi az illetőt, engedélyezi-e az appodat.
  • A botvédelem ugyanúgy működik, mint a Lobbyban: ha az Usher munkabizonyítékot kér, a komponens elvégzi.
  • Minden más (jelkulcsok, vállalati bejelentkezés, fiók létrehozása) egy link a Lobbydhoz.

Éles környezetben használd a saját domainedet

A komponens az Usher munkamenetét a környezeted cookie-jaiban tartja. Éles környezetben ezeknek first-party cookie-knak kell lenniük: add meg a környezetnek a saját domainedet, az appoddal azonos webhelyen (login.example.com az app.example.com mellé). Fejlesztői környezetben a beágyazást engedélyező környezet webhelyek között is elküldi a cookie-jait, amit a Chrome elfogad. Ahol egy böngésző nem tartja meg őket, a komponens inkább átadja a feladatot a Lobbydnak.