अपने पेज पर साइन-इन

ज़्यादातर ऐप साइन इन के लिए लोगों को अपने एनवायरनमेंट की Lobby पर भेजते हैं। अगर आप उन्हें अपने ही पेज पर रखना चाहें, तो @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" />
}

यह उसी UsherProvider के अंदर रहता है, जिसे @usher/nextjs पहले से इस्तेमाल करता है। frontendApi आपके एनवायरनमेंट का इश्यूअर है।

क्या होता है

पहले ईमेल, फिर पासवर्ड या ईमेल से भेजा गया कोड, फिर दूसरा चरण, अगर व्यक्ति ने उसे चालू किया हो। सोशल साइन-इन और “Usher के साथ जारी रखें” प्रोवाइडर पर जाते हैं और आपके ऐप पर लौट आते हैं।
फिर OpenID Connect। आपके एनवायरनमेंट में साइन इन होने के बाद, कॉम्पोनेंट ब्राउज़र को आपके ऐप के /auth/sign-in पर भेजता है, जो सीधे Usher से होकर एक कोड के साथ लौट आता है। पहली बार Usher व्यक्ति से आपके ऐप को अनुमति देने को कहता है।
बॉट से सुरक्षा Lobby की तरह ही काम करती है: जब Usher प्रूफ़ ऑफ़ वर्क माँगता है, तो कॉम्पोनेंट उसे पूरा कर देता है।
बाक़ी सब कुछ (पासकी, एंटरप्राइज़ साइन-इन, खाता बनाना) आपकी Lobby का एक लिंक है।

प्रोडक्शन में अपना डोमेन इस्तेमाल करें

कॉम्पोनेंट Usher का सेशन आपके एनवायरनमेंट की कुकी में रखता है। प्रोडक्शन में इन्हें फ़र्स्ट-पार्टी होना चाहिए: एनवायरनमेंट को अपना डोमेन दें, आपके ऐप वाली साइट पर ही (app.example.com के लिए login.example.com)। डेवलपमेंट में, एम्बेडिंग की अनुमति वाला एनवायरनमेंट अपनी कुकी क्रॉस-साइट भेजता है, जिसे Chrome स्वीकार करता है। जहाँ कोई ब्राउज़र उन्हें नहीं रखता, वहाँ कॉम्पोनेंट आपकी Lobby को सौंप देता है।