તમારા પોતાના પેજ પર સાઇન-ઇન

મોટા ભાગની ઍપ લોકોને સાઇન ઇન કરવા તેમના એન્વાયર્નમેન્ટની લૉબી પર મોકલે છે. જો તમે તેમને તમારા પોતાના પેજ પર જ રાખવા માંગતા હો, તો @usher/react નું <SignIn /> તેમને ત્યાં જ સાઇન ઇન કરાવે છે, પછી બરાબર પહેલાંની જેમ OpenID Connect થી પૂરું કરે છે: તમારા સર્વરને હજુ પણ તેના ટોકન Usher પાસેથી જ મળે છે, અને કોઈ પાસવર્ડ કે ટોકન તમારા પેજમાંથી પસાર થતું નથી.

તમારી ઍપના ઑરિજિનને મંજૂરી આપો

Usher Console માં, એન્વાયર્નમેન્ટ ખોલો, પછી સાઇન-ઇન → એમ્બેડેડ સાઇન-ઇન, અને તમારી ઍપનો ઑરિજિન ઉમેરો, જેમ કે https://app.example.com. ફક્ત યાદીમાંના ઑરિજિન જ એન્વાયર્નમેન્ટનું Frontend API વાપરી શકે છે, અને તે પણ ફક્ત સાઇન ઇન કરવા માટે.

કમ્પોનન્ટ ઉમેરો

TSX

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 સ્વીકારે છે. જ્યાં બ્રાઉઝર તેને રાખતું નથી, ત્યાં કમ્પોનન્ટ તેના બદલે તમારી લૉબીને કામ સોંપી દે છે.