जावास्क्रिप्ट के साथ माइक्रोसॉफ्ट का उपयोग करके प्रमाणित करें, जावास्क्रिप्ट के साथ माइक्रोसॉफ्ट का उपयोग करके प्रमाणित करें

आप एंड टू एंड साइन-इन प्रवाह को पूरा करने के लिए फायरबेस एसडीके का उपयोग करके अपने ऐप में जेनेरिक OAuth लॉगिन को एकीकृत करके अपने उपयोगकर्ताओं को Microsoft Azure सक्रिय निर्देशिका जैसे OAuth प्रदाताओं का उपयोग करके Firebase के साथ प्रमाणित करने दे सकते हैं।

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

Microsoft खातों (Azure सक्रिय निर्देशिका और व्यक्तिगत Microsoft खातों) का उपयोग करने वाले उपयोगकर्ताओं में साइन इन करने के लिए, आपको पहले अपने Firebase प्रोजेक्ट के लिए साइन-इन प्रदाता के रूप में Microsoft को सक्षम करना होगा:

  1. अपने जावास्क्रिप्ट प्रोजेक्ट में फायरबेस जोड़ें
  2. फायरबेस कंसोल में, ऑथ सेक्शन खोलें।
  3. साइन इन विधि टैब पर, Microsoft प्रदाता को सक्षम करें।
  4. उस प्रदाता के डेवलपर कंसोल से क्लाइंट आईडी और क्लाइंट सीक्रेट को प्रदाता कॉन्फ़िगरेशन में जोड़ें:
    1. Microsoft OAuth क्लाइंट को पंजीकृत करने के लिए, क्विकस्टार्ट में दिए गए निर्देशों का पालन करें: Azure सक्रिय निर्देशिका v2.0 एंडपॉइंट के साथ एक ऐप पंजीकृत करें । ध्यान दें कि यह समापन बिंदु Microsoft व्यक्तिगत खातों के साथ-साथ Azure सक्रिय निर्देशिका खातों का उपयोग करके साइन-इन का समर्थन करता है। Azure सक्रिय निर्देशिका v2.0 के बारे में और जानें
    2. इन प्रदाताओं के साथ ऐप्स पंजीकृत करते समय, अपने प्रोजेक्ट के लिए *.firebaseapp.com डोमेन को अपने ऐप के रीडायरेक्ट डोमेन के रूप में पंजीकृत करना सुनिश्चित करें।
  5. सहेजें पर क्लिक करें.

फायरबेस एसडीके के साथ साइन-इन प्रवाह को संभालें

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

