Możesz pozwolić swoim użytkownikom na uwierzytelnianie w Firebase przy użyciu ich kont na Facebooku, integrując Facebook Login ze swoją aplikacją. Możesz zintegrować Facebook Login albo używając Firebase SDK, aby przeprowadzić proces logowania, albo wykonując ręcznie proces logowania na Facebooku i przekazując wynikowy token dostępu do Firebase.
Zanim zaczniesz
- Dodaj Firebase do swojego projektu JavaScript .
- W witrynie Facebook for Developers pobierz identyfikator aplikacji i klucz tajny aplikacji.
- Włącz logowanie na Facebooku:
- W konsoli Firebase otwórz sekcję Uwierzytelnianie .
- Na karcie Metoda logowania włącz metodę logowania do serwisu Facebook i określ identyfikator aplikacji oraz klucz tajny aplikacji uzyskany z serwisu Facebook.
- Następnie upewnij się, że Twój identyfikator URI przekierowania OAuth (np.
my-app-12345.firebaseapp.com/__/auth/handler
) jest wymieniony jako jeden z identyfikatorów URI przekierowania OAuth na stronie ustawień aplikacji Facebook w witrynie Facebook for Developers w Produkcie Ustawienia> Konfiguracja logowania na Facebooku .
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 na Facebooku 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 wystąpienie obiektu dostawcy Facebooka:
Web v8
var provider = new firebase.auth.FacebookAuthProvider();
Web v9
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
- 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('user_birthday');
Web v9
provider.addScope('user_birthday');
- 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({ 'display': 'popup' });
Web v9
provider.setCustomParameters({ 'display': 'popup' });
- Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy Facebooka. Możesz poprosić użytkowników o zalogowanie się na swoje konta na Facebooku, 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óć również uwagę, że możesz pobrać token OAuth dostawcy Facebooka, którego można użyć do pobrania dodatkowych danych za pomocą interfejsów API Facebooka.Web v8
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // This gives you a Facebook Access Token. You can use it to access the Facebook API. var accessToken = credential.accessToken; // ... }) .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, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // The signed-in user info. const user = result.user; // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; // ... }) .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 = FacebookAuthProvider.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 Facebooka, 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 Facebook Access Token. You can use it to access the Facebook 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, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const token = credential.accessToken; 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; // AuthCredential type that was used. const credential = FacebookAuthProvider.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ływać 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. });