Uwierzytelniaj przez Google za pomocą JavaScriptu

Możesz zezwolić użytkownikom na uwierzytelnianie w Firebase za pomocą kont Google. Możesz użyć pakietu SDK Firebase, aby zalogować się przez Google, lub wykonać ten proces ręcznie, korzystając z biblioteki Zaloguj się przez Google, i przekazać otrzymany token identyfikatora do Firebase.

Zanim zaczniesz

  1. Dodaj Firebase do projektu JavaScript.
  2. Włącz Google jako metodę logowania w konsoli Firebase:
    1. W konsoli Firebase otwórz sekcję Uwierzytelnianie.
    2. Na karcie Metoda logowania włącz metodę logowania Google i kliknij Zapisz.

Zarejestruj się za pomocą pakietu SDK Firebase

Jeśli tworzysz aplikację internetową, najprostszym sposobem uwierzytelniania użytkowników Firebase za pomocą ich kont Google jest obsługa logowania za pomocą pakietu SDK Firebase JavaScript. (Jeśli chcesz uwierzytelnić użytkownika w Node.js lub w środowisku innym niż przeglądarka, musisz to zrobić ręcznie).

Aby zalogować się za pomocą pakietu SDK Firebase JavaScript, wykonaj te czynności:

  1. Utwórz instancję obiektu dostawcy Google:

    Web Modular API

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js

    Interfejs API internetowej przestrzeni nazw

    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js
  2. Opcjonalnie: określ dodatkowe zakresy OAuth 2.0, o które chcesz żądać od dostawcy uwierzytelniania. Aby dodać zakres, wywołaj addScope. Przykład:

    Web Modular API

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    auth_google_provider_scopes.js

    Interfejs API internetowej przestrzeni nazw

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    google-signin.js
    Zobacz dokumentację dostawcy uwierzytelniania.
  3. Opcjonalnie: aby zlokalizować przepływ OAuth dostawcy na preferowany język użytkownika bez jawnego przekazywania odpowiednich niestandardowych parametrów OAuth, przed rozpoczęciem procesu OAuth zaktualizuj kod języka w instancji Auth. Przykład:

    Web Modular API

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    Interfejs API internetowej przestrzeni nazw

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. Opcjonalnie: określ dodatkowe niestandardowe parametry dostawcy OAuth, które chcesz wysyłać z żądaniem OAuth. Aby dodać parametr niestandardowy, wywołaj setCustomParameters u zainicjowanego dostawcy za pomocą obiektu zawierającego klucz zgodnie z dokumentacją dostawcy OAuth i odpowiednią wartością. Przykład:

    Web Modular API

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    auth_google_provider_params.js

    Interfejs API internetowej przestrzeni nazw

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    google-signin.js
    Zarezerwowane wymagane parametry OAuth są niedozwolone i będą ignorowane. Więcej informacji znajdziesz w dokumentacji dostawcy uwierzytelniania.
  5. Uwierzytelnij w Firebase za pomocą obiektu dostawcy Google. Możesz poprosić użytkowników o zalogowanie się na konta Google przez otwarcie wyskakującego okienka lub przekierowanie na stronę logowania. Metoda przekierowania jest preferowana na urządzeniach mobilnych.
    • Aby zalogować się za pomocą wyskakującego okienka, zadzwoń pod numer signInWithPopup:

      Web Modular API

      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.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 = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_popup.js

      Interfejs API internetowej przestrzeni nazw

      firebase.auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a Google Access Token. You can use it to access the Google 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;
    // ...
  });
      google-signin.js
      Zwróć też uwagę, że możesz pobrać token OAuth dostawcy Google, za pomocą którego można pobrać dodatkowe dane za pomocą interfejsów API Google.

      Możesz w nim też wykrywać i poprawiać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej uwierzytelniania.

    • Aby zalogować się przez przekierowanie na stronę logowania, wywołaj signInWithRedirect: postępuj zgodnie ze sprawdzonymi metodami w przypadku korzystania z metody „signInWithRedirect”.

      Web Modular API

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

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

      Interfejs API internetowej przestrzeni nazw

      firebase.auth().signInWithRedirect(provider);
      index.js
      Token OAuth dostawcy Google możesz też pobrać, wywołując getRedirectResult podczas wczytywania strony:

      Web Modular API

      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access Google APIs.
    const credential = GoogleAuthProvider.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 = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_redirect_result.js

      Interfejs API internetowej przestrzeni nazw

      firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a Google Access Token. You can use it to access the Google 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;
    // ...
  });
      google-signin.js
      Możesz w nim też wykrywać i poprawiać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej uwierzytelniania.

Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome

Jeśli tworzysz aplikację rozszerzenia do Chrome, zapoznaj się z przewodnikiem po dokumentach poza ekranem.

Dalsze kroki

Gdy użytkownik loguje się po raz pierwszy, tworzone jest nowe konto użytkownika, które jest łączone z danymi logowania (nazwa użytkownika i hasło, numer telefonu lub informacje o dostawcy uwierzytelniania). Nowe konto jest przechowywane w ramach Twojego projektu Firebase i może być używane do identyfikowania użytkowników we wszystkich aplikacjach w Twoim projekcie niezależnie od tego, jak się on loguje.

  • Zalecanym sposobem na poznanie stanu uwierzytelniania użytkownika w aplikacjach jest ustawienie obserwatora w obiekcie Auth. Dzięki temu można uzyskać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.

  • W regułach zabezpieczeń Bazy danych czasu rzeczywistego Firebase i Cloud Storage możesz pobrać ze zmiennej auth unikalny identyfikator użytkownika zalogowanego użytkownika i użyć go do kontrolowania, do jakich danych użytkownik ma dostęp.

Możesz zezwolić użytkownikom na logowanie się w aplikacji przy użyciu różnych dostawców uwierzytelniania, łącząc dane logowania dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj 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

Interfejs API internetowej przestrzeni nazw

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