फायरबेस जावास्क्रिप्ट एसडीके के साथ साइन-इन प्रवाह को संभालने के लिए, इन चरणों का पालन करें:

  1. प्रदाता आईडी microsoft.com का उपयोग करके OAuthProvider का एक उदाहरण बनाएं।

    Web modular API

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. वैकल्पिक : अतिरिक्त कस्टम OAuth पैरामीटर निर्दिष्ट करें जिन्हें आप OAuth अनुरोध के साथ भेजना चाहते हैं।

    Web modular API

    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });

    Web namespaced API

    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });

    Microsoft द्वारा समर्थित पैरामीटरों के लिए, Microsoft OAuth दस्तावेज़ देखें। ध्यान दें कि आप setCustomParameters() के साथ Firebase-आवश्यक पैरामीटर पास नहीं कर सकते। ये पैरामीटर क्लाइंट_आईडी , रिस्पॉन्स_टाइप , रीडायरेक्ट_यूरी , स्टेट , स्कोप और रिस्पॉन्स_मोड हैं

    किसी विशेष Azure AD टैनेंट के केवल उपयोगकर्ताओं को एप्लिकेशन में साइन इन करने की अनुमति देने के लिए, Azure AD टैनेंट के अनुकूल डोमेन नाम या टैनेंट के GUID पहचानकर्ता का उपयोग किया जा सकता है। यह कस्टम पैरामीटर ऑब्जेक्ट में "किरायेदार" फ़ील्ड निर्दिष्ट करके किया जा सकता है।

    Web modular API

    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });

    Web namespaced API

    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });
  3. वैकल्पिक : मूल प्रोफ़ाइल से परे अतिरिक्त OAuth 2.0 स्कोप निर्दिष्ट करें जिसे आप प्रमाणीकरण प्रदाता से अनुरोध करना चाहते हैं।

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

    अधिक जानने के लिए, Microsoft अनुमतियाँ और सहमति दस्तावेज़ देखें।

  4. OAuth प्रदाता ऑब्जेक्ट का उपयोग करके फ़ायरबेस से प्रमाणित करें। आप अपने उपयोगकर्ताओं को पॉप-अप विंडो खोलकर या साइन-इन पृष्ठ पर रीडायरेक्ट करके अपने Microsoft खातों से साइन इन करने के लिए संकेत दे सकते हैं। मोबाइल उपकरणों पर रीडायरेक्ट विधि को प्राथमिकता दी जाती है।

    • पॉप-अप विंडो से साइन इन करने के लिए, signInWithPopup पर कॉल करें:

    Web modular API

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .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 namespaced API

    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.
      });
    • साइन-इन पेज पर रीडायरेक्ट करके साइन इन करने के लिए, signInWithRedirect पर कॉल करें:

    signInWithRedirect , linkWithRedirect , या reauthenticateWithRedirect का उपयोग करते समय सर्वोत्तम प्रथाओं का पालन करें।

    Web modular API

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);

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

    Web modular API

    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 namespaced API

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

    सफल समापन पर, प्रदाता से जुड़े OAuth एक्सेस टोकन को firebase.auth.UserCredential ऑब्जेक्ट से पुनर्प्राप्त किया जा सकता है।

    OAuth एक्सेस टोकन का उपयोग करके, आप Microsoft ग्राफ़ API को कॉल कर सकते हैं।

    उदाहरण के लिए, मूल प्रोफ़ाइल जानकारी प्राप्त करने के लिए, निम्नलिखित REST API को कॉल किया जा सकता है:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me
    

    फायरबेस ऑथ द्वारा समर्थित अन्य प्रदाताओं के विपरीत, माइक्रोसॉफ्ट एक फोटो यूआरएल प्रदान नहीं करता है और इसके बजाय, प्रोफाइल फोटो के लिए बाइनरी डेटा को माइक्रोसॉफ्ट ग्राफ एपीआई के माध्यम से अनुरोध करना पड़ता है।

    OAuth एक्सेस टोकन के अलावा, उपयोगकर्ता का OAuth ID टोकन भी firebase.auth.UserCredential ऑब्जेक्ट से प्राप्त किया जा सकता है। आईडी टोकन में sub दावा ऐप-विशिष्ट है और फायरबेस ऑथ द्वारा उपयोग किए गए फ़ेडरेटेड उपयोगकर्ता पहचानकर्ता से मेल नहीं खाएगा और user.providerData[0].uid के माध्यम से पहुंच योग्य होगा। इसके बजाय oid दावा फ़ील्ड का उपयोग किया जाना चाहिए। साइन-इन करने के लिए Azure AD टैनेंट का उपयोग करते समय, oid दावा बिल्कुल मेल खाएगा। हालाँकि, गैर-किरायेदार मामले के लिए, oid फ़ील्ड गद्देदार है। फ़ेडरेटेड आईडी 4b2eabcdefghijkl के लिए, oid एक फॉर्म 00000000-0000-0000-4b2e-abcdefghijkl होगा।

  5. जबकि उपरोक्त उदाहरण साइन-इन प्रवाह पर ध्यान केंद्रित करते हैं, आपके पास linkWithPopup / linkWithRedirect का उपयोग करके Microsoft प्रदाता को मौजूदा उपयोगकर्ता से लिंक करने की क्षमता भी है। उदाहरण के लिए, आप कई प्रदाताओं को एक ही उपयोगकर्ता से लिंक कर सकते हैं और उन्हें किसी एक के साथ साइन इन करने की अनुमति दे सकते हैं।

    Web modular API

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');
    const auth = getAuth();
    
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Microsoft credential is linked to the current user.
          // 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 namespaced API

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Microsoft credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
          // OAuth ID token can also be retrieved:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. उसी पैटर्न का उपयोग reauthenticateWithPopup / reauthenticateWithRedirect के साथ किया जा सकता है जिसका उपयोग उन संवेदनशील परिचालनों के लिए ताज़ा क्रेडेंशियल प्राप्त करने के लिए किया जा सकता है जिनके लिए हाल ही में लॉगिन की आवश्यकता होती है।

    Web modular API

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');
    const auth = getAuth();
    reauthenticateWithPopup(auth.currentUser, provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // 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 namespaced API

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
          // OAuth ID token can also be retrieved:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

Chrome एक्सटेंशन में फ़ायरबेस से प्रमाणित करें

यदि आप Chrome एक्सटेंशन ऐप बना रहे हैं, तो आपको अपनी Chrome एक्सटेंशन आईडी जोड़नी होगी:

  1. अपना प्रोजेक्ट फायरबेस कंसोल में खोलें।
  2. प्रमाणीकरण अनुभाग में, साइन-इन विधि पृष्ठ खोलें।
  3. अधिकृत डोमेन की सूची में निम्नलिखित की तरह एक यूआरआई जोड़ें:
    chrome-extension://CHROME_EXTENSION_ID

क्रोम एक्सटेंशन के लिए केवल पॉपअप ऑपरेशन ( signInWithPopup , linkWithPopup , और reauthenticateWithPopup ) उपलब्ध हैं, क्योंकि क्रोम एक्सटेंशन HTTP रीडायरेक्ट का उपयोग नहीं कर सकते हैं। आपको इन तरीकों को ब्राउज़र एक्शन पॉपअप के बजाय बैकग्राउंड पेज स्क्रिप्ट से कॉल करना चाहिए, क्योंकि प्रमाणीकरण पॉपअप ब्राउज़र एक्शन पॉपअप को रद्द कर देगा। पॉपअप विधियों का उपयोग केवल मेनिफेस्ट V2 का उपयोग करने वाले एक्सटेंशन में किया जा सकता है। नया मेनिफेस्ट V3 केवल सेवा कर्मियों के रूप में पृष्ठभूमि स्क्रिप्ट की अनुमति देता है, जो पॉपअप ऑपरेशन बिल्कुल भी नहीं कर सकता है।

अपने Chrome एक्सटेंशन की मेनिफेस्ट फ़ाइल में सुनिश्चित करें कि आप https://apis.google.com URL को content_security_policy अनुमति सूची में जोड़ें।

अगले कदम

किसी उपयोगकर्ता द्वारा पहली बार साइन इन करने के बाद, एक नया उपयोगकर्ता खाता बनाया जाता है और क्रेडेंशियल्स से लिंक किया जाता है - यानी, उपयोगकर्ता नाम और पासवर्ड, फोन नंबर, या ऑथ प्रदाता जानकारी - जिस उपयोगकर्ता के साथ साइन इन किया जाता है। यह नया खाता आपके फायरबेस प्रोजेक्ट के हिस्से के रूप में संग्रहीत है, और इसका उपयोग आपके प्रोजेक्ट के प्रत्येक ऐप में उपयोगकर्ता की पहचान करने के लिए किया जा सकता है, भले ही उपयोगकर्ता कैसे भी साइन इन करता हो।

  • आपके ऐप्स में, आपके उपयोगकर्ता की प्रामाणिक स्थिति जानने का अनुशंसित तरीका Auth ऑब्जेक्ट पर एक पर्यवेक्षक सेट करना है। फिर आप User ऑब्जेक्ट से उपयोगकर्ता की मूल प्रोफ़ाइल जानकारी प्राप्त कर सकते हैं। उपयोगकर्ता प्रबंधित करें देखें.

  • अपने फायरबेस रीयलटाइम डेटाबेस और क्लाउड स्टोरेज सुरक्षा नियमों में, आप साइन-इन किए गए उपयोगकर्ता की अद्वितीय उपयोगकर्ता आईडी को auth वेरिएबल से प्राप्त कर सकते हैं, और इसका उपयोग यह नियंत्रित करने के लिए कर सकते हैं कि उपयोगकर्ता किस डेटा तक पहुंच सकता है।

आप किसी मौजूदा उपयोगकर्ता खाते से प्रमाणीकरण प्रदाता क्रेडेंशियल्स को लिंक करके उपयोगकर्ताओं को एकाधिक प्रमाणीकरण प्रदाताओं का उपयोग करके अपने ऐप में साइन इन करने की अनुमति दे सकते हैं।

किसी उपयोगकर्ता को साइन आउट करने के लिए, signOut पर कॉल करें:

Web modular API

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});