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

Uwierzytelnij się za pomocą GitHub z JavaScript

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Możesz pozwolić użytkownikom uwierzytelniania Firebase używając ich GitHub kont poprzez zintegrowanie uwierzytelniania github w swojej aplikacji. Można zintegrować uwierzytelniania GitHub albo za pomocą Firebase SDK do przeprowadzenia logowania przepływu, albo poprzez przeprowadzenie przepływ GitHub OAuth 2.0 ręcznie i przekazywanie wyników token dostępu do Firebase.

Zanim zaczniesz

  1. Dodaj Firebase do projektu JavaScript .
  2. W konsoli Firebase otwórz sekcję Auth .
  3. Na karcie Logowanie w metodzie umożliwienia usługodawcy GitHub .
  4. Dodaj identyfikator klienta oraz tajny z konsoli programisty dostawcy do konfiguracji operatora:
    1. Zarejestrować swoją aplikację jako aplikacja deweloperem na GitHub i zdobycie aplikacji OAuth 2.0 identyfikator klienta oraz tajne .
    2. Upewnij się, że Firebase OAuth przekierowanie URI (np my-app-12345.firebaseapp.com/__/auth/handler ) jest ustawiony jako odpowiedzialnego zwrotnego adresu URL strony w ustawieniach aplikacji na własną GitHub aplikacji config .
  5. Kliknij Zapisz .

Obsłużyć logowania w przepływie z Firebase SDK

Jeśli budujesz aplikację internetową, najprostszym sposobem uwierzytelniania użytkowników z Firebase korzystania z kont ich GitHub jest do obsługi logowania przepływu z Firebase JavaScript SDK. (Jeśli chcesz, aby uwierzytelnić użytkownika w node.js lub innym środowisku niż przeglądarka, trzeba obsłużyć logowania przepływu ręcznie).

Aby obsłużyć logowania przepływu z Firebase JavaScript SDK, wykonaj następujące kroki:

  1. Utwórz instancję dostawcy obiektu GitHub:

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.GithubAuthProvider();
  2. Opcjonalnie : określić dodatkowe zakresy OAuth 2.0, który chcesz wniosek dostawcy uwierzytelniania. Aby dodać zakres, zadzwoń addScope . Na przykład:

    Web version 9

    provider.addScope('repo');

    Web version 8

    provider.addScope('repo');
    Zobacz dokumentację dostawcy uwierzytelniania .
  3. Opcjonalnie : Określ dodatkowe parametry dostawcy zwyczaj OAuth że chcesz wysłać z prośbą OAuth. Aby dodać parametr niestandardowy, zadzwoń setCustomParameters na zainicjowany dostawcy z obiektu zawierającego klucz, jak określono w dokumentacji dostawcy OAuth i odpowiednią wartość. Na przykład:

    Web version 9

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

    Web version 8

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    Reserved wymagane parametry OAuth są niedozwolone i będą ignorowane. Zobacz odniesienie dostawcy uwierzytelniania dla więcej szczegółów.
  4. Uwierzytelniania Firebase pomocą operatora obiektu GitHub. Można skłonić użytkowników do logowania się z ich kont GitHub poprzez otwarcie okna pop-up lub przekierowanie do strony logowania. Metoda przekierowania jest preferowana na urządzeniach mobilnych.
    • Aby zalogować się za pomocą wyskakującego okienka, call 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;
          // ...
        });
      Również zauważyć, że można odzyskać OAuth dostawcy GitHub za żeton, który może być używany do pobierania dodatkowych danych przy użyciu API GitHub.

      Jest to również, gdzie można złapać i błędy obsłużyć. Aby uzyskać listę kodów błędów mają zapoznać się z Autentycznymi Odniesienia Docs .

    • Aby zalogować się poprzez przekierowanie do strony logowania, zadzwoń signInWithRedirect :

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      Następnie można również pobierać dostawcy GitHub OAuth żeton wywołując getRedirectResult gdy twój strona ładuje się:

      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;
          // ...
        });
      Jest to również, gdzie można złapać i błędy obsłużyć. Aby uzyskać listę kodów błędów mają zapoznać się z Autentycznymi Odniesienia Docs .

Obsłużyć logowania przepływu ręcznie

Można również uwierzytelnić Firebase użyciu konta GitHub przez obsługi logowania przepływu przez wywołanie punkty końcowe GitHub OAuth 2.0:

  1. Zintegrować uwierzytelniania github w swojej aplikacji, wykonując dokumentację dewelopera . Pod koniec GitHub logowania przepływu, to otrzyma token dostępu OAuth 2.0.
  2. Jeśli musisz zalogować się w aplikacji node.js, wyślij dostępu Token OAuth do wniosku node.js.
  3. Po użytkownik pomyślnie oznaczeń z GitHub, wymieniać dostępu OAuth 2.0 Reklamowe dla poświadczeń Firebase:

    Web version 9

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

    Web version 8

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. Uwierzytelniania Firebase użyciu poświadczeń 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;
        // ...
      });

Uwierzytelniania Firebase w rozszerzeniu Chrome

Jeśli budujesz wydłużania aplikację Chrome, trzeba dodać rozszerzenie Chrome ID:

  1. Otwórz swój projekt w konsoli Firebase .
  2. W sekcji Uwierzytelnianie otworzyć stronę logowania metody .
  3. Dodaj URI takiego do listy autoryzowanych dziedzinach:
    chrome-extension://CHROME_EXTENSION_ID

Tylko operacje popup ( signInWithPopup , linkWithPopup i reauthenticateWithPopup ) są dostępne dla rozszerzeń Chrome, a rozszerzenia Chrome nie może użyć przekierowania HTTP. Należy zadzwonić te metody ze skryptu widoku tło zamiast popup działania przeglądarki, jako popup uwierzytelniania anuluje popup działania przeglądarki. Metody popup może być stosowane wyłącznie w rozszerzeniach korzystających Manifest V2 . Nowsza Oczywisty V3 pozwala tylko skrypty tło w postaci pracowników usług, które nie mogą wykonywać operacje popup w ogóle.

W oczywisty make plików twojego rozszerzenia Chrome pewność, że dodasz https://apis.google.com URL do content_security_policy allowlist.

Następne kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i połączone z poświadczeniami — czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania — za pomocą których użytkownik się zalogował. To nowe konto jest przechowywane jako część projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w projekcie, niezależnie od tego, jak się on loguje.

  • W aplikacjach zalecanym sposobem poznania stanu uwierzytelniania użytkownika jest ustawienie obserwatora na obiekcie Auth . Następnie można uzyskać podstawowe informacje o profilu użytkownika z obiektu User . Zobacz Zarządzanie użytkownikami .

  • W regułach bezpieczeństwa bazy danych czasu rzeczywistego i usługi Cloud Storage Firebase możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i używać go do kontrolowania, do jakich danych użytkownik może uzyskać dostęp.

Możesz zezwolić użytkownikom na logowanie się do Twojej aplikacji przy użyciu wielu dostawców uwierzytelniania, łącząc poświadczenia dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, zadzwoń do 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.
});