Logo site Des Geeks et des lettres

L'application pour surveiller / sauvegarder vos smartphonesL'oeil inquisiteur de Bibispy

Login Facebook par popup : les pièges à éviter

Je travaille actuellement sur une authentification par Facebook depuis une popup  donc voici le fonctionnement attendu :

  • l’url de login Facebook est dynamique car l’application sur laquelle l’utilisateur doit s’authentifier peut être différente
  • lorsque l’utilisateur s’authentifie avec succès, la popup doit se fermer et afficher un message de succès
  • lorsque l’utilisateur ferme de lui-même la popup ou refuse les autorisations de Facebook, un message d’erreur doit s’afficher

A priori rien d’extraordinaire, et pourtant, voici les pièges à éviter que j’ai rencontré et quelques astuces qui m’ont permis de m’en sortir.

Url de login Facebook

La popup doit s’ouvrir lorsque l’utilisateur clique sur un bouton, sauf que dans mon cas l’url est dynamique et doit être construire manuellement par le serveur qui sait quelle application doit être utilisée.

  • à première vue voici le code qu’on écrirait avec jQuery (le principe est le même avec Backbone ou Angular) :

 

Avec ce code la popup est à chaque fois bloquée par le navigateur, l’ouverture de la popup ne se faisant pas au moment même du clic sur le bouton mais sur le retour d’un appel asynchrone vers le serveur.

  • voyant qu’il n’est pas possible d’appeler l’ouverture de la popup sur le callback de mon appel ajax, je décide de faire un appel ajax « synchrone » avec le paramètre async: false  :

 

J’ai cru que cela allait corriger le problème mais finalement ma popup se faisait bloquer encore de temps en temps par les navigateurs, étonnant car la requête étant synchrone je ne comprends pas trop pourquoi … (de plus la façon de faire de l’XHR synchrone a changé depuis jQuery 1.8)

  • j’ai donc dû changer mon fusil d’épaule et faire en sorte d’avoir déjà mon url de login Facebook au moment du clic sur le bouton. Dans mon cas le serveur me fournit l’url avant d’afficher la page de login mais cela aurait très bien pu être au chargement de la page :

 

Fermeture de la popup

Lorsque l’utilisateur s’authentifie avec succès dans la popup de login Facebook, automatiquement Facebook redirige l’utilisateur vers une URL de callback paramétrée lors de la création de l’application Facebook, admettons http://domain_name/facebook/login/callback .

La même URL est utilisée lorsque l’utilisateur refuse les autorisations Facebook, et donc refuse de s’authentifié par Facebook, mais avec des paramètres un peu différent qui va nous permettre de distinguer, côté serveur, un login OK d’un login KO.
Qu’en est-il si l’utilisateur ferme la popup directement avec la croix ? il faut pouvoir distinguer ces trois cas :

  • dans les trois cas présentés ci-dessus, la popup se ferme ou doit se fermer, il faut donc « écouter » cet évènement là :

 

Pour distinguer le cas d’un login refusé ou authentifié avec succès, nous devons nous fier aux paramètres renvoyés par Facebook lorsqu’il va rediriger l’utilisateur vers notre URL de callback.
Or nous nous trouvons dans une popup, il faut donc que notre controlleur qui gère l’URL de callback agissent de façon à ce que la popup se ferme et que la page déclenchant l’ouverture de la popup sache l’état du login, pour cela 2 façons :

  • le controlleur de la callback renvoi dans sa réponse deux actions JavaScript à éxécuter :
    1. l’une pour fermer la popup :  self.close()
    2. l’autre pour valuer un élément caché dans la page appelante :  window.opener.document.getElementById("input_hidden_id").value = "success"

partie serveur (Java) :

 

partie client (JavaScript) :

 

Le problème que j’ai rencontré avec cette méthode est un problème de cross-domain-origin qui se produit dans le cas où le nom de domaine de la page de login est différent du nom de domaine de l’URL de callback Facebook. Dans ce cas précis window.opener  vaut undefined et donc il nous sera impossible de savoir l’état du login.
Pour cela il ne faut pas passer par du JavaScript mais utiliser notre base de données pour y stocker l’information de l’état du login.

 

  • le controlleur de la callback renvoi dans sa réponse une action JavaScript à exécuter et conserve en base l’état du login (OK ou KO) qui va être requêter par la partie cliente au moment de la fermeture de la popup

partie serveur (Java) :

 

partie client (JavaScript) :

Les exemples de code se veulent simplistes mais ils permettent de comprendre l’idée du post, à vous d’adapter le code selon vos besoins.

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Greg 6 décembre 2013, 10 10

    J’avoue que je n’en suis pas encore à ce niveau mais que si tel était le cas, ça me serait utile.

    Réponds !

Article suivant:

Article précédent:

Recherche

A vos stylos !

  • Chris: “Bonjour, Quel est le nom de la table du plugin W3Total Cache car je ne la trouve…Déc 1, 09:22
  • Greg: “Liens de l'article mis à jour.Nov 27, 14:32
  • Greg: “Vraiment pénible ce problème. Pour ma part je l'ai résolu en créant un raccourci manuel dans mes favoris et en…Nov 20, 23:28
  • Jacqueline: “Je suis sur Safari.... même problème. Mon appli pour iPad ne fonctionne pas non plus.Nov 18, 08:44
  • Greg: “Ouais mais c'est vrai que ton article était bien senti. Ca le fait que tu le lises depuis Feedly :)…Nov 3, 21:00
  • Youness: “Bonjour, Merci pour cette article il ma aider enormement lors de la creation de mom projet Ma question…Nov 3, 20:29
Share This