Możesz zezwolić użytkownikom na uwierzytelnianie w Firebase za pomocą ich kont na Facebooku przez integrację Facebook Login z aplikacją. Możesz zintegrować Facebook Login albo używając pakietu SDK Firebase, aby zalogować się w aplikacji. Możesz też przenieść ręcznie zalogować się przez Facebooka i przekazać otrzymany token dostępu do Firebase.
Zanim zaczniesz
- Dodaj Firebase do projektu JavaScript.
- na stronie Facebook for Developers, pobierz identyfikator aplikacji i klucz tajny aplikacji.
- Włącz logowanie przez Facebooka:
- W konsoli Firebase otwórz sekcję Uwierzytelnianie.
- Na karcie Metoda logowania włącz logowanie przez Facebooka oraz określ wartości App ID (Identyfikator aplikacji) i App Secret (Tajny klucz aplikacji) otrzymane od Facebooka.
- Następnie sprawdź, czy podany jest 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 na witrynie Facebook for Developers w Ustawienia produktu > Konfiguracja logowania do Facebooka.
Zarejestruj się za pomocą pakietu SDK Firebase
Jeśli tworzysz aplikację internetową, najprostszy sposób uwierzytelniania użytkowników z Firebase, korzystając z konta na Facebooku, pakiet SDK Firebase JavaScript. (Jeśli chcesz uwierzytelnić użytkownika w Node.js lub w innym środowisku, które nie jest przeglądarką, musisz samodzielnie przeprowadzić logowanie).
Aby zalogować się za pomocą pakietu SDK Firebase JavaScript, postępuj zgodnie z tymi wskazówkami kroki:
- Utwórz instancję obiektu dostawcy Facebooka:
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
var provider = new firebase.auth.FacebookAuthProvider();
- Opcjonalnie: określ dodatkowe zakresy OAuth 2.0, których potrzebujesz
których chcesz żądać od dostawcy uwierzytelniania. Aby dodać zakres, wywołaj
addScope
Przykład:provider.addScope('user_birthday');
provider.addScope('user_birthday');
- Opcjonalnie: aby zlokalizować przepływ OAuth dostawcy na preferowany przez użytkownika
bez jawnego przekazywania odpowiednich niestandardowych parametrów OAuth, zaktualizuj język
w instancji Auth przed rozpoczęciem procesu OAuth. Przykład:
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
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 z obiektem zawierającym klucz zgodnie z dokumentacją dostawcy OAuth i odpowiednią wartością. Przykład:provider.setCustomParameters({ 'display': 'popup' });
provider.setCustomParameters({ 'display': 'popup' });
- Uwierzytelnij się w Firebase za pomocą obiektu dostawcy Facebooka. Dostępne opcje
poproś użytkowników o zalogowanie się za pomocą kont na Facebooku przez otwarcie
pojawi się wyskakujące okienko lub przekierujemy Cię na stronę logowania. Metoda przekierowania to
na urządzeniach mobilnych.
- Aby zalogować się za pomocą wyskakującego okienka, zadzwoń pod numer
signInWithPopup
: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; // 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 = FacebookAuthProvider.credentialFromError(error); // ... });
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... // 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; // ... });
Możesz w nim też wykrywać i poprawiać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej uwierzytelniania.
- Aby zalogować się, przekierowując na stronę logowania, zadzwoń pod numer
signInWithRedirect
: Podczas korzystania z metody „signInWithRedirect” postępuj zgodnie ze sprawdzonymi metodami.import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
getRedirectResult
po załadowaniu strony: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; // 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; // AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
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; // 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
Postępowanie w przypadku błędów dotyczących konta z innymi danymi logowania
Jeśli w konsoli Firebase masz włączone ustawienie Jedno konto na każdy adres e-mail,
gdy użytkownik próbuje zalogować się do usługi (takiej jak Facebook) za pomocą adresu e-mail, który został już
dla dostawcy innego użytkownika Firebase (np. Google), błąd
auth/account-exists-with-different-credential
został rzucany razem z piłką
Obiekt AuthCredential
(token dostępu Facebooka). Aby dokończyć logowanie się w
do dostawcy usług, użytkownik musi najpierw zalogować się do istniejącego dostawcy (Google), a następnie dodać link
poprzednia wartość AuthCredential
(token dostępu Facebooka).
Tryb wyskakującego okienka
Jeśli używasz narzędzia signInWithPopup
, możesz obsłużyć
auth/account-exists-with-different-credential
błędu z kodem podobnym do tego
przykład:
import { getAuth, linkWithCredential, signInWithPopup, FacebookAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Facebook. let result = await signInWithPopup(getAuth(), new FacebookAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Facebook credential. let pendingCred = error.credential; // Step 3: Save the pending credential in temporary storage, // Step 4: Let the user know that they already have an account // but with a different provider, and let them choose another // sign-in method. } } // ... try { // Step 5: Sign the user in using their chosen method. let result = await signInWithPopup(getAuth(), userSelectedProvider); // Step 6: Link to the Facebook credential. // TODO: implement `retrievePendingCred` for your app. let pendingCred = retrievePendingCred(); if (pendingCred !== null) { // As you have access to the pending credential, you can directly call the // link method. let user = await linkWithCredential(result.user, pendingCred); } // Step 7: Continue to app. } catch (error) { // ... }
Tryb przekierowania
Ten błąd jest obsługiwany w podobny sposób w trybie przekierowania z tą różnicą, że oczekująca dane logowania muszą być zapisane w pamięci podręcznej między przekierowaniami stron (np. przy użyciu pamięci sesji).
Zaawansowane: logowanie się ręcznie
Możesz również uwierzytelnić się w Firebase za pomocą konta na Facebooku przez procesu logowania za pomocą pakietu SDK Facebook Login JavaScript:
- Zintegruj logowanie przez Facebooka ze swoją aplikacją, postępując zgodnie z
z dokumentami dla deweloperów.
Pamiętaj, aby skonfigurować Facebook Login za pomocą identyfikatora aplikacji Facebook:
<script src="//connect.facebook.net/en_US/sdk.js"></script> <script> FB.init({ /********************************************************************** * TODO(Developer): Change the value below with your Facebook app ID. * **********************************************************************/ appId: '<YOUR_FACEBOOK_APP_ID>', status: true, xfbml: true, version: 'v2.6', }); </script>
-
Skonfigurowaliśmy też detektor w stanie uwierzytelniania Facebooka:
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
-
Po zintegrowaniu Facebook Login do swoich stron internetowych dodaj przycisk logowania przez Facebooka:
<fb:login-button data-auto-logout-link="true" scope="public_profile,email" size="large" ></fb:login-button>
- W wywołaniu zwrotnym stanu uwierzytelniania Facebooka wymień token uwierzytelniania z odpowiedzi uwierzytelniania Facebooka dla danych logowania Firebase i danych logowania Firebase:
import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); function checkLoginState(response) { if (response.authResponse) { // User is signed-in Facebook. const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => { unsubscribe(); // Check if we are already signed-in Firebase with the correct user. if (!isUserEqual(response.authResponse, firebaseUser)) { // Build Firebase credential with the Facebook auth token. const credential = FacebookAuthProvider.credential( response.authResponse.accessToken); // Sign in with the credential from the Facebook user. signInWithCredential(auth, credential) .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); // ... }); } else { // User is already signed-in Firebase with the correct user. } }); } else { // User is signed-out of Facebook. signOut(auth); } }
function checkLoginState(response) { if (response.authResponse) { // User is signed-in Facebook. var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => { unsubscribe(); // Check if we are already signed-in Firebase with the correct user. if (!isUserEqual(response.authResponse, firebaseUser)) { // Build Firebase credential with the Facebook auth token. var credential = firebase.auth.FacebookAuthProvider.credential( response.authResponse.accessToken); // Sign in with the credential from the Facebook user. firebase.auth().signInWithCredential(credential) .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; // ... }); } else { // User is already signed-in Firebase with the correct user. } }); } else { // User is signed-out of Facebook. firebase.auth().signOut(); } }
- Sprawdź też, czy użytkownik Facebooka nie jest jeszcze zalogowany w Firebase, aby uniknąć niepotrzebnego ponownego uwierzytelnienia:
import { FacebookAuthProvider } from "firebase/auth"; function isUserEqual(facebookAuthResponse, firebaseUser) { if (firebaseUser) { const providerData = firebaseUser.providerData; for (let i = 0; i < providerData.length; i++) { if (providerData[i].providerId === FacebookAuthProvider.PROVIDER_ID && providerData[i].uid === facebookAuthResponse.userID) { // We don't need to re-auth the Firebase connection. return true; } } } return false; }
function isUserEqual(facebookAuthResponse, firebaseUser) { if (firebaseUser) { var providerData = firebaseUser.providerData; for (var i = 0; i < providerData.length; i++) { if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID && providerData[i].uid === facebookAuthResponse.userID) { // We don't need to re-auth the Firebase connection. return true; } } } return false; }
Zaawansowane: uwierzytelnianie za pomocą Firebase w Node.js
Aby uwierzytelnić się w Firebase w aplikacji Node.js:
- Po zalogowaniu się na konto na Facebooku token dostępu. Na przykład zaloguj użytkownika w przeglądarce w sposób opisany w sekcja Obsługa logowania przepływ ręcznie, ale wyślij token dostępu do swojego środowiska Node.js. aplikacji zamiast używać jej w aplikacji klienckiej.
- Gdy uzyskasz token dostępu Facebooka, użyj go do utworzenia
Obiekt danych logowania, a następnie zaloguj użytkownika za pomocą danych logowania:
import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth"; // Sign in with the credential from the Facebook user. const auth = getAuth(); signInWithCredential(auth, credential) .then((result) => { // Signed in const credential = FacebookAuthProvider.credentialFromResult(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 = FacebookAuthProvider.credentialFromError(error); // ... });
// Sign in with the credential from the Facebook user. firebase.auth().signInWithCredential(credential) .then((result) => { // Signed in var credential = result.credential; // ... }) .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; // ... });
Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome
Jeśli tworzysz aplikację rozszerzenia do Chrome, zapoznaj się z Przewodnik po dokumentach poza ekranem
Dostosowywanie domeny przekierowania na potrzeby logowania się przez Facebooka
Podczas tworzenia projektu Firebase udostępni dla niego unikalną subdomenę:
https://my-app-12345.firebaseapp.com
Będzie ona również używana jako mechanizm przekierowania logowania OAuth. Ta domena musi być jest dozwolony dla wszystkich obsługiwanych dostawców protokołu OAuth. Oznacza to jednak, że użytkownicy mogą zobaczyć, w domenie podczas logowania do Facebooka i następuje przekierowanie z powrotem do aplikacji: Otwórz stronę https://my-app-12345.firebaseapp.com.
Aby uniknąć wyświetlania Twojej subdomeny, możesz skonfigurować domenę niestandardową za pomocą Firebase Hosting:
- Wykonaj kroki od 1 do 3 w Skonfiguruj domenę dla usługi Hosting. Po weryfikacji Twojej własności domeny, Hosting udostępnia certyfikat SSL dla Twojej domeny niestandardowej.
- Dodaj swoją domenę niestandardową do listy autoryzowanych domen w
Konsola Firebase:
auth.custom.domain.com
. - W konsoli programisty Facebooka lub na stronie konfiguracji OAuth dodaj do białej listy URL strony przekierowania.
które będą dostępne w Twojej domenie niestandardowej:
https://auth.custom.domain.com/__/auth/handler
- Po zainicjowaniu biblioteki JavaScript określ domenę niestandardową za pomocą atrybutu
Pole
authDomain
:var config = { apiKey: '...', // Changed from '
PROJECT_ID .firebaseapp.com'. authDomain: 'auth.custom.domain.com', databaseURL: 'https://PROJECT_ID .firebaseio.com', projectId: 'PROJECT_ID ', storageBucket: ' ', messagingSenderId: 'PROJECT_ID .firebasestorage.appSENDER_ID ' }; firebase.initializeApp(config);
Dalsze kroki
Gdy użytkownik zaloguje się po raz pierwszy, tworzone jest nowe konto użytkownika. powiązane z danymi logowania, czyli z nazwą użytkownika, hasłem i numerem telefonu, numer telefonu lub informacje o dostawcy uwierzytelniania – użytkownik zalogowany. Ten nowy jest przechowywane w ramach projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w projekcie, niezależnie od tego, jak się loguje.
-
Aby poznać stan uwierzytelniania użytkownika w swoich aplikacjach, ustaw obserwatora na obiekcie
Auth
. Dzięki temu możesz uzyskać dane użytkownika podstawowych informacji o profilu z obiektuUser
. Zobacz Zarządzanie użytkownikami Na liście Firebase Realtime Database i Cloud Storage regułami zabezpieczeń, pobierz ze zmiennej
auth
unikalny identyfikator zalogowanego użytkownika, i używać ich do kontrolowania, do jakich danych użytkownik ma dostęp.
Możesz zezwolić użytkownikom na logowanie się w aplikacji przy użyciu wielokrotnego uwierzytelniania. dostawców, łącząc dane logowania dostawcy uwierzytelniania z istniejącego konta użytkownika.
Aby wylogować użytkownika, wywołaj
signOut
:
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });