Ta strona została przetłumaczona przez Cloud Translation API.

Uwierzytelnianie przy użyciu logowania przez Facebooka z JavaScriptem

Aby umożliwić użytkownikom uwierzytelnianie w Firebase za pomocą kont na Facebooku, zintegruj ze swoją aplikacją funkcję Facebook Login z aplikacją. Możesz zintegrować Facebook Login z użyciem pakietu SDK Firebase, przeprowadzając proces logowania w ramach pakietu SDK Firebase, lub wykonując ręcznie proces logowania do Facebooka i przekazując uzyskany token dostępu do Firebase.

Zanim zaczniesz

Dodaj Firebase do projektu JavaScript.
Ze strony Facebook for Developers pobierz identyfikator aplikacji oraz tajny klucz aplikacji.
Włącz logowanie przez Facebooka:
1. W konsoli Firebase otwórz sekcję Uwierzytelnianie.
2. Na karcie Metoda logowania włącz metodę logowania Facebooka i podaj identyfikator aplikacji oraz tajny klucz aplikacji otrzymane 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 Facebook na stronie Facebook dla programistów w konfiguracji Ustawienia usługi > Logowanie przez Facebooka.

Zarejestruj się za pomocą pakietu SDK Firebase

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

Aby zalogować się za pomocą pakietu SDK Firebase JavaScript, wykonaj te czynności:

Utwórz instancję obiektu dostawcy Facebooka:
Web Modular API

Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.
```
import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();auth_facebook_provider_create.js
```
Interfejs API internetowej przestrzeni nazw
```
var provider = new firebase.auth.FacebookAuthProvider();facebook.js
```
Opcjonalnie: określ dodatkowe zakresy OAuth 2.0, o które chcesz żądać od dostawcy uwierzytelniania. Aby dodać zakres, wywołaj addScope. Przykład:
Web Modular API

Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.
```
provider.addScope('user_birthday');auth_facebook_provider_scopes.js
```
Interfejs API internetowej przestrzeni nazw
```
provider.addScope('user_birthday');facebook.js
```
Zobacz dokumentację dostawcy uwierzytelniania.
Opcjonalnie: aby zlokalizować przepływ OAuth dostawcy na preferowany język użytkownika bez jawnego przekazywania odpowiednich niestandardowych parametrów OAuth, przed rozpoczęciem procesu OAuth zaktualizuj kod języka w instancji Auth. Przykład:
Web Modular API

Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.
```
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
```
Interfejs API internetowej przestrzeni nazw
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
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 za pomocą obiektu zawierającego klucz zgodnie z dokumentacją dostawcy OAuth i odpowiednią wartością. Przykład:
Web Modular API

Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.
```
provider.setCustomParameters({
  'display': 'popup'
});auth_facebook_provider_params.js
```
Interfejs API internetowej przestrzeni nazw
```
provider.setCustomParameters({
  'display': 'popup'
});facebook.js
```
Zarezerwowane wymagane parametry OAuth są niedozwolone i będą ignorowane. Więcej informacji znajdziesz w dokumentacji dostawcy uwierzytelniania.

Uwierzytelnij się w Firebase za pomocą obiektu dostawcy Facebooka. Możesz poprosić użytkowników o zalogowanie się za pomocą kont na Facebooku przez otwarcie wyskakującego okienka lub przekierowanie na stronę logowania. Metoda przekierowania jest preferowana na urządzeniach mobilnych.

Aby zalogować się za pomocą wyskakującego okienka, zadzwoń pod numer signInWithPopup:

Web Modular API

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

Interfejs API internetowej przestrzeni nazw

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ę przez przekierowanie na stronę logowania, wywołaj signInWithRedirect: postępuj zgodnie ze sprawdzonymi metodami w przypadku korzystania z metody „signInWithRedirect”.

Web Modular API

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

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

Interfejs API internetowej przestrzeni nazw

firebase.auth().signInWithRedirect(provider);index.js

Token OAuth dostawcy Facebooka możesz też pobrać, wywołując getRedirectResult podczas wczytywania strony:

Web Modular API

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

Interfejs API internetowej przestrzeni nazw

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.

Postępowanie w przypadku błędów dotyczących konta z innymi danymi logowania

Jeśli w konsoli Firebase masz włączone ustawienie Jedno konto na adres e-mail, to gdy użytkownik próbuje zalogować się w usłudze dostawcy (np. Facebooka) przy użyciu adresu e-mail, który jest już powiązany z dostawcą innego użytkownika Firebase (np. Google), błąd auth/account-exists-with-different-credential jest zgłaszany razem z obiektem AuthCredential (token dostępu Facebooka). Aby zalogować się u docelowego dostawcy, użytkownik musi najpierw zalogować się w dotychczasowym systemie (Google), a następnie połączyć się z poprzednim AuthCredential (tokenem dostępu Facebooka).

Jeśli użyjesz signInWithPopup, możesz naprawić błędy (auth/account-exists-with-different-credential) za pomocą kodu takiego jak ten przykład:

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

Ten błąd jest obsługiwany w podobny sposób w trybie przekierowania z tą różnicą, że oczekujące dane uwierzytelniające muszą być zapisane w pamięci podręcznej między przekierowaniami stron (na przykład przy użyciu pamięci sesji).

