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
- Dodaj Firebase do swojego projektu JavaScript .
- Włącz logowanie Google w konsoli Firebase:
- W konsoli Firebase otwórz sekcję Uwierzytelnianie .
- 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:
- Utwórz instancję obiektu dostawcy Google:
Web v8
var provider = new firebase.auth.GoogleAuthProvider();
Web v9
import { GoogleAuthProvider } from "firebase/auth"; const provider = new GoogleAuthProvider();
- 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:Zobacz dokumentację dostawcy uwierzytelniania .Web v8
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
Web v9
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
- 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();
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();
- 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:Zarezerwowane wymagane parametry OAuth są niedozwolone i zostaną zignorowane. Więcej informacji można znaleźć w dokumentacji dostawcy uwierzytelniania .Web v8
provider.setCustomParameters({ 'login_hint': 'user@example.com' });
Web v9
provider.setCustomParameters({ 'login_hint': 'user@example.com' });
- 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
: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.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; // ... });
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); // ... });
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
:Następnie możesz również pobrać token OAuth dostawcy Google, wywołującWeb v8
firebase.auth().signInWithRedirect(provider);
Web v9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
getRedirectResult
podczas ładowania strony: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 .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; // ... });
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); // ... });
- Aby zalogować się za pomocą wyskakującego okienka, wywołaj
Uwierzytelnij się w Firebase w rozszerzeniu do Chrome
Jeśli tworzysz rozszerzenie do Chrome, musisz dodać swój identyfikator rozszerzenia do Chrome:
- Otwórz projekt w konsoli Firebase .
- W sekcji Uwierzytelnianie otwórz stronę Metoda logowania .
- 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 obiekcieAuth
. Następnie możesz uzyskać podstawowe informacje o profiluUser
obiektuUser
. 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. });
Web v9
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });