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

Procéder à la connexion des utilisateurs avec Facebook

Ce document explique comment utiliser Identity Platform pour connecter des utilisateurs avec Facebook.

Avant de commencer

Ce tutoriel suppose que vous avez déjà activé Identity Platform et que vous disposez d'une application Web de base écrite en HTML et JavaScript. Pour savoir comment, consultez le guide de démarrage rapide.

Configurer Facebook en tant que fournisseur

Pour configurer Facebook comme fournisseur d'identité :

Accédez à la page Fournisseurs d'identité dans la console Google Cloud.

Accéder à la page "Fournisseurs d'identité"
Cliquez sur Ajouter un fournisseur.
Sélectionnez Facebook dans la liste.
Saisissez votre ID d'application et votre code secret de l'application Facebook. Si vous ne possédez pas encore d'ID et de secret, vous pouvez en obtenir un sur la page Facebook for Developers.
Configurez l'URI indiqué sous Configure Facebook (Configurer Facebook) en tant qu'URI de redirection OAuth valide pour votre application Facebook. Si vous avez configuré un domaine personnalisé dans Identity Platform, mettez à jour l'URI de redirection dans la configuration de votre application Facebook afin d'utiliser le domaine personnalisé au lieu du domaine par défaut. Par exemple, remplacez https://myproject.firebaseapp.com/__/auth/handler par https://auth.myownpersonaldomain.com/__/auth/handler.
Enregistrez les domaines de votre application en cliquant sur Ajouter un domaine sous Domaines autorisés. À des fins de développement, localhost est déjà activé par défaut.
Sous Configurer votre application, cliquez sur Informations sur la configuration. Copiez l'extrait dans le code de votre application pour initialiser le SDK client Identity Platform.
Cliquez sur Enregistrer.

Procéder à la connexion des utilisateurs avec le SDK client

Créez une instance de l'objet de fournisseur Facebook :
JavaScript
```
var provider = new firebase.auth.FacebookAuthProvider();
```
Facultatif : Ajoutez des champs d'application OAuth. Les champs d'application spécifient les données que vous demandez à Facebook. Des données plus sensibles peuvent nécessiter des champs d'application spécifiques. Consultez la documentation du fournisseur pour déterminer les champs d'application dont votre application a besoin.
JavaScript
```
provider.addScope('user_birthday');
```

Facultatif : Localisez le flux d'authentification. Vous pouvez spécifier un langage ou utiliser le langage par défaut de l'appareil :

JavaScript

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

Facultatif : spécifiez des paramètres OAuth personnalisés supplémentaires. Ces paramètres sont spécifiques à Facebook et sont généralement utilisés pour personnaliser l'authentification. Vous ne pouvez pas transmettre des paramètres réservés par OAuth ou Identity Platform.
JavaScript
```
provider.setCustomParameters({
'display': 'popup'
});
```

Utilisez l'objet du fournisseur Facebook pour vous connecter à l'utilisateur. Vous pouvez soit ouvrir une fenêtre pop-up, soit rediriger la page actuelle. La redirection est plus facile pour les utilisateurs d'appareils mobiles.

Remarque : Facebook nécessite l'utilisation du protocole HTTPS pour les applications de production et n'autorise pas la connexion avec des hôtes non sécurisés. Si vous développez votre application localement à l'aide de l'origine http://localhost, assurez-vous que votre application Facebook est en mode de développement et que vous vous connectez avec un compte de test enregistré.

Pour afficher une fenêtre pop-up, appelez signInWithPopup() :

JavaScript

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;

    // ...
  });

Pour rediriger la page, appelez d'abord signInWithRedirect().

Suivez les bonnes pratiques lorsque vous utilisez signInWithRedirect, linkWithRedirect ou reauthenticateWithRedirect.

JavaScript

firebase.auth().signInWithRedirect(provider);

Ensuite, récupérez le jeton Facebook en appelant getRedirectResult() lors du chargement de votre page :

JavaScript

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

Une fois que vous disposez d'un jeton d'accès, vous pouvez l'utiliser pour appeler l'API Facebook. Exemple :

REST

curl "https://graph.facebook.com/me?fields=id,name&access_token=[TOKEN]"

Procéder à la connexion manuelle des utilisateurs

Si vous ne souhaitez pas utiliser le SDK client, vous pouvez également gérer le flux de connexion manuellement.

Cette méthode de connexion est également compatible avec la connexion Facebook pour les jeux en tant que fournisseur d'identité. Identity Platform ne permet pas d'implémenter manuellement la connexion Facebook pour les jeux. Il n'accepte les jetons que pour l'échange d'identifiants Identity Platform.

Intégrez Facebook ou Facebook Login pour l'authentification de jeu dans votre application en suivant la procédure décrite dans la documentation destinée aux développeurs:
- Documentation Facebook pour les développeurs
- Documentation pour les développeurs sur Facebook Login for Gaming
Connectez l'utilisateur avec Facebook ou Facebook Login pour les jeux à l'aide du flux que vous avez implémenté à l'étape précédente.
Remplacez le jeton que vous avez reçu de la connexion Facebook ou Facebook pour le gaming par des identifiants Identity Platform:
JavaScript
```
var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);
```

Utilisez l'identifiant pour connecter l'utilisateur avec Identity Platform :

JavaScript

// Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });

Étapes suivantes

En savoir plus sur les utilisateurs d'Identity Platform.
Procéder à la connexion des utilisateurs avec d'autres fournisseurs d'identité.