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

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

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

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

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

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

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

  1. Facebook प्रदाता वस्तु का एक उदाहरण बनाएँ:

    Web version 9

    import { FacebookAuthProvider } from "firebase/auth";
    
    const provider = new FacebookAuthProvider();

    Web version 8

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

    Web version 9

    provider.addScope('user_birthday');

    Web version 8

    provider.addScope('user_birthday');
    प्रमाणीकरण प्रदाता दस्तावेज़ देखें।
  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();

    Web version 8

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

    Web version 9

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

    Web version 8

    provider.setCustomParameters({
      'display': 'popup'
    });
    आरक्षित आवश्यक OAuth पैरामीटर की अनुमति नहीं है और उन्हें अनदेखा कर दिया जाएगा. अधिक विवरण के लिए प्रमाणीकरण प्रदाता संदर्भ देखें।
  5. Facebook प्रदाता ऑब्जेक्ट का उपयोग करके Firebase से प्रमाणित करें। आप पॉप-अप विंडो खोलकर या साइन-इन पृष्ठ पर रीडायरेक्ट करके अपने उपयोगकर्ताओं को उनके Facebook खातों से साइन इन करने के लिए कह सकते हैं. मोबाइल उपकरणों पर रीडायरेक्ट विधि को प्राथमिकता दी जाती है।
    • पॉप-अप विंडो से साइन इन करने के लिए, 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;
      
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        })
        .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);
      
          // ...
        });

      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;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
      
          // 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 प्रदाता के OAuth टोकन को पुनः प्राप्त कर सकते हैं जिसका उपयोग Facebook API का उपयोग करके अतिरिक्त डेटा प्राप्त करने के लिए किया जा सकता है।

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

    • साइन-इन पेज पर रीडायरेक्ट करके साइन इन करने के लिए, signInWithRedirect को कॉल करें: `साइनइनविथरीडायरेक्ट` का उपयोग करते समय सर्वोत्तम प्रथाओं का पालन करें।

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      फिर, जब आपका पृष्ठ लोड होता है, तब आप 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;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).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);
          // ...
        });

      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;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).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;
          // ...
        });
      यह वह जगह भी है जहाँ आप त्रुटियों को पकड़ और संभाल सकते हैं। त्रुटि कोड की सूची के लिए प्रामाणिक संदर्भ डॉक्स पर एक नज़र डालें।

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

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

  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 को कॉल करें:

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