നിങ്ങളുടെ സ്വന്തം പേജിൽ സൈൻ ഇൻ

മിക്ക ആപ്പുകളും സൈൻ ഇൻ ചെയ്യാൻ ആളുകളെ അവരുടെ എൻവയോൺമെന്റിന്റെ ലോബിയിലേക്ക് അയയ്ക്കുന്നു. അവരെ നിങ്ങളുടെ സ്വന്തം പേജിൽത്തന്നെ നിർത്താനാണ് താൽപ്പര്യമെങ്കിൽ, @usher/react-ൽ നിന്നുള്ള <SignIn /> അവരെ അവിടെത്തന്നെ സൈൻ ഇൻ ചെയ്യിക്കുന്നു, തുടർന്ന് മുമ്പത്തെപ്പോലെ തന്നെ OpenID Connect ഉപയോഗിച്ച് പൂർത്തിയാക്കുന്നു: നിങ്ങളുടെ സെർവറിന് ഇപ്പോഴും ടോക്കണുകൾ Usher-ൽ നിന്നാണ് ലഭിക്കുന്നത്, ഒരു പാസ്‌വേഡോ ടോക്കണോ നിങ്ങളുടെ പേജിലൂടെ കടന്നുപോകുന്നില്ല.

നിങ്ങളുടെ ആപ്പിന്റെ ഒറിജിൻ അനുവദിക്കുക

Usher Console-ൽ എൻവയോൺമെന്റ് തുറക്കുക, തുടർന്ന് സൈൻ ഇൻ → ഉൾച്ചേർത്ത സൈൻ ഇൻ, https://app.example.com പോലെ നിങ്ങളുടെ ആപ്പിന്റെ ഒറിജിൻ ചേർക്കുക. പട്ടികയിലുള്ള ഒറിജിനുകൾക്ക് മാത്രമേ എൻവയോൺമെന്റിന്റെ Frontend API ഉപയോഗിക്കാനാകൂ, അതും സൈൻ ഇൻ ചെയ്യാൻ മാത്രം.

ഘടകം ചേർക്കുക

import { SignIn } from '@usher/react'

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

@usher/nextjs ഇതിനകം ഉപയോഗിക്കുന്ന UsherProvider-നുള്ളിലാണ് ഇത് ഇരിക്കുന്നത്. frontendApi നിങ്ങളുടെ എൻവയോൺമെന്റിന്റെ ഇഷ്യൂവറാണ്.

എന്ത് സംഭവിക്കുന്നു

• ആദ്യം ഇമെയിൽ, തുടർന്ന് പാസ്‌വേഡ് അല്ലെങ്കിൽ ഇമെയിൽ ചെയ്ത കോഡ്, ആൾക്ക് രണ്ടാം ഘട്ടമുണ്ടെങ്കിൽ അതും. സോഷ്യൽ സൈൻ ഇന്നും Usher ഉപയോഗിച്ച് തുടരുകയും പ്രൊവൈഡറിലേക്ക് പോയി നിങ്ങളുടെ ആപ്പിലേക്ക് തിരിച്ചുവരുന്നു.
• തുടർന്ന് OpenID Connect. നിങ്ങളുടെ എൻവയോൺമെന്റിൽ സൈൻ ഇൻ ചെയ്‌തുകഴിഞ്ഞാൽ, ഘടകം ബ്രൗസറിനെ നിങ്ങളുടെ ആപ്പിന്റെ /auth/sign-in-ലേക്ക് അയയ്ക്കുന്നു, അത് നേരിട്ട് Usher-ലൂടെ കടന്ന് ഒരു കോഡുമായി തിരിച്ചെത്തുന്നു. ആദ്യ തവണ, നിങ്ങളുടെ ആപ്പിനെ അനുവദിക്കാൻ Usher ആളോട് ചോദിക്കുന്നു.
• ബോട്ട് സംരക്ഷണം ലോബിയിലെപ്പോലെ തന്നെ പ്രവർത്തിക്കുന്നു: Usher ഒരു പ്രൂഫ് ഓഫ് വർക്ക് ചോദിക്കുമ്പോൾ, ഘടകം അത് ചെയ്യുന്നു.
• മറ്റെന്തും (പാസ്‌കീകൾ, എന്റർപ്രൈസ് സൈൻ ഇൻ, അക്കൗണ്ട് സൃഷ്ടിക്കൽ) നിങ്ങളുടെ ലോബിയിലേക്കുള്ള ഒരു ലിങ്കാണ്.

പ്രൊഡക്ഷനിൽ നിങ്ങളുടെ സ്വന്തം ഡൊമെയ്ൻ ഉപയോഗിക്കുക

ഘടകം Usher-ന്റെ സെഷൻ നിങ്ങളുടെ എൻവയോൺമെന്റിന്റെ കുക്കികളിലാണ് സൂക്ഷിക്കുന്നത്. പ്രൊഡക്ഷനിൽ അവ ഫസ്റ്റ്-പാർട്ടി ആയിരിക്കണം: എൻവയോൺമെന്റിന് നിങ്ങളുടെ ആപ്പിന്റെ അതേ സൈറ്റിലുള്ള നിങ്ങളുടെ സ്വന്തം ഡൊമെയ്ൻ നൽകുക (app.example.com-ന് login.example.com). ഡെവലപ്മെന്റിൽ, ഉൾച്ചേർക്കൽ അനുവദിക്കുന്ന ഒരു എൻവയോൺമെന്റ് അതിന്റെ കുക്കികൾ സൈറ്റുകൾക്കിടയിൽ അയയ്ക്കുന്നു, Chrome അത് സ്വീകരിക്കുന്നു. ഒരു ബ്രൗസർ അവ സൂക്ഷിക്കാത്തിടത്ത്, ഘടകം പകരം നിങ്ങളുടെ ലോബിയിലേക്ക് കൈമാറുന്നു.