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

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

वेब कंटेनर इंस्टॉल करने से पहले

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

  1. Firebase को अपने JavaScript प्रोजेक्ट में जोड़ें.
  2. Firebase कंसोल में, पुष्टि करें सेक्शन खोलें.
  3. साइन इन करने का तरीका टैब पर, Microsoft प्रोवाइडर को चालू करें.
  4. सेवा देने वाली कंपनी के डेवलपर कंसोल से, Client-ID और क्लाइंट सीक्रेट जोड़ें:
    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 का इंस्टेंस बनाएं.

    वेब मॉड्यूलर एपीआई

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
    auth_msft_create_provider.js

    वेब नेमस्पेसेड एपीआई

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

  2. ज़रूरी नहीं: ऐसे अतिरिक्त कस्टम OAuth पैरामीटर डालें जिन्हें आपको OAuth अनुरोध की मदद से भेजना है.

    वेब मॉड्यूलर एपीआई

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

    वेब नेमस्पेसेड एपीआई

    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() के साथ, Firebase के लिए ज़रूरी पैरामीटर पास नहीं किए जा सकते. ये पैरामीटर हैं: client_id, response_type, redirect_uri, state, scope, और response_mode.

    सिर्फ़ किसी खास Azure AD टेनेंट के उपयोगकर्ताओं को ऐप्लिकेशन में साइन इन करने की अनुमति देने के लिए, Azure AD टेनेंट के फ़्रेंडली डोमेन नेम या किरायेदार के जीयूआईडी आइडेंटिफ़ायर का इस्तेमाल किया जा सकता है. ऐसा करने के लिए, कस्टम पैरामीटर ऑब्जेक्ट में "टेनेंट" फ़ील्ड तय करें.

    वेब मॉड्यूलर एपीआई

    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

    वेब नेमस्पेसेड एपीआई

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

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

    वेब मॉड्यूलर एपीआई

    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

    वेब नेमस्पेसेड एपीआई

    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 का इस्तेमाल करते समय, सबसे सही तरीके अपनाएं.

    वेब मॉड्यूलर एपीआई

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_msft_signin_redirect.js

    वेब नेमस्पेसेड एपीआई

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

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

    वेब मॉड्यूलर एपीआई

    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

    वेब नेमस्पेसेड एपीआई

    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

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

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

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

    वेब मॉड्यूलर एपीआई

    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

    वेब नेमस्पेसेड एपीआई

    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 के साथ भी इस्तेमाल किया जा सकता है. इसका इस्तेमाल, संवेदनशील कार्रवाइयों के लिए नए क्रेडेंशियल पाने के लिए किया जा सकता है. ऐसा उन संवेदनशील कार्रवाइयों के लिए किया जाता है जिनमें हाल ही में लॉगिन करना पड़ता है.

    वेब मॉड्यूलर एपीआई

    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

    वेब नेमस्पेसेड एपीआई

    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

Chrome एक्सटेंशन में Firebase की मदद से पुष्टि करें

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

अगले चरण

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

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

  • अपने Firebase रीयल टाइम डेटाबेस और Cloud Storage के सुरक्षा नियमों में, 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