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

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

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

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

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

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

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

ऊपर दी गई जानकारी मिलने के बाद, अपने Firebase प्रोजेक्ट के लिए OpenID Connect को साइन-इन प्रोवाइडर के तौर पर चालू करें:

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

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

  3. साइन-इन प्रोवाइडर पेज पर, Firebase कंसोल पर, नया प्रोवाइडर जोड़ें पर क्लिक करें. इसके बाद, OpenID Connect पर क्लिक करें.

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

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

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

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

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

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

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

Firebase JavaScript SDK टूल की मदद से, साइन-इन फ़्लो मैनेज करने के लिए, यह तरीका अपनाएं:

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

    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'
});

    अपने प्रोवाइडर से पूछें कि वह किन पैरामीटर को सपोर्ट करता है. ध्यान दें कि setCustomParameters के साथ, Firebase के लिए ज़रूरी पैरामीटर पास नहीं किए जा सकते. ये पैरामीटर हैं: 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() का इस्तेमाल करके, उपयोगकर्ता की फिर से पुष्टि की जा सकती है. इनका इस्तेमाल, संवेदनशील कार्रवाइयों के लिए नए क्रेडेंशियल पाने के लिए किया जा सकता है. इन कार्रवाइयों के लिए, हाल ही में लॉगिन करना ज़रूरी होता है.

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

अगर आपने अपने ऐप्लिकेशन में OpenID 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.
    });