Google is committed to advancing racial equity for Black communities. See how.
Ta strona została przetłumaczona przez Cloud Translation API.
Switch to English

Uwierzytelnij się za pomocą logowania na Facebooku z JavaScriptem

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

  1. Dodaj Firebase do swojego projektu JavaScript .
  2. W witrynie Facebook for Developers pobierz identyfikator aplikacji i klucz tajny aplikacji.
  3. Włącz logowanie na Facebooku:
    1. W konsoli Firebase otwórz sekcję Uwierzytelnianie .
    2. Na karcie Metoda logowania włącz metodę logowania do serwisu Facebook i określ identyfikator aplikacji oraz klucz tajny aplikacji uzyskany z serwisu Facebook.
    3. 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:

  1. Utwórz wystąpienie obiektu dostawcy Facebooka:

    Web v8

    var provider = new firebase.auth.FacebookAuthProvider();
    facebook.js

    Web v9

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js
  2. 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:

    Web v8

    provider.addScope('user_birthday');
    facebook.js

    Web v9

    provider.addScope('user_birthday');
    auth_facebook_provider_scopes.js
    Zobacz dokumentację dostawcy uwierzytelniania .
  3. 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();
    index.js

    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();
    auth_set_language_code.js
  4. 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:

    Web v8

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js

    Web v9

    provider.setCustomParameters({
  'display': 'popup'
});
    auth_facebook_provider_params.js
    Zarezerwowane wymagane parametry OAuth są niedozwolone i zostaną zignorowane. Więcej informacji można znaleźć w dokumentacji dostawcy uwierzytelniania .
  5. 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 :

      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;

    // ...
  });
      facebook.js

      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);

    // ...
  });
      auth_facebook_signin_popup.js
      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.

      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 :

      Web v8

      firebase.auth().signInWithRedirect(provider);
      index.js

      Web v9

      import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js
      Następnie możesz również pobrać token OAuth dostawcy Facebooka, wywołując getRedirectResult podczas ładowania strony:

      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;
    // ...
  });
      facebook.js

      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);
    // ...
  });
      auth_facebook_signin_redirect_result.js
      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 .

Uwierzytelnij się w Firebase w rozszerzeniu do Chrome

Jeśli tworzysz rozszerzenie do Chrome, musisz dodać swój identyfikator rozszerzenia do Chrome:

  1. Otwórz projekt w konsoli Firebase .
  2. W sekcji Uwierzytelnianie otwórz stronę Metoda logowania .
  3. 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 obiekcie Auth . Następnie możesz uzyskać podstawowe informacje o profilu User obiektu User . 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.
});
index.js

Web v9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js