जावास्क्रिप्ट के साथ Google साइन-इन का उपयोग करके प्रमाणित करें

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

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

  1. आपकी जावास्क्रिप्ट परियोजना के लिए Firebase जोड़े
  2. Firebase कंसोल में Google साइन-इन सक्षम करें:
    1. में Firebase कंसोल , प्राधिकरण अनुभाग खोलें।
    2. विधि टैब में साइन ऑन, Google प्रवेश करने के विधि को सक्षम और सहेजें क्लिक करें।

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

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

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

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

    वेब संस्करण 9

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

    वेब संस्करण 8

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

    वेब संस्करण 9

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

    वेब संस्करण 8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    देखें प्रमाणीकरण प्रदाता प्रलेखन
  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({
      'login_hint': 'user@example.com'
    });

    वेब संस्करण 8

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

      वेब संस्करण 9

      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access the Google API.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          // The signed-in user info.
          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;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      वेब संस्करण 8

      firebase.auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a Google Access Token. You can use it to access the Google 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;
          // ...
        });
      यह भी ध्यान दें कि आप Google प्रदाता के OAuth टोकन को पुनः प्राप्त कर सकते हैं जिसका उपयोग Google API का उपयोग करके अतिरिक्त डेटा प्राप्त करने के लिए किया जा सकता है।

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

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

      वेब संस्करण 9

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

      वेब संस्करण 8

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

      वेब संस्करण 9

      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access Google APIs.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // The signed-in user info.
          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;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      वेब संस्करण 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Google Access Token. You can use it to access the Google 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.
});