JavaScript के साथ Microsoft का इस्तेमाल करके पुष्टि करें

Firebase SDK टूल का इस्तेमाल करके, अपने ऐप्लिकेशन में सामान्य OAuth लॉगिन को इंटिग्रेट किया जा सकता है. इससे, उपयोगकर्ता Microsoft Azure Active Directory जैसे OAuth प्रोवाइडर की मदद से, Firebase में पुष्टि कर सकते हैं. साथ ही, साइन-इन की पूरी प्रोसेस को पूरा किया जा सकता है.

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

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

  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. सेव करें पर क्लिक करें.

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

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

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

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

    Web

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

    Web

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. ज़रूरी नहीं: OAuth के ऐसे अतिरिक्त कस्टम पैरामीटर तय करें जिन्हें OAuth के अनुरोध के साथ भेजना है.

    Web

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

    Web

    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 आइडेंटिफ़ायर का इस्तेमाल किया जा सकता है. कस्टम पैरामीटर ऑब्जेक्ट में "tenant" फ़ील्ड तय करके, ऐसा किया जा सकता है.

    Web

    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

    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

    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

    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

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

    Web

    firebase.auth().signInWithRedirect(provider);

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

    Web

    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

    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 Graph API को कॉल किया जा सकता है.

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

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

    Firebase Auth के साथ काम करने वाले अन्य प्रोवाइडर के उलट, Microsoft फ़ोटो का यूआरएल नहीं देता. इसके बजाय, प्रोफ़ाइल फ़ोटो के लिए बाइनरी डेटा का अनुरोध, Microsoft Graph API के ज़रिए करना होता है.

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

  5. ऊपर दिए गए उदाहरणों में, साइन-इन की प्रोसेस पर फ़ोकस किया गया है. हालांकि, आपके पास linkWithPopup/linkWithRedirect का इस्तेमाल करके, किसी मौजूदा उपयोगकर्ता से Microsoft प्रोवाइडर को लिंक करने की सुविधा भी होती है. उदाहरण के लिए, एक ही उपयोगकर्ता से कई प्रोवाइडर को लिंक किया जा सकता है, ताकि वह इनमें से किसी भी प्रोवाइडर की मदद से साइन इन कर सके.

    Web

    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

    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

    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

    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 एक्सटेंशन में Firebase से पुष्टि करना

अगर Chrome एक्सटेंशन ऐप्लिकेशन बनाया जा रहा है, तो Offscreen Documents से जुड़ी गाइड देखें.

अगले चरण

जब कोई उपयोगकर्ता पहली बार साइन इन करता है, तो एक नया उपयोगकर्ता खाता बनाया जाता है. इसे क्रेडेंशियल से लिंक किया जाता है. जैसे, उपयोगकर्ता नाम और पासवर्ड, फ़ोन नंबर या पुष्टि करने वाले प्रोवाइडर की जानकारी. उपयोगकर्ता, इन क्रेडेंशियल की मदद से साइन इन करता है. यह नया खाता, आपके Firebase प्रोजेक्ट के हिस्से के तौर पर सेव किया जाता है. इसका इस्तेमाल, आपके प्रोजेक्ट के हर ऐप्लिकेशन में किसी उपयोगकर्ता की पहचान करने के लिए किया जा सकता है. भले ही, उपयोगकर्ता किसी भी तरीके से साइन इन करे.

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

  • अपने Firebase Realtime Database और Cloud Storage सुरक्षा नियमों में, आप साइन-इन किए हुए उपयोगकर्ता का यूनीक उपयोगकर्ता आईडी auth वैरिएबल से पा सकते हैं, और इसका इस्तेमाल, यह कंट्रोल करने के लिए कर सकते हैं कि कोई उपयोगकर्ता किस डेटा को ऐक्सेस कर सकता है.

पुष्टि करने वाले प्रोवाइडर के क्रेडेंशियल को किसी मौजूदा उपयोगकर्ता खाते से लिंक करके, उपयोगकर्ताओं को अपने ऐप्लिकेशन में, पुष्टि करने वाले कई प्रोवाइडर की मदद से साइन इन करने की अनुमति दी जा सकती है.

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

Web

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

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

Web

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