Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

Dodaj Firebase do projektu JavaScript.
Na stronie Facebooka dla deweloperów uzyskaj identyfikator aplikacji i tajny klucz aplikacji.
Włącz logowanie przez Facebooka jako dostawcę logowania w projekcie w Firebase:
1. W konsoli Firebase otwórz Zabezpieczenia > Uwierzytelnianie.
2. Na karcie Metoda logowania włącz dostawcę logowania Facebook i określ identyfikator aplikacji oraz tajny klucz aplikacji otrzymane z Facebooka.
3. Upewnij się, że identyfikator URI przekierowania protokołu OAuth (np. my-app-12345.firebaseapp.com/__/auth/handler) jest wymieniony jako jeden z identyfikatorów URI przekierowania protokołu OAuth na stronie ustawień aplikacji na Facebooku w sekcji Ustawienia produktu > Logowanie przez Facebooka na stronie Facebooka dla programistó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:

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

Opcjonalnie: określ dodatkowe zakresy protokołu 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_s
copes.js
```
Web
```
provider.addScope('user_birthday');fac
ebook.js
```
Zapoznaj się z dokumentacją dostawcy uwierzytelniania.

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_se
t_language_code.js

Web

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

Opcjonalnie: określ dodatkowe parametry niestandardowego dostawcy OAuth, które chcesz wysłać wraz z żądaniem OAuth. Aby dodać parametr niestandardowy, wywołaj setCustomParameters w przypadku zainicjowanego dostawcy, używając obiektu zawierającego klucz określony w dokumentacji dostawcy protokołu OAuth i odpowiednią wartość. Przykład:
Web
```
provider.setCustomParameters({
  'display': 9;popup'
});auth_facebook_pr
ovider_params.js
```
Web
```
provider.setCustomParameters({
  'display': 9;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.

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_s
ignin_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;

    // ...
  });faceboo
k.js

Zwróć też uwagę, że możesz pobrać token OAuth dostawcy Facebooka, który można wykorzystać 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_r
edirect.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_redi
rect_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;
    // ...
  });faceboo
k.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.

Obsługa błędów account-exists-with-different-credential

Jeśli w Firebase konsoli włączysz ustawienie Jedno konto na adres e-mail, gdy użytkownik spróbuje zalogować się u dostawcy (np. Facebook) za pomocą adresu e-mail, który już istnieje u innego dostawcy użytkownika Firebase (np. Google), zostanie zgłoszony błąd auth/account-exists-with-different-credential wraz z obiektem AuthCredential (token dostępu do Facebooka). Aby zalogować się u wybranego dostawcy, użytkownik musi najpierw zalogować się u obecnego dostawcy (Google), a następnie połączyć się z poprzednim dostawcą AuthCredential (token dostępu Facebooka).

Jeśli używasz signInWithPopup, możesz obsługiwać błędy auth/account-exists-with-different-credential za pomocą kodu podobnego do tego przykładu:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  FacebookAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Facebook.
  let result = await signInWithPopup(getAuth(), new FacebookAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Facebook credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Facebook credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Tryb przekierowania

W trybie przekierowania ten błąd jest obsługiwany w podobny sposób, z tą różnicą, że oczekujące dane logowania muszą być przechowywane w pamięci podręcznej między przekierowaniami stron (np. przy użyciu pamięci sesji).

Możesz też uwierzytelnić się w Firebase za pomocą konta na Facebooku, obsługując proces logowania za pomocą pakietu Facebook Login JavaScript SDK:

Zintegruj logowanie przez Facebooka z aplikacją, postępując zgodnie z dokumentacją dla programistów. Skonfiguruj logowanie przez Facebooka za pomocą identyfikatora aplikacji na Facebooku:

<script src="//connect.facebook.net/en_US/sdk.js"></script>
<script>
  FB.init({
    /**********************************************************************
     * TODO(Developer): Change the value below with your Facebook app ID. *
     **********************************************************************/
    appId: '<YOUR_FACEBOOK_APP_ID>',
    status: true,
    xfbml: true,
    version: 'v2.6',
  });
</script>

Konfigurujemy też odbiornik stanu autoryzacji Facebooka:

FB.Event.subscribe('auth.authResponseChange', checkLoginState);

Po zintegrowaniu logowania przez Facebooka dodaj przycisk logowania przez Facebooka na stronach internetowych:

<fb:login-button
  data-auto-logout-link="true"
  scope="public_profile,email"
  size="large"
></fb:login-button>

W wywołaniu zwrotnym stanu uwierzytelniania Facebooka wymień token uwierzytelniania z odpowiedzi uwierzytelniania Facebooka na dane logowania Firebase i zaloguj się w Firebase:

Web

import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth";
const auth = getAuth();

function checkLoginState(response) {
  if (response.authResponse) {
    // User is signed-in Facebook.
    const unsubscribe = onAuthStateChanged(auth, (fireb>aseUser) = {
      unsubscribe();
      // Check if we are already signed-in Firebase with the correct user.
      if (!isUserEqual(response.authResponse, firebaseUser)) {
        // Build Firebase credential with the Facebook auth token.
        const credential = FacebookAuthProvider.credential(
            response.authResponse.accessToken);

        // Sign in with the credential from the Facebook user.
        signInWithCredential(auth, credential)
          .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);
            // ...
          });
      } else {
        // User is already signed-in Firebase with the correct user.
      }
    });
  } else {
    // User is signed-out of Facebook.
    signOut(auth);
  }
}auth_facebo
ok_callback.js

