Inloggning på din egen sida

De flesta appar skickar människor till sin miljös Lobby för att logga in. Om du hellre vill behålla dem på din egen sida loggar <SignIn /> från @usher/react in dem direkt där och avslutar sedan med OpenID Connect precis som tidigare: din server får fortfarande sina tokens från Usher, och inga lösenord eller tokens passerar genom din sida.

Tillåt din apps ursprung

Öppna miljön i Usher Console och välj sedan Inloggning → Inbäddad inloggning, och lägg till din apps ursprung, till exempel https://app.example.com. Bara listade ursprung får använda miljöns Frontend API, och bara för inloggning.

Lägg till komponenten

import { SignIn } from '@usher/react'

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

Den placeras i den UsherProvider som @usher/nextjs redan använder. frontendApi är din miljös utfärdare.

Vad som händer

• E-post först, sedan ett lösenord eller en kod via e-post, och sedan det andra steget om personen har ett. Social inloggning och Fortsätt med Usher går till leverantören och kommer tillbaka till din app.
• Sedan OpenID Connect. När personen har loggat in i din miljö skickar komponenten webbläsaren till din apps /auth/sign-in, som går direkt via Usher och tillbaka med en kod. Första gången ber Usher personen att tillåta din app.
• Skydd mot bottar fungerar som i Lobbyn: när Usher ber om ett arbetsbevis utför komponenten det.
• Allt annat (lösennycklar, företagsinloggning, att skapa ett konto) är en länk till din Lobby.

Använd din egen domän i produktion

Komponenten sparar Ushers session i din miljös cookies. I produktion måste de vara förstapartscookies: ge miljön din egen domän, på samma webbplats som din app (login.example.com för app.example.com). I utveckling skickar en miljö som tillåter inbäddning sina cookies mellan webbplatser, vilket Chrome accepterar. Där en webbläsare inte vill spara dem lämnar komponenten över till din Lobby i stället.