Możesz też uwierzytelnić się w Firebase za pomocą konta na Facebooku, korzystając z pakietu SDK Login JavaScript SDK:

Zintegruj ze swoją aplikacją logowanie przez Facebooka, postępując zgodnie z dokumentacją dla deweloperów. Pamiętaj, aby skonfigurować logowanie do Facebooka za pomocą identyfikatora aplikacji Facebook:

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

Skonfigurowaliśmy też detektor w stanie uwierzytelniania Facebooka:
```
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
```

Po zintegrowaniu Facebook Login do swoich stron internetowych dodaj przycisk logowania przez Facebooka:

<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 dla danych logowania Firebase i danych logowania Firebase:

Web Modular API

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, (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.
        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_facebook_callback.js

Interfejs API internetowej przestrzeni nazw

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

Możesz w nim też wykrywać i poprawiać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej uwierzytelniania.

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

Web Modular API

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.PROVIDER_ID &&
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}auth_facebook_checksameuser.js

Interfejs API internetowej przestrzeni nazw

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

Zaawansowane: uwierzytelnianie za pomocą Firebase w Node.js

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

Zaloguj użytkownika za pomocą jego konta na Facebooku i pobierz jego token dostępu. Na przykład zaloguj użytkownika w przeglądarce w sposób opisany w sekcji Obsługuj proces logowania ręcznie, ale wyślij token dostępu do aplikacji Node.js, zamiast używać go w aplikacji klienckiej.

Gdy uzyskasz token dostępu Facebooka dla użytkownika, użyj go do utworzenia obiektu danych logowania, a następnie zaloguj użytkownika za pomocą danych logowania:

Web Modular API

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

Interfejs API internetowej przestrzeni nazw

// 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;
    // ...
  });facebook.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 Twojego projektu unikalną subdomenę: https://my-app-12345.firebaseapp.com.

Będzie ona również używana jako mechanizm przekierowania logowania OAuth. Ta domena musi być dozwolona w przypadku wszystkich obsługiwanych dostawców protokołu OAuth. Oznacza to jednak, że użytkownicy mogą zobaczyć tę domenę podczas logowania się na Facebooku, zanim zostaną przekierowani z powrotem do aplikacji: Przejdź na stronę https://my-app-12345.firebaseapp.com.

Aby uniknąć wyświetlania subdomeny, możesz skonfigurować domenę niestandardową w Hostingu Firebase:

Wykonaj kroki 1–3 z artykułu Konfigurowanie domeny na potrzeby Hostingu. Gdy potwierdzisz własność domeny, Hosting udostępnia certyfikat SSL dla Twojej domeny niestandardowej.
Dodaj swoją domenę niestandardową do listy autoryzowanych domen w konsoli Firebase: auth.custom.domain.com.
W konsoli programisty 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.

Po zainicjowaniu biblioteki JavaScript określ domenę niestandardową w polu authDomain:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

Dalsze kroki

Gdy użytkownik loguje się po raz pierwszy, tworzone jest nowe konto użytkownika, które jest łączone z danymi logowania (nazwa użytkownika i hasło, numer telefonu lub informacje o dostawcy uwierzytelniania). Nowe konto jest przechowywane w ramach Twojego projektu Firebase i może być używane do identyfikowania użytkowników we wszystkich aplikacjach w Twoim projekcie niezależnie od tego, jak się on loguje.

Zalecanym sposobem na poznanie stanu uwierzytelniania użytkownika w aplikacjach jest ustawienie obserwatora w obiekcie Auth. Dzięki temu można uzyskać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.
W regułach zabezpieczeń Bazy danych czasu rzeczywistego Firebase i Cloud Storage możesz pobrać ze zmiennej auth unikalny identyfikator użytkownika zalogowanego użytkownika i użyć go do kontrolowania, do jakich danych użytkownik ma dostęp.

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

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

Web Modular API

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

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

Interfejs API internetowej przestrzeni nazw

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

Uwierzytelnianie przy użyciu logowania przez Facebooka z JavaScriptem

Zanim zaczniesz

Zarejestruj się za pomocą pakietu SDK Firebase

Web Modular API

Interfejs API internetowej przestrzeni nazw

Web Modular API

Interfejs API internetowej przestrzeni nazw

Web Modular API

Interfejs API internetowej przestrzeni nazw

Web Modular API

Interfejs API internetowej przestrzeni nazw

Web Modular API

Interfejs API internetowej przestrzeni nazw

Web Modular API

Interfejs API internetowej przestrzeni nazw

Web Modular API

Interfejs API internetowej przestrzeni nazw

Postępowanie w przypadku błędów dotyczących konta z innymi danymi logowania

Tryb wyskakującego okienka

Tryb przekierowania

Zaawansowane: logowanie się ręcznie

Web Modular API

Interfejs API internetowej przestrzeni nazw

Web Modular API

Interfejs API internetowej przestrzeni nazw

Zaawansowane: uwierzytelnianie za pomocą Firebase w Node.js

Web Modular API

Interfejs API internetowej przestrzeni nazw

Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome

Dostosowywanie domeny przekierowania na potrzeby logowania się przez Facebooka

Dalsze kroki

Web Modular API

Interfejs API internetowej przestrzeni nazw