वेब ऐप्स में OpenID Connect का उपयोग करके प्रमाणित करें

यदि आपने पहचान प्लेटफ़ॉर्म के साथ Firebase प्रमाणीकरण में अपग्रेड किया है, तो आप अपनी पसंद के OpenID Connect (OIDC) अनुपालन प्रदाता का उपयोग करके अपने उपयोगकर्ताओं को Firebase से प्रमाणित कर सकते हैं। यह पहचान प्रदाताओं का उपयोग करना संभव बनाता है जो मूल रूप से फायरबेस द्वारा समर्थित नहीं हैं।

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

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

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

  • क्लाइंट सीक्रेट : एक सीक्रेट स्ट्रिंग जिसका उपयोग प्रदाता क्लाइंट आईडी के स्वामित्व की पुष्टि करने के लिए करता है। प्रत्येक क्लाइंट आईडी के लिए, आपको मेल खाने वाले क्लाइंट सीक्रेट की आवश्यकता होगी। (यह मान केवल तभी आवश्यक है जब आप प्रमाणन कोड प्रवाह का उपयोग कर रहे हों, जिसकी पुरज़ोर अनुशंसा की जाती है।)

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

आपके पास उपरोक्त जानकारी होने के बाद, अपने Firebase प्रोजेक्ट के लिए OpenID Connect को साइन-इन प्रदाता के रूप में सक्षम करें:

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

  2. अगर आपने आइडेंटिटी प्लेटफॉर्म के साथ फायरबेस ऑथेंटिकेशन में अपग्रेड नहीं किया है, तो ऐसा करें। OpenID Connect प्रमाणीकरण केवल अपग्रेड किए गए प्रोजेक्ट में उपलब्ध है।

  3. Firebase कंसोल के साइन-इन प्रदाता पृष्ठ पर, नया प्रदाता जोड़ें क्लिक करें और फिर OpenID Connect क्लिक करें।

  4. चुनें कि आप प्राधिकरण कोड प्रवाह या निहित अनुदान प्रवाह का उपयोग करेंगे या नहीं।

    यदि आपका प्रदाता इसका समर्थन करता है तो आपको हमेशा कोड प्रवाह का उपयोग करना चाहिए । निहित प्रवाह कम सुरक्षित है और इसका उपयोग करने से दृढ़ता से हतोत्साहित किया जाता है।

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

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

  7. अपने परिवर्तन सहेजें।

Firebase SDK के साथ साइन-इन प्रवाह को प्रबंधित करें

अपने ओआईडीसी प्रदाता का उपयोग करके अपने उपयोगकर्ताओं को फायरबेस के साथ प्रमाणित करने का सबसे आसान तरीका फायरबेस एसडीके के साथ संपूर्ण साइन-इन प्रवाह को संभालना है।

Firebase JavaScript SDK के साथ साइन-इन प्रवाह को संभालने के लिए, इन चरणों का पालन करें:

  1. आपको Firebase कंसोल में मिली प्रदाता आईडी का उपयोग करके OAuthProvider का इंस्टेंस बनाएं।

    Web version 9

    import { OAuthProvider } from "firebase/auth";

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

    Web version 8

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

  2. वैकल्पिक : अतिरिक्त कस्टम OAuth पैरामीटर निर्दिष्ट करें जिन्हें आप OAuth अनुरोध के साथ भेजना चाहते हैं।

    Web version 9

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

    Web version 8

    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 version 9

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

    Web version 8

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

    अपने प्रदाता से उन कार्यक्षेत्रों की जाँच करें जिनका वह समर्थन करता है।

  4. OAuth प्रदाता ऑब्जेक्ट का उपयोग करके Firebase से प्रमाणित करें।

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

    पुनर्निर्देशन प्रवाह

    signInWithRedirect() पर कॉल करके प्रदाता साइन-इन पृष्ठ पर रीडायरेक्ट करें:

    Web version 9

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

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);

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

    Web version 9

    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 version 8

    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 version 9

    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 version 8

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

साइन-इन प्रवाह को मैन्युअल रूप से प्रबंधित करें

यदि आपने अपने ऐप में OpenID Connect साइन-इन प्रवाह पहले ही लागू कर दिया है, तो आप Firebase से प्रमाणित करने के लिए सीधे ID टोकन का उपयोग कर सकते हैं:

Web version 9

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 version 8

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