तुमच्या स्वतःच्या पेजवर साइन-इन

बहुतेक ॲप्स साइन इन करण्यासाठी लोकांना त्यांच्या एन्व्हायर्नमेंटच्या लॉबीकडे पाठवतात. तुम्हाला त्यांना तुमच्या स्वतःच्या पेजवरच ठेवायचे असल्यास, @usher/react मधील <SignIn /> त्यांना तिथेच साइन इन करते, मग अगदी पूर्वीसारखेच OpenID Connect ने पूर्ण करते: तुमच्या सर्व्हरला त्याचे टोकन अजूनही Usher कडूनच मिळतात, आणि कोणताही पासवर्ड किंवा टोकन तुमच्या पेजमधून जात नाही.

तुमच्या ॲपच्या origin ला परवानगी द्या

Usher Console मध्ये, एन्व्हायर्नमेंट उघडा, मग साइन-इन → एम्बेड केलेले साइन-इन, आणि तुमच्या ॲपचा origin जोडा, जसे https://app.example.com. फक्त यादीतील origin एन्व्हायर्नमेंटचे 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 स्वीकारते. जिथे ब्राउझर त्या ठेवत नाही, तिथे कॉम्पोनंट त्याऐवजी तुमच्या लॉबीकडे सोपवते.