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

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

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

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

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

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

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

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

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

    Web version 9

    import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();
    auth_twitter_provider_create.js

    Web version 8

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

    Web version 9

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

    Web version 8

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

      Web version 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.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });
      auth_twitter_signin_popup.js

      Web version 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.js
      यह भी ध्यान दें कि आप Twitter प्रदाता के OAuth टोकन को पुनः प्राप्त कर सकते हैं जिसका उपयोग Twitter 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 पर कॉल करके Twitter प्रदाता का OAuth टोकन भी प्राप्त कर सकते हैं:

      Web version 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.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });
      auth_twitter_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 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.js
      यह वह जगह भी है जहां आप त्रुटियों को पकड़ और संभाल सकते हैं। त्रुटि कोड की सूची के लिए प्रामाणिक संदर्भ डॉक्स पर एक नज़र डालें।

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

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

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

    Web version 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.customData.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });
    auth_facebook_signin_credential.js

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