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

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

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

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

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

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

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

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

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

    वेब संस्करण 9

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

    वेब संस्करण 8

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

    वेब संस्करण 9

    provider.addScope('repo');

    वेब संस्करण 8

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

    वेब संस्करण 9

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

    वेब संस्करण 8

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

      वेब संस्करण 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.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      वेब संस्करण 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 :

      वेब संस्करण 9

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

      वेब संस्करण 8

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

      वेब संस्करण 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.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      वेब संस्करण 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 एक्सेस टोकन का आदान-प्रदान करें:

    वेब संस्करण 9

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

    वेब संस्करण 8

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

    वेब संस्करण 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.email;
        // ...
      });

    वेब संस्करण 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. : एक 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.
});