మీ సొంత పేజీలో సైన్-ఇన్
చాలా యాప్‌లు సైన్ ఇన్ కోసం వ్యక్తులను తమ ఎన్విరాన్‌మెంట్ లాబీకి పంపుతాయి. వారిని మీ సొంత పేజీలోనే ఉంచాలనుకుంటే, @usher/react నుండి వచ్చే <SignIn /> వారిని అక్కడే సైన్ ఇన్ చేసి, ఆపై ఎప్పటిలాగే OpenID Connectతో ముగిస్తుంది: మీ సర్వర్ ఇప్పటికీ తన టోకెన్‌లను Usher నుండే పొందుతుంది, ఏ పాస్‌వర్డ్ గానీ టోకెన్ గానీ మీ పేజీ గుండా వెళ్లదు.
మీ యాప్ ఆరిజిన్‌ను అనుమతించండి
Usher Consoleలో, ఎన్విరాన్‌మెంట్‌ను తెరిచి, ఆపై Sign-in → Embedded sign-in ఎంచుకుని, 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 అంటే మీ ఎన్విరాన్‌మెంట్ ఇష్యూయర్.
ఏమి జరుగుతుంది
- ముందుగా ఇమెయిల్, తర్వాత పాస్‌వర్డ్ లేదా ఇమెయిల్‌లో పంపిన కోడ్, ఆపై వ్యక్తికి రెండవ దశ ఉంటే అది. సోషల్ సైన్-ఇన్, Continue with Usher ప్రొవైడర్‌కు వెళ్లి మీ యాప్‌కు తిరిగి వస్తాయి.
- తర్వాత OpenID Connect. మీ ఎన్విరాన్‌మెంట్‌లో సైన్ ఇన్ అయిన తర్వాత, కాంపోనెంట్ బ్రౌజర్‌ను మీ యాప్
/auth/sign-inకు పంపుతుంది, అది నేరుగా Usher గుండా వెళ్లి ఒక కోడ్‌తో తిరిగి వస్తుంది. మొదటిసారి, మీ యాప్‌ను అనుమతించమని Usher వ్యక్తిని అడుగుతుంది. - బాట్ రక్షణ లాబీలో లాగే పనిచేస్తుంది: Usher ప్రూఫ్ ఆఫ్ వర్క్ అడిగినప్పుడు, కాంపోనెంట్ దాన్ని చేస్తుంది.
- మిగతా ఏదైనా (పాస్‌కీలు, ఎంటర్‌ప్రైజ్ సైన్-ఇన్, ఖాతా సృష్టించడం) మీ లాబీకి ఒక లింక్.
ప్రొడక్షన్‌లో మీ సొంత డొమైన్‌ను ఉపయోగించండి
కాంపోనెంట్ Usher సెషన్‌ను మీ ఎన్విరాన్‌మెంట్ కుకీలలో ఉంచుతుంది. ప్రొడక్షన్‌లో అవి ఫస్ట్-పార్టీ కుకీలుగా ఉండాలి: ఎన్విరాన్‌మెంట్‌కు మీ యాప్ ఉన్న అదే సైట్‌లో మీ సొంత డొమైన్‌ను ఇవ్వండి (app.example.com కోసం login.example.com). డెవలప్‌మెంట్‌లో, పొందుపరచడాన్ని అనుమతించే ఎన్విరాన్‌మెంట్ తన కుకీలను సైట్‌ల మధ్య పంపుతుంది, Chrome వాటిని అంగీకరిస్తుంది. ఏదైనా బ్రౌజర్ వాటిని ఉంచుకోనప్పుడు, కాంపోనెంట్ దానికి బదులుగా మీ లాబీకి అప్పగిస్తుంది.