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

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

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

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

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

फायरबेस एसडीके के साथ साइन-इन प्रवाह को संभालें

यदि आप एक वेब ऐप बना रहे हैं, तो अपने उपयोगकर्ताओं को उनके गिटहब खातों का उपयोग करके फायरबेस के साथ प्रमाणित करने का सबसे आसान तरीका फायरबेस जावास्क्रिप्ट एसडीके के साथ साइन-इन प्रवाह को संभालना है। (यदि आप किसी उपयोगकर्ता को 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. GitHub प्रदाता ऑब्जेक्ट का उपयोग करके Firebase के साथ प्रमाणित करें। आप अपने उपयोगकर्ताओं को पॉप-अप विंडो खोलकर या साइन-इन पेज पर रीडायरेक्ट करके अपने गिटहब खातों से साइन इन करने के लिए कह सकते हैं। मोबाइल उपकरणों पर रीडायरेक्ट विधि को प्राथमिकता दी जाती है।
    • पॉप-अप विंडो से साइन इन करने के लिए, 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. Firebase कंसोल में अपना प्रोजेक्ट खोलें।
  2. प्रमाणीकरण अनुभाग में, साइन-इन विधि पृष्ठ खोलें।
  3. प्राधिकृत डोमेन की सूची में निम्न जैसा यूआरआई जोड़ें:
    chrome-extension://CHROME_EXTENSION_ID

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

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

अगले कदम

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

  • आपके ऐप्स में, आपके उपयोगकर्ता की 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.
});