Możesz pozwolić użytkownikom uwierzytelniania Firebase użyciu ich konta Facebook poprzez integrację Facebook login do swojej aplikacji. Można zintegrować Facebook Login albo za pomocą Firebase SDK do przeprowadzenia logowania przepływu, lub przez przeprowadzenie Facebook Login płynąć ręcznie i przekazywanie wyników token dostępu do Firebase.
Zanim zaczniesz
- Dodaj Firebase do projektu JavaScript .
- Na Facebook dla programistów miejscu, uzyskać identyfikator aplikacji i aplikacji tajemnicą swojej aplikacji.
- Włącz Facebook Login:
- W konsoli Firebase otwórz sekcję Auth .
- Na karcie Logowanie w metodzie umożliwienia logowania metody Facebook i podać identyfikator aplikacji i aplikacji sekret , którego dostał od Facebooka.
- Następnie upewnij się, że OAuth przekierowanie URI (np
my-app-12345.firebaseapp.com/__/auth/handler
) jest wymieniony jako jeden z OAuth URI przekierowania na strony Facebook ustawień aplikacji na Facebook dla programistów miejscu w produkcie Ustawienia> Facebook Login config.
Obsłużyć logowania w przepływie z Firebase SDK
Jeśli budujesz aplikację internetową, najprostszym sposobem uwierzytelniania użytkowników z Firebase używając konta Facebook jest ich obsłużyć logowania przepływu z Firebase JavaScript SDK. (Jeśli chcesz, aby uwierzytelnić użytkownika w node.js lub innym środowisku niż przeglądarka, trzeba obsłużyć logowania przepływu ręcznie).
Aby obsłużyć logowania przepływu z Firebase JavaScript SDK, wykonaj następujące kroki:
- Utwórz instancję Facebooku operatora obiektu:
Web version 9
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
Web version 8
var provider = new firebase.auth.FacebookAuthProvider();
- Opcjonalnie : określić dodatkowe zakresy OAuth 2.0, który chcesz wniosek dostawcy uwierzytelniania. Aby dodać zakres, zadzwoń
addScope
. Na przykład:Zobacz dokumentację dostawcy uwierzytelniania .Web version 9
provider.addScope('user_birthday');
Web version 8
provider.addScope('user_birthday');
- Opcjonalne : Aby zlokalizować usługodawcy OAuth przepływ do preferowanego języka użytkownika bez wyraźnego przejściu odpowiednich parametrów niestandardowych OAuth, zaktualizuj kod języka na przykład Autentyczna przed rozpoczęciem przepływu OAuth. Na przykład:
Web version 9
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();
Web version 8
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- Opcjonalnie : Określ dodatkowe parametry dostawcy zwyczaj OAuth że chcesz wysłać z prośbą OAuth. Aby dodać parametr niestandardowy, zadzwoń
setCustomParameters
na zainicjowany dostawcy z obiektu zawierającego klucz, jak określono w dokumentacji dostawcy OAuth i odpowiednią wartość. Na przykład:Reserved wymagane parametry OAuth są niedozwolone i będą ignorowane. Zobacz odniesienie dostawcy uwierzytelniania dla więcej szczegółów.Web version 9
provider.setCustomParameters({ 'display': 'popup' });
Web version 8
provider.setCustomParameters({ 'display': 'popup' });
- Uwierzytelniania Firebase pomocą Facebook operatora obiektu. Można skłonić użytkowników do logowania się z ich kont Facebook albo przez otwarcie okna pop-up lub przekierowanie do strony logowania. Sposób przekierowania jest korzystne w urządzeniach przenośnych.
- Aby zalogować się za pomocą wyskakującego okienka, call
signInWithPopup
:Również zauważyć, że można odzyskać OAuth dostawcy Facebooka żeton, który może być używany do pobierania dodatkowych danych przy użyciu Facebook API.Web version 9
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.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web version 8
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; // ... });
Jest to również, gdzie można złapać i błędy obsłużyć. Aby uzyskać listę kodów błędów mają zapoznać się z Autentycznymi Odniesienia Docs .
- Aby zalogować się poprzez przekierowanie do strony logowania, zadzwoń
signInWithRedirect
:Następnie można również pobierać dostawcy Facebooka tokenu OAuth wywołującWeb version 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web version 8
firebase.auth().signInWithRedirect(provider);
getRedirectResult
gdy twój strona ładuje się:Jest to również, gdzie można złapać i błędy obsłużyć. Aby uzyskać listę kodów błędów mają zapoznać się z Autentycznymi Odniesienia Docs .Web version 9
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.customData.email; // AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web version 8
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; // ... });
- Aby zalogować się za pomocą wyskakującego okienka, call
Uwierzytelniania Firebase w rozszerzeniu Chrome
Jeśli budujesz wydłużania aplikację Chrome, trzeba dodać rozszerzenie Chrome ID:
- Otwórz swój projekt w konsoli Firebase .
- W sekcji Uwierzytelnianie otworzyć stronę logowania metody .
- Dodaj URI takiego do listy autoryzowanych dziedzinach:
chrome-extension://CHROME_EXTENSION_ID
Tylko operacje popup ( signInWithPopup
, linkWithPopup
i reauthenticateWithPopup
) są dostępne dla rozszerzeń Chrome, a rozszerzenia Chrome nie może użyć przekierowania HTTP. Należy zadzwonić te metody ze skryptu widoku tło zamiast popup działania przeglądarki, jako popup uwierzytelniania anuluje popup działania przeglądarki. Metody popup może być stosowane wyłącznie w rozszerzeniach korzystających Manifest V2 . Nowsza Oczywisty V3 pozwala tylko skrypty tło w postaci pracowników usług, które nie mogą wykonywać operacje popup w ogóle.
W oczywisty make plików twojego rozszerzenia Chrome pewność, że dodasz https://apis.google.com
URL do content_security_policy
allowlist.
Następne kroki
Po użytkownik oznaczeń po raz pierwszy nowe konto użytkownika jest tworzony i powiązany z mandatów, to znaczy, nazwę użytkownika i hasło, numer telefonu lub auth informatora-użytkownika z podpisanym w. To nowe konto są przechowywane jako część projektu Firebase, i mogą być wykorzystane do identyfikacji użytkowników w każdej aplikacji w projekcie, niezależnie od tego jak użytkownik zaloguje.
W aplikacjach, zalecanym sposobem poznać stan swojego uwierzytelniania użytkownika jest ustawić obserwatora na
Auth
obiektu. Następnie można uzyskać podstawowe informacje o profilu użytkownika odUser
obiektu. Patrz Zarządzanie użytkownikami .W bazie danych Firebase Realtime i Cloud Storage zasad bezpieczeństwa , można uzyskać podpisanego w unikalnym identyfikatorem użytkownika użytkownika z
auth
zmiennej i użyć go do kontroli, jakie dane dostępu może użytkownik.
Można zezwolić użytkownikom na logowanie się do aplikacji przy użyciu wielu dostawców uwierzytelniania przez łączenie auth poświadczenia dostawcy do istniejącego konta użytkownika.
Aby wylogować użytkownika, zadzwoń signOut
:
Web version 9
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web version 8
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });