Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

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

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

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

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

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

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

    वेब संस्करण 9

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

    वेब संस्करण 8

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

    वेब संस्करण 9

    provider.addScope('user_birthday');

    वेब संस्करण 8

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

    वेब संस्करण 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();

    वेब संस्करण 8

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

    वेब संस्करण 9

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

    वेब संस्करण 8

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

      वेब संस्करण 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.email;
          // The AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
      
          // ...
        });

      वेब संस्करण 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 प्रदाता के OAuth टोकन को पुनः प्राप्त कर सकते हैं जिसका उपयोग Facebook API का उपयोग करके अतिरिक्त डेटा प्राप्त करने के लिए किया जा सकता है।

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

    • साइन-इन पृष्ठ, कॉल करने के लिए पुनः निर्देशित द्वारा प्रवेश करने के लिए signInWithRedirect :

      वेब संस्करण 9

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

      वेब संस्करण 8

      firebase.auth().signInWithRedirect(provider);
      उसके बाद, आप भी फोन करके फेसबुक प्रदाता की OAuth टोकन प्राप्त कर सकते हैं getRedirectResult जब अपने पृष्ठ लोड:

      वेब संस्करण 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.email;
          // AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
          // ...
        });

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

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

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

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

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

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

अगला कदम

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

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

  • अपने Firebase रीयलटाइम डेटाबेस और मेघ संग्रहण में सुरक्षा नियम , आप प्राप्त कर सकते हैं, जिसमें प्रवेश किया से उपयोगकर्ता की अद्वितीय उपयोगकर्ता ID auth चर, और इसका इस्तेमाल करते हैं क्या डेटा user एक्सेस कर सकते हैं नियंत्रित करने के लिए।

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

एक उपयोगकर्ता प्रस्थान करने के लिए फोन signOut :

वेब संस्करण 9

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

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

वेब संस्करण 8

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