Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

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

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

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

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

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

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

    Web version 9

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

    Web version 8

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

    Web version 9

    provider.addScope('repo');

    Web version 8

    provider.addScope('repo');
    प्रमाणीकरण प्रदाता दस्तावेज़ देखें।
  3. वैकल्पिक : अतिरिक्त कस्टम OAuth प्रदाता पैरामीटर निर्दिष्ट करें जिन्हें आप OAuth अनुरोध के साथ भेजना चाहते हैं। एक कस्टम पैरामीटर जोड़ने के लिए, OAuth प्रदाता दस्तावेज़ द्वारा निर्दिष्ट कुंजी और संबंधित मान वाले ऑब्जेक्ट के साथ आरंभिक प्रदाता पर setCustomParameters को कॉल करें। उदाहरण के लिए:

    Web version 9

    provider.setCustomParameters({
      'allow_signup': 'false'
    });

    Web version 8

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

      Web version 9

      import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a GitHub Access Token. You can use it to access the GitHub API.
          const credential = GithubAuthProvider.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.customData.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

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

      Web version 9

      import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          const credential = GithubAuthProvider.credentialFromResult(result);
          if (credential) {
            // This gives you a GitHub Access Token. You can use it to access the GitHub API.
            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.customData.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.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 GitHub Access Token. You can use it to access the GitHub 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;
          // ...
        });
      यह वह जगह भी है जहां आप त्रुटियों को पकड़ और संभाल सकते हैं। त्रुटि कोड की सूची के लिए प्रामाणिक संदर्भ डॉक्स पर एक नज़र डालें।

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

आप GitHub OAuth 2.0 एंडपॉइंट पर कॉल करके साइन-इन फ़्लो को हैंडल करके GitHub खाते का उपयोग करके Firebase से प्रमाणित भी कर सकते हैं:

  1. डेवलपर के दस्तावेज़ों का पालन करके GitHub प्रमाणीकरण को अपने ऐप में एकीकृत करें। GitHub साइन-इन प्रवाह के अंत में, आपको OAuth 2.0 एक्सेस टोकन प्राप्त होगा।
  2. यदि आपको Node.js एप्लिकेशन पर साइन इन करने की आवश्यकता है, तो Node.js एप्लिकेशन को OAuth एक्सेस टोकन भेजें।
  3. उपयोगकर्ता द्वारा GitHub के साथ सफलतापूर्वक साइन इन करने के बाद, Firebase क्रेडेंशियल के लिए OAuth 2.0 एक्सेस टोकन का आदान-प्रदान करें:

    Web version 9

    import { GithubAuthProvider } from "firebase/auth";
    
    const credential = GithubAuthProvider.credential(token);

    Web version 8

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. Firebase क्रेडेंशियल का उपयोग करके Firebase से प्रमाणित करें:

    Web version 9

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

    Web version 8

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

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

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

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

Web version 8

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