Cette page a été traduite par l'API Cloud Translation.

S'authentifier avec Facebook Login avec JavaScript

Vous pouvez autoriser vos utilisateurs à s'authentifier avec Firebase à l'aide de leurs comptes Facebook en intégrant Facebook Login dans votre application. Vous pouvez intégrer Facebook Login soit en utilisant le SDK Firebase pour effectuer la procédure de connexion, soit en manuellement le flux de connexion Facebook et en transmettant le jeton d'accès obtenu à Firebase

Avant de commencer

Ajoutez Firebase à votre projet JavaScript.
Sur le site Facebook pour les développeurs, obtenez l'ID d'application et un secret d'application pour votre application.
Activer la connexion Facebook: <ph type="x-smartling-placeholder">
1. Dans la console Firebase, ouvrez la section Authentification.
2. Dans l'onglet Mode de connexion, activez la connexion Facebook. et spécifiez l'ID de l'application et le code secret de l'application que vous avez obtenus via Facebook.
3. Vérifiez ensuite que votre URI de redirection OAuth (par exemple, my-app-12345.firebaseapp.com/__/auth/handler) est répertorié comme l'un de vos URI de redirection OAuth sur la page des paramètres de votre application Facebook, sur le Facebook pour les développeurs Paramètres du produit > Configuration de connexion Facebook.

Gérer le flux de connexion avec le SDK Firebase

Si vous créez une application Web, le moyen le plus simple d'authentifier vos utilisateurs avec Firebase à l'aide de leurs comptes Facebook consiste à gérer le flux de connexion avec le SDK JavaScript Firebase. (Si vous souhaitez authentifier un utilisateur dans Node.js, ou dans un environnement autre qu'un navigateur, vous devez gérer la procédure de connexion manuellement.)

Pour gérer le flux de connexion avec le SDK JavaScript Firebase, procédez comme suit :

Créez une instance de l'objet de fournisseur Facebook :
Web

En savoir plus sur l'API Web modulaire pouvant être allégée par "tree shaking" et sur la mise à niveau depuis l'API avec espace de noms
```
import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();auth_facebook_provider_create.js
```
Web
```
var provider = new firebase.auth.FacebookAuthProvider();facebook.js
```
Facultatif: spécifiez des habilitations OAuth 2.0 supplémentaires que vous voulez demander au fournisseur d'authentification. Pour ajouter un champ d'application, appelez addScope. Exemple :
Web

En savoir plus sur l'API Web modulaire pouvant être allégée par "tree shaking" et sur la mise à niveau depuis l'API avec espace de noms
```
provider.addScope('user_birthday');auth_facebook_provider_scopes.js
```
Web
```
provider.addScope('user_birthday');facebook.js
```
Voir le fournisseur d'authentification documentation.
Facultatif: Localiser le flux OAuth du fournisseur selon les préférences de l'utilisateur sans transmettre explicitement les paramètres OAuth personnalisés pertinents, modifiez la langue sur l'instance Auth avant de démarrer le flux OAuth. Exemple :
Web

En savoir plus sur l'API Web modulaire pouvant être allégée par "tree shaking" et sur la mise à niveau depuis l'API avec espace de noms
```
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
```
Facultatif : spécifiez des paramètres de fournisseur OAuth personnalisés supplémentaires que vous souhaitez envoyer avec la requête OAuth. Pour ajouter un paramètre personnalisé, appelez setCustomParameters sur le fournisseur initialisé avec un objet contenant la clé comme indiqué dans la documentation du fournisseur OAuth et la valeur correspondante. Exemple :
Web

En savoir plus sur l'API Web modulaire pouvant être allégée par "tree shaking" et sur la mise à niveau depuis l'API avec espace de noms
```
provider.setCustomParameters({
  'display': 'popup'
});auth_facebook_provider_params.js
```
Web
```
provider.setCustomParameters({
  'display': 'popup'
});facebook.js
```
Les paramètres OAuth obligatoires réservés ne sont pas autorisés et seront ignorés. Consultez les documentation de référence sur le fournisseur d'authentification.

Authentifiez-vous avec Firebase à l'aide de l'objet du fournisseur Facebook. Vous pouvez inviter vos utilisateurs à se connecter avec leur compte Facebook en ouvrant un ou en vous redirigeant vers la page de connexion. La méthode de redirection est préférable sur les appareils mobiles.

Pour vous connecter via une fenêtre pop-up, appelez 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

Notez également que vous pouvez récupérer le jeton OAuth du fournisseur Facebook, qui peut être utilisé pour récupérer des données supplémentaires à l'aide des API Facebook.

C'est également là que vous pouvez détecter et gérer les erreurs. Pour obtenir la liste des codes d'erreur, consultez la documentation de référence sur l'authentification.

Pour vous connecter en redirigeant vers la page de connexion, appelez signInWithRedirect : Suivez les bonnes pratiques lorsque vous utilisez "signInWithRedirect".

Web

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

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

Web

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

Vous pouvez ensuite récupérer le jeton OAuth du fournisseur Facebook en appelant getRedirectResult lorsque votre page se charge:

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

C'est également là que vous pouvez détecter et gérer les erreurs. Pour obtenir la liste des codes d'erreur, consultez la documentation de référence sur l'authentification.

Gérer les erreurs de compte existant avec un identifiant différent

Si vous avez activé le paramètre Un seul compte par adresse e-mail dans la console Firebase : lorsqu'un utilisateur tente de se connecter à un fournisseur (comme Facebook) avec une adresse e-mail déjà existe pour le fournisseur d'un autre utilisateur Firebase (tel que Google), l'erreur auth/account-exists-with-different-credential est générée avec un AuthCredential (jeton d'accès Facebook). Pour finaliser la connexion l'utilisateur doit d'abord se connecter au fournisseur existant (Google), puis l'associer l'ancienne AuthCredential (jeton d'accès Facebook).

Si vous utilisez signInWithPopup, vous pouvez gérer les erreurs auth/account-exists-with-different-credential avec un code semblable à l'exemple suivant :

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) {
  // ...
}

