Uwierzytelnij się za pomocą logowania na Facebooku za pomocą JavaScript

Możesz pozwolić swoim użytkownikom na uwierzytelnianie się w Firebase przy użyciu ich kont na Facebooku, integrując logowanie Facebook ze swoją aplikacją. Logowanie do Facebooka można zintegrować za pomocą zestawu SDK Firebase do przeprowadzenia procesu logowania lub ręcznie przeprowadzając proces logowania na Facebooku i przekazując otrzymany token dostępu do Firebase.

Zanim zaczniesz

  1. Dodaj Firebase do projektu JavaScript .
  2. Na Facebook dla programistów miejscu, uzyskać identyfikator aplikacji i aplikacji tajemnicą swojej aplikacji.
  3. Włącz logowanie przez Facebooka:
    1. W konsoli Firebase otwórz sekcję Auth.
    2. Na karcie Logowanie w metodzie umożliwienia logowania metody Facebook i podać identyfikator aplikacji i aplikacji sekret, którego dostał od Facebooka.
    3. 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ługuj proces logowania za pomocą pakietu Firebase SDK

Jeśli tworzysz aplikację internetową, najłatwiejszym sposobem uwierzytelnienia 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 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 te czynności:

  1. Utwórz instancję obiektu dostawcy Facebooka:

    Wersja internetowa 9

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js

    Wersja internetowa 8

    var provider = new firebase.auth.FacebookAuthProvider();
    facebook.js
  2. Opcjonalnie: określić dodatkowe zakresy OAuth 2.0, który chcesz wniosek dostawcy uwierzytelniania. Aby dodać zakres, zadzwoń addScope . Na przykład:

    Wersja internetowa 9

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

    Wersja internetowa 8

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

    Wersja internetowa 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();
    auth_set_language_code.js

    Wersja internetowa 8

    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 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:

    Wersja internetowa 9

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

    Wersja internetowa 8

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    Zarezerwowane wymagane parametry OAuth są niedozwolone i zostaną zignorowane. Zobacz odniesienie dostawcy uwierzytelniania dla więcej szczegółów.
  5. Uwierzytelnij się w Firebase za pomocą obiektu dostawcy Facebooka. Możesz poprosić użytkowników o zalogowanie się na ich konta na Facebooku, otwierając wyskakujące okienko lub przekierowując do strony logowania. Metoda przekierowania jest preferowana na urządzeniach mobilnych.
    • Aby zalogować się za pomocą wyskakującego okienka, call signInWithPopup :

      Wersja internetowa 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.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);

    // ...
  });
      auth_facebook_signin_popup.js

      Wersja internetowa 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;

    // ...
  });
      facebook.js
      Zauważ też, że możesz pobrać token OAuth dostawcy Facebooka, który może być użyty do pobrania dodatkowych danych za pomocą interfejsów API Facebooka.

      Tutaj też możesz wyłapać i obsłużyć błędy. 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 :

      Wersja internetowa 9

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

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

      Wersja internetowa 8

      firebase.auth().signInWithRedirect(provider);
      index.js
      Następnie można również pobierać dostawcy Facebooka tokenu OAuth wywołując getRedirectResult gdy twój strona ładuje się:

      Wersja internetowa 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.email;
    // AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });
      auth_facebook_signin_redirect_result.js

      Wersja internetowa 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;
    // ...
  });
      facebook.js
      Tutaj też możesz wyłapać i obsłużyć błędy. Aby uzyskać listę kodów błędów mają zapoznać się z Autentycznymi Odniesienia Docs .

Uwierzytelnij się w Firebase w rozszerzeniu Chrome

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

  1. Otwórz swój projekt w konsoli Firebase .
  2. W sekcji Uwierzytelnianie otworzyć stronę logowania metody.
  3. 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. Powinieneś wywoływać te metody ze skryptu strony w tle, a nie z wyskakującego okienka akcji przeglądarki, ponieważ wyskakujące okienko uwierzytelniania anuluje wyskakujące okienko akcji 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

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i połączone z poświadczeniami — czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania — przy użyciu których użytkownik się zalogował. To nowe konto jest przechowywane jako część projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w projekcie, niezależnie od tego, jak się on loguje.

  • 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 od User 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 :

Wersja internetowa 9

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

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

Wersja internetowa 8

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