Web

function checkLoginState(response) {
  if (response.authResponse) {
    // User is signed-in Facebook.
    var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
      unsubscribe();
      // Check if we are already signed-in Firebase with the correct user.
      if (!isUserEqual(response.authResponse, firebaseUser)) {
        // Build Firebase credential with the Facebook auth token.
        var credential = firebase.auth.FacebookAuthProvider.credential(
            response.authResponse.accessToken);

        // Sign in with the credential from the Facebook user.
        firebase.auth().signInWithCredential(credential)
          .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;
            // ...
          });
      } else {
        // User is already signed-in Firebase with the correct user.
      }
    });
  } else {
    // User is signed-out of Facebook.
    firebase.auth().signOut();
  }
}faceboo
k.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.

Sprawdź też, czy użytkownik Facebooka nie jest już zalogowany w Firebase, aby uniknąć niepotrzebnego ponownego uwierzytelniania:

Web

import { FacebookAuthProvider } from "firebase/auth";

function isUserEqual(facebookAuthResponse, firebaseUser) {
  if (firebaseUser) {
    const providerData = firebaseUser.providerData;
    for (let< i = 0; i  providerData.length; i++) {
      if (providerData[i].providerId === FacebookAuthProvider.PR&&OVIDER_ID 
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}auth_facebook_ch
ecksameuser.js

Web

function isUserEqual(facebookAuthResponse, firebaseUser) {
  if (firebaseUser) {
    var providerData = firebaseUser.providerData;
    for (var i = 0; i < providerData.length; i++) {
      if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}faceboo
k.js

Zaawansowane: uwierzytelnianie w Firebase w Node.js

Aby uwierzytelnić się w Firebase w aplikacji Node.js:

Zaloguj użytkownika za pomocą jego konta na Facebooku i uzyskaj token dostępu do Facebooka. Na przykład zaloguj użytkownika w przeglądarce zgodnie z opisem w sekcji Ręczne obsługiwanie przepływu logowania, ale wyślij token dostępu do aplikacji Node.js zamiast używać go w aplikacji klienckiej.

Po uzyskaniu tokena dostępu do Facebooka użytkownika użyj go do utworzenia obiektu Credential, a następnie zaloguj użytkownika za pomocą tych danych logowania:

Web

import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";

// Sign in with the credential from the Facebook user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then(>(result) = {
    // Signed in 
    const credential = FacebookAuthProvider.credentialFromResult(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
_credential.js

Web

// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
  .then((result) => {
    // Signed in       
    var credential = result.credential;
    // ...
  })
  .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;
    // ...
  });faceboo
k.js

Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome

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

Podczas tworzenia projektu Firebase udostępni dla niego unikalną subdomenę:https://my-app-12345.firebaseapp.com.

Będzie on też używany jako mechanizm przekierowania w przypadku logowania za pomocą OAuth. Ta domena musi być dozwolona w przypadku wszystkich obsługiwanych dostawców OAuth. Oznacza to jednak, że podczas logowania się w Facebooku użytkownicy mogą zobaczyć tę domenę, zanim zostaną przekierowani z powrotem do aplikacji: Kontynuuj: https://my-app-12345.firebaseapp.com.

Aby uniknąć wyświetlania subdomeny, możesz skonfigurować domenę niestandardową za pomocą Firebase Hosting:

Wykonaj kroki 1–3 w artykule Konfigurowanie domeny na potrzeby Hosting. Gdy potwierdzisz własność domeny, Hosting udostępni certyfikat SSL dla Twojej domeny.
Dodaj domenę niestandardową do listy autoryzowanych domen w konsoli Firebase: auth.custom.domain.com.
W konsoli dla deweloperów Facebooka lub na stronie konfiguracji OAuth dodaj do białej listy adres URL strony przekierowania, która będzie dostępna w Twojej domenie niestandardowej:https://auth.custom.domain.com/__/auth/handler.

Podczas inicjowania biblioteki JavaScript określ swoją domenę niestandardową w polu authDomain:

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

Dalsze kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i połączone 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 w 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_s
ign_out.js

Web

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

Uwierzytelnianie przy użyciu logowania przez Facebooka z JavaScriptem Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Zanim zaczniesz

Obsługa procesu logowania za pomocą pakietu Firebase SDK

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Obsługa błędów account-exists-with-different-credential

Tryb wyskakującego okienka

Tryb przekierowania

Zaawansowane: ręczne obsługiwanie procesu logowania

Web

Web

Web

Web

Zaawansowane: uwierzytelnianie w Firebase w Node.js

Web

Web

Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome

Dostosowywanie domeny przekierowania na potrzeby logowania przez Facebooka

Dalsze kroki

Web

Web

Uwierzytelnianie przy użyciu logowania przez Facebooka z JavaScriptem