Uwierzytelnij się za pomocą Facebook Login z JavaScript

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

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

  1. Dodaj Firebase do projektu JavaScript .
  2. Na Facebook dla programistów miejscu, uzyskać identyfikator aplikacji i aplikacji tajemnicą swojej aplikacji.
  3. Włącz Facebook Login:
    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ł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:

  1. Utwórz instancję Facebooku operatora obiektu:

    Web version 9

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js

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

    Web version 9

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

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

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

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

    Web version 9

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

    Web version 8

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    Reserved wymagane parametry OAuth są niedozwolone i będą ignorowane. Zobacz odniesienie dostawcy uwierzytelniania dla więcej szczegółów.
  5. 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 :

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

    // ...
  });
      auth_facebook_signin_popup.js

      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;

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

      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 :

      Web version 9

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

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

      Web version 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ę:

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

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

Uwierzytelniania Firebase w rozszerzeniu Chrome

Jeśli budujesz wydłużania aplikację Chrome, trzeba dodać rozszerzenie Chrome ID:

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

Web version 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

Web version 8

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