वेब ऐप्लिकेशन में OpenID Connect का इस्तेमाल करके पुष्टि करें

अगर आपके पास Firebase Authentication with Identity Platform पर अपग्रेड किया गया है, तो इससे अपने उपयोगकर्ताओं की पुष्टि की जा सकती है: आपकी पसंद के हिसाब से बनी, Open Connect (OIDC) कंपनी का इस्तेमाल करने वाला Firebase. यह इससे ऐसे आइडेंटिटी प्रोवाइडर का इस्तेमाल किया जा सकता है जो Firebase में नेटिव तौर पर काम नहीं करता.

शुरू करने से पहले

किसी OIDC कंपनी का इस्तेमाल करके साइन इन करने के लिए, आपको पहले कुछ जानकारी इकट्ठा करनी होगी से ठीक है:

  • Client-ID: सेवा देने वाली कंपनी के लिए यूनीक स्ट्रिंग, जो आपके ऐप्लिकेशन की पहचान करती है. आपका ऐसा हो सकता है कि सेवा देने वाली कंपनी, आपके साथ काम करने वाले हर प्लैटफ़ॉर्म के लिए आपको एक अलग क्लाइंट आईडी असाइन करे. यह आईडी टोकन में aud दावे की वैल्यू में से एक है कंपनी.

  • क्लाइंट सीक्रेट: ऐसी सीक्रेट स्ट्रिंग जिसका इस्तेमाल सेवा देने वाली कंपनी, मालिकाना हक की पुष्टि करने के लिए करती है डालें. हर क्लाइंट आईडी के लिए, आपके पास मैच करने वाला क्लाइंट सीक्रेट होना चाहिए. (यह वैल्यू सिर्फ़ तब ज़रूरी होती है, जब ऑथराइज़ेशन कोड फ़्लो का इस्तेमाल किया जा रहा हो, जो का सुझाव दिया जाता है.)

  • जारी करने वाला: ऐसी स्ट्रिंग जिससे सेवा देने वाली कंपनी की पहचान होती है. यह मान एक URL होना चाहिए जिसे /.well-known/openid-configuration के साथ जोड़े जाने पर, जगह को हटाने का अनुरोध किया है. उदाहरण के लिए, अगर जारी करने वाला https://auth.example.com, खोज से जुड़ा दस्तावेज़ यहां उपलब्ध होना चाहिए https://auth.example.com/.well-known/openid-configuration.

ऊपर दी गई जानकारी मिलने के बाद, साइन इन के तौर पर OpenID Connect को चालू करें कंपनी:

  1. Firebase को अपने JavaScript प्रोजेक्ट में जोड़ें.

  2. अगर आपने Firebase Authentication with Identity Platform पर अपग्रेड नहीं किया है, तो ऐसा करें. OpenID Connect से पुष्टि करना केवल अपग्रेड किए गए प्रोजेक्ट में उपलब्ध है.

  3. साइन-इन करने की सुविधा देने वाली कंपनियों पर Firebase कंसोल के पेज पर जाएं, नई कंपनी जोड़ें पर क्लिक करें और फिर OpenID Connect.

  4. चुनें कि आपको ऑथराइज़ेशन कोड फ़्लो का इस्तेमाल करना है या इंप्लिसिट ग्रांट फ़्लो.

    अगर सेवा देने वाली कंपनी यह सुविधा देती है, तो आपको हमेशा कोड फ़्लो का इस्तेमाल करना चाहिए. कॉन्टेंट बनाने इंप्लिसिट फ़्लो कम सुरक्षित होता है. इसलिए, इसका इस्तेमाल करने की सलाह नहीं दी जाती.

  5. इस कंपनी को एक नाम दें. जनरेट किए गए, सेवा देने वाले के आईडी को नोट करें: oidc.example-provider जैसा कुछ. खातों को जोड़ते समय आपको इस आईडी की ज़रूरत होगी अपने ऐप्लिकेशन में साइन-इन कोड डालें.

  6. अपना क्लाइंट आईडी, क्लाइंट सीक्रेट, और सेवा देने वाली कंपनी के जारी करने वाले की स्ट्रिंग के बारे में बताएं. ये वैल्यू, उन वैल्यू से पूरी तरह मेल खानी चाहिए जो आपको सेवा देने वाली कंपनी ने असाइन की हैं.

  7. बदलावों को सेव करें.

