Uwierzytelnianie przy użyciu logowania przez Facebooka z JavaScriptem

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

  1. Dodaj Firebase do projektu JavaScript.
  2. na stronie Facebook for Developers, pobierz identyfikator aplikacji i klucz tajny aplikacji.
  3. Włącz logowanie przez Facebooka:
    1. W konsoli Firebase otwórz sekcję Uwierzytelnianie.
    2. 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.
    3. 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:

  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, których potrzebujesz których chcesz żądać od dostawcy uwierzytelniania. Aby dodać zakres, wywołaj addScope Przykład:

    Web

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

    Web

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

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

    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. Zobacz odniesienie do dostawcy uwierzytelniania, aby dowiedzieć się więcej.
  5. 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:

      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, za pomocą którego można pobrać dodatkowe dane za pomocą interfejsów API Facebooka.

      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.

      Web

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

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

      Web

      firebase.auth().signInWithRedirect(provider);
      index.js
      Token OAuth dostawcy Facebooka możesz też pobrać, wywołując getRedirectResult po załadowaniu 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
      Możesz w nim też wykrywać i poprawiać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej uwierzytelniania.
.

Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome

Jeśli tworzysz aplikację rozszerzenia do Chrome, zapoznaj się z Przewodnik po dokumentach poza ekranem

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

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