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

जावास्क्रिप्ट में ट्विटर का उपयोग करके प्रमाणित करें

आप अपने ऐप में Twitter प्रमाणीकरण को एकीकृत करके अपने उपयोगकर्ताओं को उनके Twitter खातों का उपयोग करके Firebase से प्रमाणित करने दे सकते हैं। आप Twitter प्रमाणीकरण को या तो साइन-इन प्रवाह करने के लिए Firebase SDK का उपयोग करके, या Twitter OAuth प्रवाह को मैन्युअल रूप से निष्पादित करके और परिणामी पहुंच टोकन और Firebase को गुप्त पास करके एकीकृत कर सकते हैं।

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

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

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

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

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

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

    वेब संस्करण 9

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

    वेब संस्करण 8

    var provider = new firebase.auth.TwitterAuthProvider();
  2. वैकल्पिक: स्पष्ट रूप से प्रासंगिक कस्टम 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();
  3. वैकल्पिक: अतिरिक्त कस्टम OAuth प्रदाता पैरामीटर निर्दिष्ट करें कि आप OAuth अनुरोध के साथ भेजना चाहते हैं। एक कस्टम पैरामीटर जोड़ने के लिए, फोन setCustomParameters एक वस्तु के रूप OAuth प्रदाता प्रलेखन और इसी मूल्य द्वारा निर्दिष्ट कुंजी वाला के साथ प्रारंभ किया प्रदाता पर। उदाहरण के लिए:

    वेब संस्करण 9

    provider.setCustomParameters({
      'lang': 'es'
    });

    वेब संस्करण 8

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

      वेब संस्करण 9

      import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
      
          // 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 = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      वेब संस्करण 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          var token = credential.accessToken;
          var secret = credential.secret;
      
          // 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;
          // ...
        });
      यह भी ध्यान दें कि आप Twitter प्रदाता के OAuth टोकन को पुनः प्राप्त कर सकते हैं जिसका उपयोग Twitter 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, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
          // ...
      
          // 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 = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      वेब संस्करण 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
            // You can use these server side with your app's credentials to access the Twitter API.
            var token = credential.accessToken;
            var secret = credential.secret;
            // ...
          }
      
          // 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;
          // ...
        });
      यह वह जगह भी है जहां आप त्रुटियों को पकड़ और संभाल सकते हैं। त्रुटि कोड की सूची के लिए पर एक नजर है प्रमाणीकरण संदर्भ डॉक्स

साइन-इन प्रवाह को मैन्युअल रूप से प्रबंधित करें

आप Twitter OAuth समापन बिंदुओं पर कॉल करके साइन-इन प्रवाह को प्रबंधित करके Twitter खाते का उपयोग करके Firebase से प्रमाणित भी कर सकते हैं:

  1. अपने एप्लिकेशन में निम्न द्वारा ट्विटर प्रमाणीकरण एकीकृत डेवलपर के प्रलेखन । Twitter साइन-इन प्रवाह के अंत में, आपको एक OAuth पहुंच टोकन और एक OAuth रहस्य प्राप्त होगा।
  2. यदि आपको Node.js एप्लिकेशन पर साइन इन करने की आवश्यकता है, तो OAuth एक्सेस टोकन और OAuth सीक्रेट को Node.js एप्लिकेशन को भेजें।
  3. : सफलतापूर्वक ट्विटर साथ में संकेत यदि कोई उपयोगकर्ता Firebase क्रेडेंशियल के लिए टोकन OAuth पहुंच और OAuth गुप्त का आदान-प्रदान करने के बाद
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. Firebase क्रेडेंशियल का उपयोग करके Firebase से प्रमाणित करें:

    वेब संस्करण 9

    import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";
    
    // Sign in with the credential from the Facebook user.
    const auth = getAuth();
    signInWithCredential(auth, credential)
      .then((result) => {
        // Signed in 
        const credential = FacebookAuthProvider.credentialFromResult(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.email;
        // The AuthCredential type that was used.
        const credential = FacebookAuthProvider.credentialFromError(error);
        // ...
      });

    वेब संस्करण 8

    // Sign in with the credential from the Facebook user.
    firebase.auth().signInWithCredential(credential)
      .then((result) => {
        // Signed in       
        var credential = result.credential;
        // ...
      })
      .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.
});