Facebook Login pour appareils

Si vous cherchez de l’aide pour votre Portal Facebook, rendez-vous sur le site Pages d’aide Portal.

Pour entrer votre code Facebook pour les appareils afin de vous connecter votre smart TV, caméra, imprimante ou un autre appareil, rendez-vous sur la page Facebook pour les appareils.

Implémentez Facebook Login pour les appareils pour permettre aux utilisateurs de se connecter à votre app ou à votre service avec leur compte Facebook. Cette fonctionnalité permet aux personnes de se connecter à des appareils dont le débit est limité ou avec des fonctionnalités d’affichage comme les smart TV, les cadres photo numériques ou tout autre appareil connecté (Internet des objets).

Dans ce processus de connexion, votre appareil affiche un code alphanumérique que les utilisateurs doivent ensuite saisir sur une page web depuis leur ordinateur de bureau ou leur smartphone. Les utilisateurs de votre app ou de votre service peuvent alors accorder des autorisations. Dès que votre app aura obtenu ces autorisations, l’appareil recevra un token d’accès que votre app utilisera pour envoyer des demandes de l’API Graph afin d’identifier l’utilisateur et d’obtenir des informations permettant de proposer une expérience plus personnelle sur l’appareil.

Si vous créez une app TV pour Apple TV, Android TV ou Fire TV, vous devez utiliser le SDK Facebook pour tvOS ou le SDK Facebook pour Android.

Ce guide décrit le processus d’intégration manuelle de la connexion par appareil sans utiliser les SDK indiqués ci-dessus.

Expérience utilisateur
Implémenter Facebook Login pour appareils
Résolution des erreurs

Expérience utilisateur

Ces directives visent à expliquer comment mettre au point une expérience de connexion claire, sûre et cohérente sur plusieurs appareils et services.

1. Appel à l’action

Tout d’abord, déterminez à quel moment vous souhaitez proposer aux utilisateurs de se connecter avec Facebook. Certains appareils affichent directement le message à l’écran alors que d’autres l’affichent plus tard au cours de l’expérience.

Pour garantir une expérience utilisateur de qualité, à savoir fonctionnelle, cohérente et fiable, créez un appel à l’action ressemblant autant que possible au bouton Facebook Login officiel.

En ce qui concerne le visuel, nos recommandations sont les suivantes :

