Přihlášení na vaší vlastní stránce

Většina aplikací posílá lidi k přihlášení do Lobby svého prostředí. Pokud je chcete raději nechat na vlastní stránce, <SignIn /> z @usher/react je přihlásí přímo tam a pak přihlášení dokončí přes OpenID Connect přesně jako dřív: váš server pořád dostává tokeny od služby Usher a přes vaši stránku neprojde žádné heslo ani token.

Povolte původ své aplikace

V Usher Console otevřete prostředí, pak Přihlášení → Vložené přihlášení, a přidejte původ své aplikace, například https://app.example.com. Frontend API prostředí smějí používat jen uvedené původy, a to jen k přihlašování.

Přidejte komponentu

import { SignIn } from '@usher/react'

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

Komponenta je uvnitř UsherProvider, který už používá @usher/nextjs. frontendApi je vydavatel vašeho prostředí.

Co se stane

• Nejdřív e-mail, pak heslo nebo kód zaslaný e-mailem a pak druhý krok, pokud ho člověk má. Přihlášení přes sociální sítě i Pokračovat přes Usher vedou k poskytovateli a zpátky do vaší aplikace.
• Pak OpenID Connect. Jakmile je člověk přihlášený ve vašem prostředí, komponenta pošle prohlížeč na /auth/sign-in vaší aplikace, odkud vede cesta rovnou přes Usher a zpátky s kódem. Poprvé Usher člověka požádá, aby vaši aplikaci povolil.
• Ochrana před boty funguje jako v Lobby: když Usher požádá o proof of work, komponenta ho vypočítá.
• Cokoli dalšího (přístupové klíče, firemní přihlášení, vytvoření účtu) je odkaz do vaší Lobby.

V produkci použijte vlastní doménu

Komponenta drží relaci Usher v cookies vašeho prostředí. V produkci musí jít o cookies první strany: dejte prostředí vlastní doménu na stejném webu jako vaše aplikace (login.example.com pro app.example.com). Ve vývoji posílá prostředí, které vkládání povoluje, své cookies napříč weby, což Chrome přijímá. Kde si je prohlížeč neuchová, předá komponenta přihlášení vaší Lobby.