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

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

वेब कंटेनर इंस्टॉल करने से पहले

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

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

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

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

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

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

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

  3. Firebase कंसोल के साइन इन करने की सेवा देने वाली कंपनियां पेज पर, नया प्रोवाइडर जोड़ें पर क्लिक करें और फिर ID Connect खोलें पर क्लिक करें.

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

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

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

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

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

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

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

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

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

    वेब मॉड्यूलर एपीआई 

    import { OAuthProvider } from "firebase/auth";

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

    वेब नेमस्पेसेड एपीआई 

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

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

    वेब मॉड्यूलर एपीआई 

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

    वेब नेमस्पेसेड एपीआई 

    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 के अन्य दायरे तय करें. इसके लिए, आपको पुष्टि करने वाली कंपनी से अनुरोध करना है.

    वेब मॉड्यूलर एपीआई 

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

    वेब नेमस्पेसेड एपीआई 

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

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

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

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

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

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

    वेब मॉड्यूलर एपीआई 

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

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

    वेब नेमस्पेसेड एपीआई 

    firebase.auth().signInWithRedirect(provider);

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

    वेब मॉड्यूलर एपीआई 

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

    वेब नेमस्पेसेड एपीआई 

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

    पॉप-अप फ़्लो

    वेब मॉड्यूलर एपीआई 

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

    वेब नेमस्पेसेड एपीआई 

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

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

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

वेब मॉड्यूलर एपीआई 

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

वेब नेमस्पेसेड एपीआई 

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