Check out what’s new from Firebase at Google I/O 2022. Learn more

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

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

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

  1. अपने JavaScript प्रोजेक्ट में Firebase जोड़ें .
  2. डेवलपर साइट के लिए Facebook पर, अपने ऐप के लिए ऐप आईडी और ऐप सीक्रेट प्राप्त करें।
  3. फेसबुक लॉगिन सक्षम करें:
    1. फायरबेस कंसोल में, प्रामाणिक अनुभाग खोलें।
    2. साइन इन मेथड टैब पर, फेसबुक साइन-इन मेथड को इनेबल करें और ऐप आईडी और ऐप सीक्रेट को निर्दिष्ट करें जो आपको फेसबुक से मिला है।
    3. फिर, सुनिश्चित करें कि आपका OAuth रीडायरेक्ट URI (उदा my-app-12345.firebaseapp.com/__/auth/handler ) उत्पाद में डेवलपर साइट के लिए Facebook पर आपके Facebook ऐप के सेटिंग पृष्ठ में आपके OAuth रीडायरेक्ट URI में से एक के रूप में सूचीबद्ध है सेटिंग्स> फेसबुक लॉगिन कॉन्फिग।

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

यदि आप एक वेब ऐप बना रहे हैं, तो अपने उपयोगकर्ताओं को उनके Facebook खातों का उपयोग करके Firebase के साथ प्रमाणित करने का सबसे आसान तरीका Firebase JavaScript SDK के साथ साइन-इन प्रवाह को संभालना है। (यदि आप किसी उपयोगकर्ता को Node.js या अन्य गैर-ब्राउज़र परिवेश में प्रमाणित करना चाहते हैं, तो आपको साइन-इन प्रवाह को मैन्युअल रूप से प्रबंधित करना होगा।)

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

  1. Facebook प्रदाता ऑब्जेक्ट का एक उदाहरण बनाएँ:

    Web version 9

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js

    Web version 8

    var provider = new firebase.auth.FacebookAuthProvider();
    facebook.js
  2. वैकल्पिक : अतिरिक्त OAuth 2.0 क्षेत्र निर्दिष्ट करें जिनका आप प्रमाणीकरण प्रदाता से अनुरोध करना चाहते हैं। एक दायरा जोड़ने के लिए, addScope पर कॉल करें। उदाहरण के लिए:

    Web version 9

    provider.addScope('user_birthday');
    auth_facebook_provider_scopes.js

    Web version 8

    provider.addScope('user_birthday');
    facebook.js
    प्रमाणीकरण प्रदाता दस्तावेज़ देखें।
  3. वैकल्पिक : प्रासंगिक कस्टम OAuth पैरामीटर को स्पष्ट रूप से पारित किए बिना प्रदाता के OAuth प्रवाह को उपयोगकर्ता की पसंदीदा भाषा में स्थानीयकृत करने के लिए, OAuth प्रवाह प्रारंभ करने से पहले प्रामाणिक उदाहरण पर भाषा कोड अपडेट करें। उदाहरण के लिए:

    Web version 9

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    auth_set_language_code.js

    Web version 8

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. वैकल्पिक : अतिरिक्त कस्टम OAuth प्रदाता पैरामीटर निर्दिष्ट करें जिन्हें आप OAuth अनुरोध के साथ भेजना चाहते हैं। एक कस्टम पैरामीटर जोड़ने के लिए, OAuth प्रदाता दस्तावेज़ द्वारा निर्दिष्ट कुंजी और संबंधित मान वाले ऑब्जेक्ट के साथ आरंभिक प्रदाता पर setCustomParameters को कॉल करें। उदाहरण के लिए:

    Web version 9

    provider.setCustomParameters({
  'display': 'popup'
});
    auth_facebook_provider_params.js

    Web version 8

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    सुरक्षित आवश्यक OAuth पैरामीटर की अनुमति नहीं है और इसे अनदेखा कर दिया जाएगा। अधिक विवरण के लिए प्रमाणीकरण प्रदाता संदर्भ देखें।
  5. Facebook प्रदाता ऑब्जेक्ट का उपयोग करके Firebase से प्रमाणित करें। आप अपने उपयोगकर्ताओं को या तो एक पॉप-अप विंडो खोलकर या साइन-इन पृष्ठ पर रीडायरेक्ट करके अपने फेसबुक खातों से साइन इन करने के लिए प्रेरित कर सकते हैं। मोबाइल उपकरणों पर रीडायरेक्ट विधि को प्राथमिकता दी जाती है।
    • पॉप-अप विंडो से साइन इन करने के लिए, signInWithPopup पर कॉल करें:

      Web version 9

      import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // The signed-in user info.
    const user = result.user;

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    const credential = FacebookAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;

    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);

    // ...
  });
      auth_facebook_signin_popup.js

      Web version 8

      firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    var accessToken = credential.accessToken;

    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

    // ...
  });
      facebook.js
      यह भी ध्यान दें कि आप Facebook प्रदाता के OAuth टोकन को पुनः प्राप्त कर सकते हैं जिसका उपयोग Facebook API का उपयोग करके अतिरिक्त डेटा प्राप्त करने के लिए किया जा सकता है।

      यह वह जगह भी है जहां आप त्रुटियों को पकड़ और संभाल सकते हैं। त्रुटि कोड की सूची के लिए प्रामाणिक संदर्भ डॉक्स पर एक नज़र डालें।

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

      Web version 9

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

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      index.js
      फिर, आप अपने पेज के लोड होने पर getRedirectResult पर कॉल करके Facebook प्रदाता का OAuth टोकन भी प्राप्त कर सकते हैं:

      Web version 9

      import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    const credential = FacebookAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    const user = result.user;
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });
      auth_facebook_signin_redirect_result.js

      Web version 8

      firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a Facebook Access Token. You can use it to access the Facebook API.
      var token = credential.accessToken;
      // ...
    }
    // The signed-in user info.
    var user = result.user;
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });
      facebook.js
      यह वह जगह भी है जहां आप त्रुटियों को पकड़ और संभाल सकते हैं। त्रुटि कोड की सूची के लिए प्रामाणिक संदर्भ डॉक्स पर एक नज़र डालें।

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

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

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

Web version 8

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