Firebase SDK टूल की मदद से साइन-इन की प्रोसेस को मैनेज करना

OIDC का इस्तेमाल करके, Firebase से अपने उपयोगकर्ताओं की पुष्टि करने का सबसे आसान तरीका provider को Firebase SDK टूल के साथ साइन-इन की पूरी प्रोसेस मैनेज करनी होगी.

Firebase JavaScript SDK टूल से साइन-इन फ़्लो को मैनेज करने के लिए, इन निर्देशों का पालन करें चरण:

  1. आपको जो प्रोवाइडर आईडी मिला है उसका इस्तेमाल करके, OAuthProvider का इंस्टेंस बनाएं Firebase कंसोल.

    Web 

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    Web 

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

  2. ज़रूरी नहीं: ऐसे अतिरिक्त कस्टम OAuth पैरामीटर तय करें जिन्हें आपको इस्तेमाल करना है OAuth अनुरोध के साथ भेजें.

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    अपनी कंपनी से संपर्क करके जानें कि इसके साथ काम करने वाले पैरामीटर कौनसे हैं. ध्यान दें कि आप Firebase के लिए ज़रूरी पैरामीटर को setCustomParameters. ये पैरामीटर client_id हैं, response_type, redirect_uri, state, scope, और response_mode.

  3. ज़रूरी नहीं: बेसिक प्रोफ़ाइल के अलावा, OAuth 2.0 के अन्य दायरे तय करें. पुष्टि करने की सेवा देने वाली कंपनी से अनुरोध करें.

    Web 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Web 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    अपनी कंपनी से संपर्क करके जानें कि वह किन स्कोप के साथ काम करता है.

  4. OAuth प्रोवाइडर ऑब्जेक्ट का इस्तेमाल करके, Firebase से पुष्टि करें.

    उपयोगकर्ता को या तो सेवा देने वाली कंपनी के साइन-इन पेज पर रीडायरेक्ट किया जा सकता है या पॉप-अप ब्राउज़र विंडो में साइन-इन पेज पर.

    रीडायरेक्ट फ़्लो

    signInWithRedirect() पर कॉल करके, सेवा देने वाली कंपनी के साइन-इन पेज पर रीडायरेक्ट करें:

    Web 

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    Web 

    firebase.auth().signInWithRedirect(provider);

    उपयोगकर्ता के साइन-इन करने और आपके ऐप्लिकेशन पर वापस लौटने के बाद, आपको getRedirectResult() पर कॉल करके साइन-इन परिणाम.

    Web 

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    पॉप-अप फ़्लो

    Web 

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available using getAdditionalUserInfo(result)

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

  5. ऊपर दिए गए उदाहरण, साइन-इन करने के फ़्लो पर फ़ोकस करते हैं. हालांकि, इनका इस्तेमाल भी किया जा सकता है का इस्तेमाल करने वाले किसी मौजूदा उपयोगकर्ता से OIDC प्रोवाइडर को लिंक करने का पैटर्न linkWithRedirect() और linkWithPopup(). साथ ही, इस सुविधा का इस्तेमाल करके किसी उपयोगकर्ता की फिर से पुष्टि करें reauthenticateWithRedirect() और reauthenticateWithPopup() इनमें से कोई भी हो सकता है. इसका इस्तेमाल, संवेदनशील कार्रवाइयों के लिए नए क्रेडेंशियल हासिल करने के लिए किया जाता है. हाल ही का लॉगिन.

साइन-इन की प्रोसेस को मैन्युअल तरीके से मैनेज करना

अगर आपने अपने ऐप्लिकेशन में, Open Connect का साइन इन करने का फ़्लो पहले ही लागू कर दिया है, तो Firebase से पुष्टि करने के लिए, सीधे आईडी टोकन का इस्तेमाल कर सकते हैं:

Web 

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

Web 

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });