Facebook Login pour le web avec le SDK JavaScript

Ce document vous guide à travers les étapes de mise en œuvre de la connexion Facebook avec le SDK Facebook pour JavaScript sur votre page web.

Si vous êtes utilisateur Facebook et que vous ne parvenez pas à vous connecter à votre compte, consultez nos Pages d’aide.

Avant de commencer

Vous aurez besoin des éléments suivants :

Un compte de développeur Facebook
Une app Facebook inscrite dont les paramètres de base sont configurés
Le SDK Facebook pour JavaScript

Si, pour une raison quelconque, vous ne pouvez pas utiliser notre SDK JavaScript, vous pouvez créer manuellement un flux de connexion pour implémenter Facebook Login.

1. Saisir votre URL de redirection dans l’Espace App

Dans l’Espace App, sélectionnez votre app, puis faites défiler vers Ajouter un produit Cliquez sur Configurer dans la carte Facebook Login. Sélectionnez Paramètres dans le panneau de navigation gauche, puis, sous les Paramètres OAuth clients, saisissez votre URL de redirection dans le champ URI de redirection OAuth valides pour que l’autorisation fonctionne.

2. Vérifier l’état de la connexion d’une personne

La première étape pour charger votre page web consiste à déterminer si une personne est déjà connectée à votre page web avec Facebook Login. Un appel de FB.getLoginStatus déclenche un appel vers Facebook pour obtenir l’état de la connexion. Facebook appelle alors votre fonction de rappel avec les résultats.

Exemple d’appel

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

Exemple de réponse JSON

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

status indique l’état de connexion de la personne qui utilise la page web. Le status peut être l’une des valeurs suivantes :

Type `Status`	Description
`connected`	La personne est connectée à Facebook et à votre page web.
`not_authorized`	La personne est connectée à Facebook, mais pas à votre page web.
`unknown`	La personne n’est pas connectée à Facebook, donc vous ne pouvez pas savoir si elle est connectée à votre page web. Il est également possible que la fonction FB.logout() ait été appelée auparavant et, par conséquent, votre app ne peut pas se connecter à Facebook.

Si le statut est connected, les paramètres authResponse sont inclus dans la réponse :

Paramètres `authResponse`	Valeur
`accessToken`	Token d’accès pour la personne qui utilise la page web.
`expiresIn`	Horodatage UNIX d’expiration du token. Une fois le token arrivé à expiration, la personne doit se reconnecter.
`reauthorize_required_in`	Durée, en secondes, avant que la connexion expire et que la personne doive se reconnecter.
`signedRequest`	Paramètre signé qui contient des informations sur la personne utilisant votre page web.
`userID`	ID de la personne utilisant votre page web.

Vous n’avez rien à faire de votre côté pour activer ce comportement, car le SDK JavaScript exécute automatiquement le statut de connexion.

Si une personne ouvre votre page web mais n’est pas connectée à l’app ni Facebook, vous pouvez utiliser la boîte de dialogue Login pour l’inviter à se connecter à la fois à l’appareil et à la plate-forme. Si elle n’est pas connectée à Facebook, elle sera d’abord invitée à se connecter, puis invitée à se connecter à votre page web.

Il y a deux manières d’inviter une personne à se connecter :

Le bouton Facebook Login
La boîte de dialogue Login du SDK JavaScript

A. Se connecter au moyen du bouton Login

Pour utiliser le bouton Facebook Login, personnalisez le bouton Login et obtenez le code à l’aide de notre Configurateur de plugins

Configurateur de plugins

Width

Taille du bouton

large

Texte du bouton

continue_with

Activer le bouton Déconnexion

Inclure le nom et la photo de profil lorsque l’utilisateur est connecté sur Facebook [?]

Obtenir le code

B. Se connecter à l’aide de la boîte de dialogue Login depuis le SDK JavaScript

Pour utiliser votre propre bouton Login, invoquez la boîte de dialogue Login à l’aide d’un appel vers FB.login() :

FB.login(function(response){
  // handle the response 
});

Demander des autorisations supplémentaires

Lorsqu’une personne clique sur votre bouton HTML, une fenêtre contextuelle s’affiche avec la boîte de dialogue Login. Cette boîte de dialogue vous permet de demander l’autorisation d’accéder aux données d’une personne. Le paramètre scope peut être transmis avec l’appel de fonction FB.login(). Ce paramètre facultatif est une liste d’autorisations, séparées par des virgules, qu’une personne doit confirmer pour permettre à votre page web d’accéder à ses données.

Exemple d’appel

Cet exemple demande à la personne qui se connecte si votre page web peut avoir l’autorisation d’accéder à son profil public et à son e-mail.

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

Gérer la réponse de la boîte de dialogue Login

Qu’il s’agisse d’une connexion ou d’une annulation, la réponse renvoie un objet authResponse vers le rappel spécifié lorsque vous appelez FB.login(). Cette réponse peut être détectée et gérée dans l’appel FB.login().

Exemple d’appel

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

4. Déconnecter une personne

Déconnectez une personne de votre page web en reliant la fonction FB.logout() du SDK JavaScript à un bouton ou à un lien.

Exemple d’appel

FB.logout(function(response) {
   // Person is now logged out
});

Remarque : Cet appel de fonction déconnecte également la personne de Facebook.

Scénarios à prendre en compte

Une personne se connecte à Facebook, puis se connecte à votre page web. Lorsqu’elle se déconnecte de votre app, elle est toujours connectée à Facebook.
Une personne se connecte à votre page web et à Facebook par l’intermédiaire du processus de connexion de votre app. Lorsqu’elle se déconnecte de votre app, elle est également déconnectée de Facebook.
Une personne se connecte à une autre page web et à Facebook par l’intermédiaire du processus de connexion de l’autre page web, puis se connecte à votre page web. Lorsqu’elle se déconnecte de l’une ou l’autre des pages web, elle est déconnectée de Facebook.

De plus, le fait de se déconnecter de votre page web ne révoque pas les autorisations que la personne a accordées à celle-ci pendant la connexion. La révocation d’autorisations doit être effectuée séparément. Créez votre page web de telle sorte qu’une personne qui s’est déconnectée ne verra pas la boîte de dialogue de connexion lorsqu’elle se reconnectera.

Exemple de code complet

Ce code charge et initialise le SDK JavaScript dans votre page HTML. Remplacez {app-id} par votre ID d’app, et {api-version} par la version de l’API Graph à utiliser. Spécifiez la version la plus récente, à moins d’avoir une raison particulière d’utiliser une version plus ancienne. v5.0.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };

  
  (function(d, s, id) {                      // Load the SDK asynchronously
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

</script>


//  The JS SDK Login Button 

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

</body>
</html>