Mode de redirection

Cette erreur est gérée de la même manière en mode de redirection, à la différence que le bloc "Pending" Les identifiants doivent être mis en cache entre les redirections de page (par exemple, en utilisant le stockage de session).

Vous pouvez également vous authentifier avec Firebase à l'aide d'un compte Facebook en gérant le flux de connexion avec le SDK JavaScript Facebook Login :

Intégrez Facebook Login à votre application en suivant la documentation pour les développeurs. Veillez à configurer Facebook Login avec votre ID d'application 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>

Nous configurons également un écouteur à l'état d'authentification Facebook:
```
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
```

Une fois que vous avez intégré Facebook Login, ajoutez un bouton Facebook Login sur vos pages Web :

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

Dans le rappel de l'état d'authentification Facebook, échangez le jeton d'authentification de la réponse d'authentification de Facebook contre des identifiants Firebase et connectez-vous à 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, (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

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

C'est également là que vous pouvez détecter et gérer les erreurs. Pour obtenir la liste des codes d'erreur, consultez la documentation de référence sur Auth.

Vous devez également vérifier que l'utilisateur Facebook n'est pas déjà connecté à Firebase pour éviter une réauthentification inutile:

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

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

Niveau avancé: s'authentifier avec Firebase dans Node.js

Pour vous authentifier avec Firebase dans une application Node.js, procédez comme suit:

Connecter l'utilisateur avec son compte Facebook et obtenir son compte Facebook un jeton d'accès. Par exemple, connectez l'utilisateur dans un navigateur, comme décrit dans la section Gérer la connexion flow manuellement, mais envoyez le jeton d'accès à votre code application au lieu de l'utiliser dans l'application cliente.

Une fois que vous avez obtenu le jeton d'accès Facebook de l'utilisateur, utilisez-le pour créer un objet d'identifiants, puis connectez l'utilisateur avec les identifiants :

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

S'authentifier avec Firebase dans une extension Chrome

Si vous développez une application d'extension Chrome, consultez la Guide des documents hors écran

Lors de la création du projet, Firebase provisionne un sous-domaine unique pour votre projet : https://my-app-12345.firebaseapp.com.

Il servira également de mécanisme de redirection pour la connexion OAuth. Ce domaine devrait être autorisé pour tous les fournisseurs OAuth compatibles. Toutefois, cela signifie que les utilisateurs peuvent voir ce domaine lorsqu'ils se connectent à Facebook avant d'être redirigés vers l'application : Continuer à : https://my-app-12345.firebaseapp.com.

Pour éviter d'afficher votre sous-domaine, vous pouvez configurer un domaine personnalisé avec Firebase Hosting :

Suivez les étapes 1 à 3 de la section Configurer votre domaine pour Hosting. Lors de la validation la propriété de votre domaine, Hosting provisionne un certificat SSL pour votre domaine personnalisé.
Ajoutez votre domaine personnalisé à la liste des domaines autorisés dans la console Firebase : auth.custom.domain.com.
Dans la console de développement Facebook ou sur la page de configuration OAuth, ajoutez l'URL de la page de redirection à la liste blanche, qui sera accessible sur votre domaine personnalisé: https://auth.custom.domain.com/__/auth/handler

Lorsque vous initialisez la bibliothèque JavaScript, spécifiez votre domaine personnalisé avec le champ 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);

Étapes suivantes

Lorsqu'un utilisateur se connecte pour la première fois, un compte utilisateur est créé et associé aux identifiants (nom et mot de passe de l'utilisateur, numéro de téléphone ou informations du fournisseur d'authentification) avec lesquels l'utilisateur s'est connecté. Cette nouvelle est stocké dans votre projet Firebase et peut servir à identifier un utilisateur dans toutes les applications de votre projet, quelle que soit la façon dont l'utilisateur se connecte.

Pour connaître l'état d'authentification de vos utilisateurs dans vos applications, définissez un observateur sur l'objet Auth. Vous pouvez ensuite obtenir les informations de profil de base de l'objet User. Consultez la section Gérer les utilisateurs.
Dans vos règles de sécurité Firebase Realtime Database et Cloud Storage, vous pouvez obtenir l'ID utilisateur unique de l'utilisateur connecté à partir de la variable auth et l'utiliser pour contrôler les données auxquelles un utilisateur peut accéder.

Vous pouvez autoriser les utilisateurs à se connecter à votre application à l'aide de plusieurs fournisseurs d'authentification en associant les identifiants du fournisseur d'authentification à un compte utilisateur existant.

Pour déconnecter un utilisateur, appelez . 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

S'authentifier avec Facebook Login avec JavaScript

Avant de commencer

Gérer le flux de connexion avec le SDK Firebase

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Gérer les erreurs de compte existant avec un identifiant différent

Mode pop-up

Mode de redirection

Avancé: Gérer le flux de connexion manuellement

Web

Web

Web

Web

Niveau avancé: s'authentifier avec Firebase dans Node.js

Web

Web

S'authentifier avec Firebase dans une extension Chrome

Personnaliser le domaine de redirection pour la connexion Facebook

Étapes suivantes

Web

Web