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

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

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

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

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

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

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

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

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

    Web version 9

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

    Web version 8

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

    Web version 9

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

    Web version 8

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

    Microsoft द्वारा समर्थित पैरामीटर के लिए, Microsoft OAuth दस्तावेज़ देखें। ध्यान दें कि आप setCustomParameters() के साथ Firebase-आवश्यक पैरामीटर पास नहीं कर सकते। ये पैरामीटर हैं client_id , response_type , redirect_uri , State , scope और response_mode

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

    Web version 9

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

    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 प्रदाता ऑब्जेक्ट का उपयोग करके Firebase से प्रमाणित करें। आप या तो एक पॉप-अप विंडो खोलकर या साइन-इन पृष्ठ पर रीडायरेक्ट करके अपने उपयोगकर्ताओं को उनके Microsoft खातों से साइन इन करने के लिए संकेत दे सकते हैं। मोबाइल उपकरणों पर रीडायरेक्ट विधि को प्राथमिकता दी जाती है।

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

    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 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().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 पर कॉल करें:

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

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

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

    Web version 9

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

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

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

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

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

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

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

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

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

अगले कदम

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

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

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

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

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

Web version 9

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

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

Web version 8

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