Uwierzytelnij się za pomocą GitHub z JavaScript

Możesz umożliwić użytkownikom uwierzytelnianie w Firebase przy użyciu ich kont GitHub, integrując uwierzytelnianie GitHub ze swoją aplikacją. Uwierzytelnianie GitHub można zintegrować przy użyciu pakietu Firebase SDK do przeprowadzenia procesu logowania lub ręcznie przeprowadzając przepływ GitHub OAuth 2.0 i przekazując otrzymany 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 przycisk Zapisz.

Obsługuj proces logowania za pomocą pakietu Firebase SDK

Jeśli tworzysz aplikację internetową, najłatwiejszym sposobem uwierzytelnienia użytkowników w Firebase przy użyciu ich kont GitHub jest obsługa procesu logowania za pomocą pakietu Firebase JavaScript SDK. (Jeśli chcesz uwierzytelnić użytkownika w Node.js lub innym środowisku innym niż przeglądarka, musisz ręcznie obsłużyć przepływ logowania).

Aby obsłużyć proces logowania za pomocą pakietu Firebase JavaScript SDK, wykonaj te czynności:

  1. Utwórz instancję obiektu dostawcy GitHub:

    Wersja internetowa 9

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

    Wersja internetowa 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:

    Wersja internetowa 9

    provider.addScope('repo');

    Wersja internetowa 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:

    Wersja internetowa 9

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

    Wersja internetowa 8

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    Zarezerwowane wymagane parametry OAuth są niedozwolone i zostaną zignorowane. Zobacz odniesienie dostawcy uwierzytelniania dla więcej szczegółów.
  4. Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy GitHub. Możesz poprosić użytkowników o zalogowanie się na ich konta GitHub, otwierając wyskakujące okienko lub przekierowując do strony logowania. Metoda przekierowania jest preferowana na urządzeniach mobilnych.
    • Aby zalogować się za pomocą wyskakującego okienka, call signInWithPopup :

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

      Wersja internetowa 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;
          // ...
        });
      Zwróć też uwagę, że możesz pobrać token OAuth dostawcy GitHub, którego można użyć do pobrania dodatkowych danych przy użyciu interfejsów API GitHub.

      Tutaj też możesz wyłapać i obsłużyć błędy. 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 :

      Wersja internetowa 9

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

      Wersja internetowa 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ę:

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

      Wersja internetowa 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;
          // ...
        });
      Tutaj też możesz wyłapać i obsłużyć błędy. Aby uzyskać listę kodów błędów mają zapoznać się z Autentycznymi Odniesienia Docs .

Ręczna obsługa procesu logowania

Możesz również uwierzytelnić się w Firebase przy użyciu konta GitHub, obsługując przepływ logowania przez wywołanie punktów końcowych GitHub OAuth 2.0:

  1. Zintegrować uwierzytelniania github w swojej aplikacji, wykonując dokumentację dewelopera . Na końcu procesu logowania do usługi GitHub otrzymasz token dostępu OAuth 2,0.
  2. Jeśli musisz zalogować się w aplikacji Node.js, wyślij token dostępu OAuth do aplikacji Node.js.
  3. Gdy użytkownik pomyślnie zaloguje się w GitHub, wymień token dostępu OAuth 2.0 na dane logowania Firebase:

    Wersja internetowa 9

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

    Wersja internetowa 8

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. Uwierzytelnij się w Firebase przy użyciu poświadczeń Firebase:

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

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

Uwierzytelnij się w Firebase w rozszerzeniu Chrome

Jeśli tworzysz aplikację rozszerzenia do Chrome, musisz dodać swój identyfikator rozszerzenia do Chrome:

  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. Powinieneś wywoływać te metody ze skryptu strony w tle, a nie z wyskakującego okienka akcji przeglądarki, ponieważ wyskakujące okienko uwierzytelniania anuluje wyskakujące okienko akcji 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 — przy użyciu 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 poznać stan swojego uwierzytelniania użytkownika jest ustawić obserwatora na Auth obiektu. Następnie można uzyskać podstawowe informacje o profilu użytkownika od User obiektu. Patrz Zarządzanie użytkownikami .

  • W bazie danych Firebase Realtime i Cloud Storage zasad bezpieczeństwa , można uzyskać podpisanego w unikalnym identyfikatorem użytkownika użytkownika z auth zmiennej i użyć go do kontroli, jakie dane dostępu może użytkownik.

Można zezwolić użytkownikom na logowanie się do aplikacji przy użyciu wielu dostawców uwierzytelniania przez łączenie auth poświadczenia dostawcy do istniejącego konta użytkownika.

Aby wylogować użytkownika, zadzwoń signOut :

Wersja internetowa 9

import { getAuth, signOut } from "firebase/auth";

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

Wersja internetowa 8

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