Uwierzytelnianie przy użyciu logowania przez Facebooka z JavaScriptem

Możesz umożliwić użytkownikom uwierzytelnianie w Firebase za pomocą kont Facebooka, integrując w aplikacji logowanie przez Facebooka. Możesz to zrobić, używając pakietu SDK Firebase do przeprowadzenia procesu logowania lub przeprowadzając proces logowania przez Facebooka ręcznie i przekazując uzyskany token dostępu do Firebase.

Zanim zaczniesz

  1. Dodaj Firebase do projektu JavaScript.
  2. W witrynie Facebook dla deweloperów uzyskaj identyfikator aplikacji i klucz tajny aplikacji.
  3. Włącz logowanie przez Facebooka:
    1. W Firebasekonsoli otwórz sekcję Uwierzytelnianie.
    2. Na karcie Metoda logowania włącz metodę logowania Facebook i określ identyfikator aplikacji oraz klucz tajny aplikacji uzyskane z Facebooka.
    3. Następnie sprawdź, czy 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 na Facebooku w sekcji Ustawienia produktu > Logowanie przez Facebooka na stronie Facebook dla deweloperów.

Obsługa procesu logowania za pomocą pakietu Firebase SDK

Jeśli tworzysz aplikację internetową, najprostszym sposobem uwierzytelniania użytkowników w Firebase za pomocą ich kont na Facebooku jest obsługa procesu logowania za pomocą pakietu Firebase JavaScript SDK. (Jeśli chcesz uwierzytelnić użytkownika w Node.js lub innym środowisku przeglądarki, musisz ręcznie obsłużyć proces logowania).

Aby obsłużyć proces logowania za pomocą pakietu Firebase JavaScript SDK, wykonaj te czynności:

  1. Utwórz instancję obiektu dostawcy Facebooka:

    Web

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js

    Web

    var provider = new firebase.auth.FacebookAuthProvider();
    facebook.js
  2. Opcjonalnie: określ dodatkowe zakresy OAuth 2.0, o które chcesz poprosić dostawcę uwierzytelniania. Aby dodać zakres, wywołaj funkcję addScope. Przykład:

    Web

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

    Web

    provider.addScope('user_birthday');
    facebook.js
    Zapoznaj się z dokumentacją dostawcy uwierzytelniania.
  3. Opcjonalnie: aby dostosować obsługę protokołu OAuth dostawcy do preferowanego języka użytkownika bez jawnego przekazywania odpowiednich niestandardowych parametrów OAuth, zaktualizuj kod języka w instancji Auth przed rozpoczęciem obsługi protokołu OAuth. Przykład:

    Web

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    Web

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. Opcjonalnie: określ dodatkowe parametry niestandardowego dostawcy OAuth, które chcesz wysłać z żądaniem OAuth. Aby dodać parametr niestandardowy, wywołaj funkcję setCustomParameters w przypadku zainicjowanego dostawcy, używając obiektu zawierającego klucz określony w dokumentacji dostawcy OAuth i odpowiednią wartość. Przykład:

    Web

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

    Web

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    Zarezerwowane wymagane parametry OAuth są niedozwolone i będą ignorowane. Więcej informacji znajdziesz w materiałach referencyjnych dotyczących dostawcy uwierzytelniania.
  5. Uwierzytelnij się w Firebase za pomocą obiektu dostawcy Facebook. Możesz poprosić użytkowników o zalogowanie się za pomocą kont Facebook, otwierając wyskakujące okienko lub przekierowując ich na stronę logowania. Na urządzeniach mobilnych preferowana jest metoda przekierowania.
    • Aby zalogować się w wyskakującym okienku, wywołaj funkcję signInWithPopup:

      Web

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

    // ...
  });
      auth_facebook_signin_popup.js

      Web

      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;

    // ...
  });
      facebook.js
      Zwróć też uwagę, że możesz pobrać token OAuth dostawcy Facebooka, którego można użyć do pobierania dodatkowych danych za pomocą interfejsów API Facebooka.

      W tym miejscu możesz też wykrywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej dotyczącej autoryzacji.

    • Aby zalogować się przez przekierowanie na stronę logowania, wywołaj funkcję signInWithRedirect: Podczas korzystania z funkcji `signInWithRedirect` postępuj zgodnie ze sprawdzonymi metodami.

      Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Web

      firebase.auth().signInWithRedirect(provider);
      index.js
      Następnie możesz też pobrać token OAuth dostawcy Facebooka, wywołując getRedirectResult po wczytaniu strony:

      Web

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

      Web

      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;
    // ...
  });
      facebook.js
      W tym miejscu możesz też wykrywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej dotyczącej autoryzacji.

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 zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i powiązane z danymi logowania, czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania, za pomocą których użytkownik się zalogował. Nowe konto jest przechowywane w projekcie Firebase i może służyć do identyfikowania użytkownika we wszystkich aplikacjach w projekcie, niezależnie od sposobu logowania.

  • Zalecanym sposobem sprawdzania stanu autoryzacji użytkownika w aplikacjach jest ustawienie obserwatora na obiekcie Auth. Następnie możesz pobrać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.

  • W Firebase Realtime Database i Cloud Storage regułach bezpieczeństwa możesz pobrać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik ma dostęp.

Możesz zezwolić użytkownikom na logowanie się w aplikacji za pomocą wielu dostawców uwierzytelniania, łącząc dane logowania dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj funkcję signOut:

Web

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

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

Web

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