Appliquez le texte Se connecter avec Facebook ou Connectez-vous à Facebook au bouton.
Utilisez du blanc et le bleu officiel de Facebook : #1877F2.
Intégrez le logo officiel « f » si votre appareil prend en charge l’affichage graphique. Conformément aux directives sur la marque Facebook, le logo doit toujours être blanc ou de la couleur bleue officielle de Facebook (#1877F2).

Le cas échéant, décrivez les avantages de la connexion avec Facebook. Par exemple : « Découvrez ce que vos amis regardent » ou « Regardez les photos de vos albums Facebook ».

2. Afficher le code

Lorsqu’un utilisateur clique sur l’appel à l’action, votre appareil passe un appel vers l’API de Facebook et celle-ci renvoie un code.

Ensuite, dans votre interface, indiquez à l’utilisateur qu’il doit se rendre sur un site web et saisir un code à l’aide du message suivant : À présent, rendez-vous sur facebook.com/device (http://facebook.com/device) sur votre ordinateur ou votre smartphone pour saisir le code ci-dessous. Affichez le code complet que l’API Device Login de Facebook vous a envoyé. Le code doit contenir entre 6 et 12 caractères.

Vous pouvez intégrer un bouton Close ou Cancel afin que les utilisateurs puissent annuler le processus de connexion depuis l’appareil. Ils devraient être redirigés vers l’écran de connexion d’origine.

Lorsque le code apparaît à l’écran, votre appareil sonde l’API Device Login pour vérifier que l’utilisateur a accordé les autorisations requises à votre app. Si l’utilisateur ne saisit toujours pas le code après quelques minutes, l’API Device Login renvoie une erreur code_expired. Lorsque votre appareil reçoit cette erreur, vous devez annuler le processus de connexion et l’interface doit afficher l’appel à l’action.

Il est également possible de générer les codes QR à l’aide du code utilisateur intégré à l’URL. Cette opération s’effectue en ajoutant le paramètre user_code à l’URL :

https://www.facebook.com/device?user_code=<USER_CODE>

3. Autorisation

L’utilisateur qui saisit facebook.com/device dans son navigateur de bureau ou mobile accède à ce processus. Il verra d’abord apparaître un champ de texte dans lequel il doit saisir son code :

Après avoir saisi le code et cliqué sur Continue, il peut choisir les autorisations à accorder :

Un message de confirmation indique ensuite à l’utilisateur que la connexion a été correctement établie :

4. Confirmer la connexion

Nous vous conseillons également d’afficher un message de confirmation sur l’interface de votre appareil. Dans l’idéal, il faut que le message inclue le nom de l’utilisateur et, si possible, sa photo de profil Facebook.

Affichez ce message de confirmation sur son appareil jusqu’à ce que l’utilisateur clique sur le bouton Continue. En effet, il peut arriver qu’un utilisateur saisisse le code sur un ordinateur alors qu’il n’est pas chez lui. Par conséquent, il est important que le message de confirmation s’affiche encore à l’écran lorsqu’il rentrera et allumera votre appareil.

Une fois que l’utilisateur a cliqué sur Continue, votre appareil est capable de lui proposer une expérience de qualité et personnalisée.

5. Déconnecter les utilisateurs

Les utilisateurs doivent pouvoir se déconnecter de votre appareil, et votre appareil doit être configuré de manière à ne pas conserver leur connexion avec Facebook. Pour ce faire, proposez l’option Log out from Facebook ou Disconnect from Facebook dans le menu de votre appareil.

Lorsqu’un utilisateur sélectionne cette option, votre appareil doit supprimer le token d’accès stocké de sa mémoire. Si vous stockez le token d’accès dans une base de données ou dans le cloud, vous devez également le supprimer de ces solutions de stockage. Vous ne devez pas passer d’appel d’API pour annuler la validité du token d’accès.

Une fois qu’un utilisateur s’est déconnecté, votre appareil doit afficher l’appel à l’action d’origine décrit à l’étape 1.

Implémenter Facebook Login pour appareils

La fonctionnalité Facebook Login pour appareils est destinée aux appareils qui passent des appels HTTP sur Internet. Vous trouverez ci-dessous les appels et réponses d’API que votre appareil peut envoyer/recevoir.

Chargez votre Espace App, puis dans Produit > Connexion Facebook > Paramètres > Connexion depuis des appareils, sélectionnez Oui.

2. Générer un code

Lorsque l’utilisateur clique sur l’appel à l’action Connect to Facebook ou Log in with Facebook, votre appareil doit envoyer une demande HTTP POST vers :

POST https://graph.facebook.com/v2.6/device/login
       access_token=<YOUR_APP_ID|CLIENT_TOKEN>
       scope=<COMMA_SEPARATED_PERMISSION_NAMES> // e.g. public_profile,user_likes
       redirect_uri=<VALID_OAUTH_REDIRECT_URL>

Le paramètre scope est facultatif et doit contenir une liste des autorisations de connexion approuvées aux fins d’utilisation lors de l’Examen de connexion et séparées par des virgules.

Vous trouverez le CLIENT_TOKEN sous Paramètres de l’application > Avancé. Vous devrez l’associer à l’ID de votre app (séparée par une barre verticale |) pour former le access_token complet.

L’URI redirect_uri est un paramètre facultatif. Lorsque vous fournissez une URL, l’utilisateur sera redirigé vers celle-ci lorsqu’il aura mis fin à la connexion. Ceci vous permet de connecter l’utilisateur au site web de votre app pour une gestion de compte supplémentaire. Cette URL doit être une URL de redirection OAuth valide, telle que configurée sous Paramètres de l’application > Avancé. La réponse se présente sous la forme suivante :

{
  "code": "92a2b2e351f2b0b3503b2de251132f47",
  "user_code": "A1NWZ9",
  "verification_uri": "https://www.facebook.com/device",
  "expires_in": 420,
  "interval": 5
}

Elle signifie :

Affichez la chaîne A1NWZ9 sur votre appareil.
Dites à l’utilisateur d’accéder à « facebook.com/device » et de saisir ce code.
Le code expire dans 420 secondes. Une fois ce délai passé, vous devez annuler le processus de connexion si vous n’avez reçu aucun token d’accès.
Votre appareil doit sonder l’API Device Login toutes les cinq secondes pour vérifier que l’autorisation a été accordée.

3. Afficher le code

Votre appareil doit afficher le user_code et inviter l’utilisateur à se rendre sur l’URI verification_uri, comme facebook.com/device, depuis son ordinateur ou son smartphone. Consultez la page Expérience utilisateur.

4. Sonder à la recherche d’autorisations

Votre appareil doit sonder l’API Device Login pour vérifier si l’utilisateur a accordé les autorisations requises à votre app. Vous devez effectuer cette opération en respectant l’interval spécifié dans la réponse de votre appel à l’étape 1, soit toutes les cinq secondes. Votre appareil doit sonder les éléments suivants :

POST https://graph.facebook.com/v2.6/device/login_status
       access_token=<YOUR_APP_ID|CLIENT_TOKEN>
       code=<LONG_CODE_FROM_STEP_1> // e.g. "92a2b2e351f2b0b3503b2de251132f47"

La réponse de cet appel d’API varie en fonction de l’avancement de l’utilisateur dans le processus d’autorisation. Vous recevrez le token d’accès ou un objet d’erreur avec un sous-code spécifique à analyser.

Sous-code d’erreur	Exemple de réponse	Signification
`N/A`	`{"access_token": "ABCD...", "expires_in" : 5183996 }`	L’utilisateur a accordé les autorisations requises à l’appareil. Celui-ci peut désormais utiliser la valeur du `access_token` pour passer des appels d’API autorisés.
`1349174`	`{"error":{"message":"This request requires the user to take a pending action","code":31,"error_subcode":1349174,"error_user_title":"Device Login Authorization Pending","error_user_msg":"User has not yet authorized your application. Continue polling."}}`	L’utilisateur n’a pas encore accordé les autorisations requises à votre app. Poursuivez le sondage à l’intervalle spécifié dans la réponse à l’étape 1.
`1349172`	`{"error":{"message":"User request limit reached","code":17,"error_subcode":1349172,"error_user_title":"OAuth Device Excessive Polling","error_user_msg":"Your device is polling too frequently. Space your requests with a minium interval of 5 seconds."}}`	Votre fréquence de sondage de votre appareil est trop élevée. Ramenez la fréquence de sondage à l’intervalle spécifié dans le premier appel d’API.
`1349152`	`{"error":{"message":"The session has expired""code":463,"error_subcode":1349152, "error_user_title":"Activation Code Expired","error_user_msg":"The code you entered has expired. Please go back to your device for a new code and try again."}}`	Le code de l’appareil a expiré. Annulez le processus de connexion depuis l’appareil et redirigez l’utilisateur vers l’écran d’origine.

5. Confirmer la connexion

Lorsque vous recevez un token d’accès, cela signifie que l’utilisateur a accordé les autorisations requises à votre app. Nous vous conseillons de conserver ce token d’accès sur l’appareil.

Afin que l’utilisateur se rende compte que la connexion a été établie, votre appareil doit afficher son nom et, si possible, une photo de profil jusqu’à ce qu’il clique sur Continue. Pour obtenir le nom et la photo de profil d’une personne, votre appareil doit passer un appel d’API Graph standard :

GET https://graph.facebook.com/v2.3/me?
      fields=name,picture&amp;
      access_token=<USER_ACCESS_TOKEN>

Vous obtenez alors une réponse qui se présente sous la forme suivante :

{
  "name": "John Doe", 
  "picture": {
    "data": {
      "is_silhouette": false, 
      "url": "https://fbcdn.akamaihd.net/hmac...ile.jpg"
    }
  }, 
  "id": "2023462875238472"
}

Affichez le nom et la photo de profil de l’utilisateur sur votre appareil jusqu’à ce qu’il clique sur Continue.

6. Stocker les tokens d’accès

Votre appareil doit conserver le token d’accès pour pouvoir envoyer d’autres demandes vers l’API Graph.

Les tokens d’accès de la connexion depuis l’appareil sont valables pendant 60 jours maximum, mais leur validité peut être annulée dans plusieurs cas de figure. Par exemple, si un utilisateur modifie son mot de passe Facebook, son token d’accès n’est plus valide.

Si le token n’est pas valide, votre appareil doit le supprimer de sa mémoire. L’utilisateur de votre appareil doit alors à nouveau effectuer le processus de connexion depuis l’appareil tel que décrit à l’étape 1, afin de récupérer un nouveau token valide.

Résolution des erreurs

Puis-je envoyer des demandes de processus depuis un appareil sur le protocole HTTP ?
OAuth 2 nécessite le chiffrement TLS/HTTPS.

Puis-je envoyer des demandes de processus depuis un appareil avec la méthode GET ?
Toutes les demandes de processus depuis un appareil doivent être des demandes POST.

Comment puis-je obtenir un nouveau token d’accès pour la connexion depuis un appareil ?
Les tokens d’accès associés à la connexion depuis un appareil sont valables pendant 60 jours maximum.

Si le token n’est pas valide, votre appareil doit le supprimer de sa mémoire. L’utilisateur de votre appareil doit à nouveau effectuer le processus de connexion depuis l’appareil tel que décrit à l’étape 1, afin de récupérer un nouveau token valide.

Pour en savoir plus sur l’obtention de nouveaux tokens, consultez le document sur les tokens d’accès.

Je reçois une erreur Invalid API method lorsque j’envoie une demande POST. Que se passe-t-il ?
Si vous envoyez une demande POST et recevez une erreur comme suit :

{"error":{"message":"Invalid API method","type":"OAuthException","code":3}}

Vous devrez peut-être activer l’option Connexion à partir des appareils dans votre app.