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

आप अपने उपयोगकर्ताओं को OAuth प्रदाताओं जैसे Microsoft Azure Active Directory का उपयोग करके Firebase के साथ प्रमाणित करने दे सकते हैं, ताकि आपके ऐप में सामान्य OAuth लॉगिन को Firebase SDK का उपयोग करके साइन-इन प्रवाह को पूरा किया जा सके।

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

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

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

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

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

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

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

   Web version 9

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

   Web version 8

   var provider = new firebase.auth.OAuthProvider('microsoft.com');
   microsoft-oauth.js

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

   Web version 8

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

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

   किसी विशेष 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'
   });
   auth_msft_provider_params_tenant.js

   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'
   });
   microsoft-oauth.js

3. वैकल्पिक : मूल प्रोफ़ाइल से परे अतिरिक्त OAuth 2.0 कार्यक्षेत्र निर्दिष्ट करें, जिसका आप प्रमाणीकरण प्रदाता से अनुरोध करना चाहते हैं।

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

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

4. OAuth प्रदाता ऑब्जेक्ट का उपयोग करके फायरबेस के साथ प्रमाणित करें। आप या तो पॉप-अप विंडो खोलकर या साइन-इन पृष्ठ पर रीडायरेक्ट करके अपने उपयोगकर्ताओं को उनके 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.
     });
   auth_msft_signin_popup.js

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

   • साइन-इन पेज पर रीडायरेक्ट करके साइन इन करने के लिए, signInWithRedirect को कॉल करें:

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

   Web version 9

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

   Web version 8

   firebase.auth().signInWithRedirect(provider);
   microsoft-oauth.js

   उपयोगकर्ता द्वारा साइन-इन पूरा करने और पृष्ठ पर लौटने के बाद, आप 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.
     });
   auth_msft_signin_redirect_result.js

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

   सफल समापन पर, प्रदाता से जुड़े 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.
       });
   auth_msft_link_popup.js

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

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

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

// Step 1.
// User tries to sign in to Microsoft.
auth.signInWithPopup(new firebase.auth.OAuthProvider('microsoft.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Microsoft credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Microsoft credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

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

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

1. Firebase कंसोल में अपना प्रोजेक्ट खोलें।
2. प्रमाणीकरण अनुभाग में, साइन-इन विधि पृष्ठ खोलें।
3. अधिकृत डोमेन की सूची में निम्नलिखित की तरह एक URI जोड़ें:

   chrome-extension://CHROME_EXTENSION_ID

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

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

अगले कदम

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

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

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

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

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

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

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

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