Uwierzytelnij się za pomocą GitHub z JavaScript

Możesz pozwolić użytkownikom na uwierzytelnianie w Firebase przy użyciu ich kont GitHub, integrując uwierzytelnianie GitHub ze swoją aplikacją. Uwierzytelnianie GitHub można zintegrować, używając zestawu SDK Firebase do przeprowadzenia procesu logowania lub ręcznie przeprowadzając przepływ GitHub OAuth 2.0 i przekazując wynikowy token dostępu do Firebase.

Zanim zaczniesz

  1. Dodaj Firebase do swojego projektu JavaScript .
  2. W konsoli Firebase otwórz sekcję Uwierzytelnianie .
  3. Na karcie Metoda logowania włącz dostawcę GitHub .
  4. Dodaj identyfikator klienta i klucz tajny klienta z konsoli programisty tego dostawcy do konfiguracji dostawcy:
    1. Zarejestruj swoją aplikację jako aplikację programistyczną w GitHub i uzyskaj identyfikator klienta OAuth 2.0 oraz klucz tajny klienta swojej aplikacji.
    2. Upewnij się, że identyfikator URI przekierowania Firebase OAuth (np. my-app-12345.firebaseapp.com/__/auth/handler ) jest ustawiony jako adres URL wywołania zwrotnego autoryzacji na stronie ustawień aplikacji w konfiguracji aplikacji GitHub .
  5. Kliknij Zapisz .

Obsługuj proces logowania za pomocą pakietu SDK Firebase

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

Aby obsłużyć proces logowania za pomocą pakietu SDK JavaScript Firebase, wykonaj następujące kroki:

  1. Utwórz instancję obiektu dostawcy GitHub:

    Web modular API

    import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();
    auth_github_provider_create.js

    Web namespaced API

    var provider = new firebase.auth.GithubAuthProvider();
    github.js
  2. Opcjonalnie : określ dodatkowe zakresy OAuth 2.0, których chcesz zażądać od dostawcy uwierzytelniania. Aby dodać zakres, wywołaj addScope . Na przykład:

    Web modular API

    provider.addScope('repo');
    auth_github_provider_scopes.js

    Web namespaced API

    provider.addScope('repo');
    github.js
    Zobacz dokumentację dostawcy uwierzytelniania .
  3. Opcjonalnie : określ dodatkowe niestandardowe parametry dostawcy OAuth, które chcesz wysłać z żądaniem OAuth. Aby dodać parametr niestandardowy, wywołaj setCustomParameters na zainicjowanym dostawcy z obiektem zawierającym klucz określony w dokumentacji dostawcy OAuth i odpowiednią wartość. Na przykład:

    Web modular API

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

    Web namespaced API

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

      Web modular API

      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;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).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);
    // ...
  });
      auth_github_signin_popup.js

      Web namespaced API

      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;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).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.js
      Zauważ również, że możesz pobrać token OAuth dostawcy GitHub, którego można użyć do pobrania dodatkowych danych za pomocą interfejsów API GitHub.

      W tym miejscu można także wychwytywać i obsługiwać błędy. Listę kodów błędów znajdziesz w Dokumentach referencyjnych uwierzytelniania .

    • Aby zalogować się poprzez przekierowanie na stronę logowania, wywołaj signInWithRedirect : postępuj zgodnie z najlepszymi praktykami podczas korzystania z funkcji „signInWithRedirect”.

      Web modular API

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

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      index.js
      Następnie możesz także pobrać token OAuth dostawcy GitHub, wywołując metodę getRedirectResult podczas ładowania strony:

      Web modular API

      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;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).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);
    // ...
  });
      auth_github_signin_redirect_result.js

      Web namespaced API

      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;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).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.js
      W tym miejscu można także wychwytywać i obsługiwać błędy. Listę kodów błędów znajdziesz w Dokumentach referencyjnych uwierzytelniania .

Obsługuj proces logowania ręcznie

Możesz także uwierzytelnić się w Firebase przy użyciu konta GitHub, obsługując proces logowania, wywołując punkty końcowe GitHub OAuth 2.0:

  1. Zintegruj uwierzytelnianie GitHub ze swoją aplikacją, postępując zgodnie z dokumentacją programisty . Na koniec procesu logowania do GitHub otrzymasz token dostępu OAuth 2.0.
  2. Jeśli chcesz 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 uwierzytelniające Firebase:

    Web modular API

    import { GithubAuthProvider } from "firebase/auth";

const credential = GithubAuthProvider.credential(token);
    auth_github_provider_credential.js

    Web namespaced API

    var credential = firebase.auth.GithubAuthProvider.credential(token);
    github.js
  4. Uwierzytelnij się w Firebase przy użyciu danych uwierzytelniających Firebase:

    Web modular API

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

    Web namespaced API

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

Uwierzytelnij się w Firebase w rozszerzeniu Chrome

Jeśli tworzysz aplikację rozszerzenia Chrome, musisz dodać identyfikator rozszerzenia Chrome:

  1. Otwórz swój projekt w konsoli Firebase .
  2. W sekcji Uwierzytelnianie otwórz stronę Metoda logowania .
  3. Dodaj identyfikator URI podobny do poniższego do listy autoryzowanych domen: 
    chrome-extension://CHROME_EXTENSION_ID

Tylko operacje na wyskakujących okienkach ( signInWithPopup , linkWithPopup i reauthenticateWithPopup ) są dostępne dla rozszerzeń Chrome, ponieważ rozszerzenia Chrome nie mogą korzystać z przekierowań HTTP. Powinieneś wywoływać te metody ze skryptu strony w tle, a nie z wyskakującego okienka akcji przeglądarki, ponieważ wyskakujące okienko uwierzytelniające anuluje wyskakujące okienko akcji przeglądarki. Metody wyskakujące mogą być używane tylko w rozszerzeniach korzystających z Manifest V2 . Nowszy Manifest V3 pozwala tylko na skrypty działające w tle w postaci pracowników usług, którzy w ogóle nie mogą wykonywać operacji w wyskakujących okienkach.

Upewnij się, że w pliku manifestu rozszerzenia Chrome dodałeś adres URL https://apis.google.com do listy dozwolonych content_security_policy .

Następne kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i powiązane 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ęść Twojego projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w Twoim projekcie, niezależnie od tego, w jaki sposób użytkownik się loguje.

  • W aplikacjach zalecanym sposobem sprawdzenia stanu uwierzytelnienia użytkownika jest ustawienie obserwatora w 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 Firebase Realtime i Cloud Storage możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik może uzyskać dostęp.

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

Aby wylogować użytkownika, wywołaj funkcję signOut :

Web modular API

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

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

Web namespaced API

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