Pålogging på din egen side

De fleste apper sender folk til miljøets Lobby for å logge på. Vil du heller beholde dem på din egen side, logger <SignIn /> fra @usher/react dem på der og da, og fullfører deretter med OpenID Connect akkurat som før: serveren din får fortsatt tokenene sine fra Usher, og ingen passord eller tokener går gjennom siden din.

Tillat appens opprinnelse

I Usher Console åpner du miljøet og deretter Pålogging → Innebygd pålogging, og legger til appens opprinnelse, som https://app.example.com. Bare oppførte opprinnelser kan bruke miljøets Frontend API, og bare til pålogging.

Legg til komponenten

TSX

import { SignIn } from '@usher/react'

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

Den ligger inne i UsherProvider, som @usher/nextjs allerede bruker. frontendApi er miljøets utsteder.

Hva som skjer

E-post først, deretter et passord eller en kode på e-post, og så det andre trinnet hvis personen har et. Sosial pålogging og Fortsett med Usher går til leverandøren og kommer tilbake til appen din.
Så OpenID Connect. Når personen er pålogget i miljøet ditt, sender komponenten nettleseren til appens /auth/sign-in, som går rett gjennom Usher og tilbake med en kode. Første gang ber Usher personen om å tillate appen din.
Robotbeskyttelse fungerer som i Lobbyen: når Usher ber om et arbeidsbevis, gjør komponenten det.
Alt annet (passnøkler, bedriftspålogging, å opprette en konto) er en lenke til Lobbyen din.

Bruk ditt eget domene i produksjon

Komponenten holder Ushers økt i miljøets informasjonskapsler. I produksjon må de være førstepartskapsler: gi miljøet ditt eget domene, på samme nettsted som appen din (login.example.com for app.example.com). I utvikling sender et miljø som tillater innebygging, informasjonskapslene sine på tvers av nettsteder, noe Chrome godtar. Der en nettleser ikke vil beholde dem, overlater komponenten i stedet til Lobbyen din.