Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
Ta strona została przetłumaczona przez Cloud Translation API.
Switch to English

Uwierzytelnij się za pomocą logowania Google z JavaScriptem

Możesz pozwolić swoim użytkownikom na uwierzytelnianie w Firebase przy użyciu ich kont Google, integrując Google Sign-In ze swoją aplikacją. Możesz zintegrować Google Sign-In albo używając Firebase SDK, aby przeprowadzić proces logowania, albo wykonując ręcznie proces logowania Google i przekazując wynikowy token identyfikatora do Firebase.

Zanim zaczniesz

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

Obsługuj proces logowania za pomocą pakietu Firebase SDK

Jeśli tworzysz aplikację internetową, najłatwiejszym sposobem uwierzytelniania użytkowników w Firebase przy użyciu ich kont Google jest obsługa procesu logowania za pomocą pakietu Firebase JavaScript SDK. (Jeśli chcesz uwierzytelnić użytkownika w środowisku 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 następujące kroki:

  1. Utwórz instancję obiektu dostawcy Google:

    Web v8

    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js

    Web v9

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.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 v8

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

    Web v9

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    auth_google_provider_scopes.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, zaktualizuj kod języka w wystąpieniu uwierzytelniania przed uruchomieniem przepływu OAuth. Na przykład:

    Web v8

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

    Web v9

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    auth_set_language_code.js
  4. 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 v8

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

    Web v9

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    auth_google_provider_params.js
    Zarezerwowane wymagane parametry OAuth są niedozwolone i zostaną zignorowane. Więcej informacji można znaleźć w dokumentacji dostawcy uwierzytelniania .
  5. Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy Google. Możesz skłonić użytkowników do zalogowania się na swoje konta Google, otwierając wyskakujące okienko lub przekierowując na stronę logowania. Metoda przekierowania jest preferowana na urządzeniach mobilnych.
    • Aby zalogować się za pomocą wyskakującego okienka, wywołaj signInWithPopup :

      Web v8

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

      Web v9

      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;
    // ...
  }).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 = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_popup.js
      Zwróć też uwagę, że możesz pobrać token OAuth dostawcy Google, którego można użyć do pobrania dodatkowych danych za pomocą interfejsów API Google.

      W tym miejscu możesz również wyłapać i obsłużyć błędy. Aby uzyskać listę kodów błędów, zapoznaj się z dokumentacją dotyczącą uwierzytelniania .

    • Aby zalogować się przez przekierowanie do strony logowania, wywołaj signInWithRedirect :

      Web v8

      firebase.auth().signInWithRedirect(provider);
      index.js

      Web v9

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

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js
      Następnie możesz również pobrać token OAuth dostawcy Google, wywołując getRedirectResult podczas ładowania strony:

      Web v8

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

      Web v9

      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;
  }).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 = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_redirect_result.js
      W tym miejscu możesz również wyłapać i obsłużyć błędy. Aby uzyskać listę kodów błędów, zapoznaj się z dokumentacją dotyczącą uwierzytelniania .

Uwierzytelnij się w Firebase w rozszerzeniu do Chrome

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

  1. Otwórz 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 wyskakujących okienek ( signInWithPopup i linkWithPopup ) są dostępne dla rozszerzeń Chrome, ponieważ rozszerzenia Chrome nie mogą używać przekierowań HTTP. Powinieneś wywołać te metody ze skryptu działającego w tle, a nie z wyskakującego okienka akcji przeglądarki, ponieważ wyskakujące okienko uwierzytelniania anuluje wyskakujące okienko akcji przeglądarki.

W pliku manifestu rozszerzenia Chrome upewnij się, że dodajesz adres URL https://apis.google.com do allowlist content_security_policy .

Następne kroki

Gdy użytkownik loguje się po raz pierwszy, tworzone jest nowe konto użytkownika i jest ono łączone z poświadczeniami - to jest z nazwą użytkownika i hasłem, numerem telefonu lub informacjami dostawcy uwierzytelniania - zalogowanym użytkownikiem. To nowe konto jest przechowywane jako część projektu Firebase i może służyć do identyfikacji użytkownika we wszystkich aplikacjach w Twoim projekcie, niezależnie od tego, w jaki sposób się on zaloguje.

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

  • W Firebase Realtime Database i Cloud Storage Rules możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i używać go do kontrolowania, do jakich danych użytkownik ma 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 signOut :

Web v8

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

Web v9

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

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