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
- Dodaj Firebase do projektu JavaScript.
- Włącz Google jako metodę logowania w konsoli Firebase:
- W konsoli Firebase otwórz sekcję Uwierzytelnianie.
- 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:
- Utwórz instancję obiektu dostawcy Google:
Web Modular API
import { GoogleAuthProvider } from "firebase/auth"; const provider = new GoogleAuthProvider();
Interfejs API internetowej przestrzeni nazw
var provider = new firebase.auth.GoogleAuthProvider();
- 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');
Interfejs API internetowej przestrzeni nazw
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, 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();
Interfejs API internetowej przestrzeni nazw
firebase.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 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' });
Interfejs API internetowej przestrzeni nazw
provider.setCustomParameters({ 'login_hint': 'user@example.com' });
- 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); // ... });
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; // ... });
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);
Interfejs API internetowej przestrzeni nazw
firebase.auth().signInWithRedirect(provider);
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); // ... });
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; // ... });
- Aby zalogować się za pomocą wyskakującego okienka, zadzwoń pod numer
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 obiektuUser
. 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. });
Interfejs API internetowej przestrzeni nazw
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });