web-dev-qa-db-fra.com

La boîte de dialogue FB.login ne se ferme pas sur Google Chrome

J'appelle FB.login() sur un événement de clic dans mon application. La boîte de dialogue apparaît comme prévu, mais lorsque l'utilisateur a fini de se connecter à Facebook (et/ou d'autoriser l'application), la boîte de dialogue ne se ferme pas. Au lieu de cela, il charge une page blanche (à l'intérieur de la boîte de dialogue) et le titre change en Proxy XD .

Cela ne se produit que sur Google Chrome (j'utilise la dernière version disponible actuellement pour Windows 7).

Cela ne se produit pas si Chrome est en mode navigation privée.

Le `` plugin social '' de fb-login fonctionne bien sur Chrome.

Pour tester/déboguer davantage, j'ai créé une nouvelle application Facebook avec les paramètres Vanilla. La seule modification que j'ai apportée a été de définir l'URL du site dans les paramètres de l'application. Voici le code HTML que vous pouvez utiliser pour recréer ce bogue.

Exemple de code pour recréer le problème

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Chrome Bug Test</title>
    </head>
    <body>
        <button onclick="dologin()">Login using Facebook</button>

        <div id="fb-root"></div>
        <script src="http://connect.facebook.net/en_US/all.js"></script>
        <script>
          FB.init({
            appId  : '[YOUR APP ID HERE]',
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
          });
        </script>

        <script type="text/javascript">
            function dologin(){
                FB.login(function(r){
                    if(console && console.log) {
                        console.log(r);
                    }
                });
            }
        </script>

    </body>
</html>

Paramètres Facebook que j'ai essayé de modifier

  1. La définition d'un domaine de site n'a rien changé.
  2. L'utilisation d'un channelUrl et d'un fichier de canaux personnalisés n'a pas aidé non plus.

Bogues liés suivis sur Facebook

Problèmes liés ici sur Stack Overflow

J'ai vu beaucoup de gens tomber dessus, mais ce qui me dérange, c'est que je n'ai pas pu trouver de solution concrète à cela. Facebook n'a pas encore répondu aux rapports de bogues. Une solution serait de se débarrasser du code d'authentification basé sur Javascript et de le faire uniquement en utilisant le mécanisme côté serveur (Facebook PHP SDK). J'aimerais éviter cela en raison de contraintes de temps.

Quelqu'un a-t-il des idées pour résoudre ce problème?

facebookgoogle-chromelogin
41
Jaffer

Appel de cet extrait après FB.init a résolu le problème pour moi. Mais d'autres solutions semblent avoir fonctionné pour différents cas.

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
if ($.browser.chrome || $.browser.msie) {
    FB.XD._Origin = window.location.protocol + "//" + document.domain + "/" + FB.guid();
    FB.XD.Flash.init();
    FB.XD._transport = "flash";
  } else if ($.browser.opera) {
    FB.XD._transport = "fragment";
    FB.XD.Fragment._channelUrl = window.location.protocol + "//" + window.location.Host + "/";
  }
2
Jaffer

J'ai reçu un appel similaire à FB.login() pour fermer la boîte de dialogue en modifiant

onclick="dologin()"

à

onclick="dologin(); return false;"
11
Joe Rantala

Compte tenu de l'âge de ce poste, je suppose que l'affiche a résolu ce problème; cependant, étant donné qu'il s'agit également d'une ressource pour d'autres personnes cherchant à résoudre des problèmes similaires, j'ai pensé que j'inclurais mon expérience au cas où.

J'ai découvert que ce qui causait ce même problème de problème pour moi était accidentellement d'oublier d'inclure event.preventDefault(); dans mon gestionnaire d'écoute "click" dans jQuery. La boîte de dialogue de connexion à Facebook apparaissait et me permettait de me connecter mais ne disparaissait pas. Le problème était que le site Web effectuait l'action de publication de formulaire par défaut, ce qui interférait avec la fonction de rappel de Facebook.

7
Chris Reedy

J'ai eu le même problème exact. J'ai fait deux choses, j'ai d'abord ajouté cette ligne juste avant l'appel FB.init():

FB.Flash.hasMinVersion = function () { return false; };

Ensuite, je suis allé sur la page de l'application FB et j'ai ajouté le domaine du site (c'est-à-dire test.com).

Je pense que le paramètre de domaine du site était la clé, mais je ne suis pas 100% positif. Tout ce que je sais, c'est qu'il semble toujours se fermer maintenant dans tous les navigateurs, y compris Chrome.

6
John Siladie

Réponse courte relative à la question ci-dessus:

Chargez le all.js script sur https.

<script src="https://connect.facebook.net/en_US/all.js"></script>

Réponse plus longue si vous dépannez un problème similaire à la question d'origine:

Utilisez Google Chrome pour tenter la connexion. Une fois que vous vous êtes connecté et que la fenêtre pop-up vide raccroche à l'écran, appuyez sur F12. Cela fait apparaître les outils de développement pour Chrome. Cliquez sur l'onglet Console et vous verrez, espérons-le, l'erreur. Ce que vous verrez probablement est lié aux problèmes XD (interdomaines).

Même si votre problème particulier est différent du problème que je rencontrais, ce qui précède devrait vous conduire dans la bonne direction.

Mon problème/solution était spécifique à la documentation Facebook C # SDK v6 - le code du didacticiel charge le all.js script utilisant une URL commençant par // - qui charge ensuite le script à partir du même schéma que mon site (qui était http). Après m'être connecté, le pop-up a essayé de me rediriger de la connexion https Facebook vers mon site http et bingo, nous avons le problème XD. La solution consistait à charger spécifiquement les scripts à partir de https://connect.facebook.net/en_US/all.js as suit:

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

Modifier:

Après réflexion, cette approche consistant à autoriser une redirection vers http pourrait compromettre la sécurité du système en permettant aux données de cette demande d'être lues par quelqu'un d'autre, puis d'être réutilisées. Je n'ai pas trouvé de documentation ou d'exemples pertinents et je n'ai donc pas pu conclure d'une manière ou d'une autre, YMMV.

5
umbyersw

J'ai rencontré le même problème dans IE9, et il semble provenir de la mise à niveau vers Flash Player 10. Les réponses suggérées ne fonctionnaient déjà pas pour moi et j'avais perdu espoir d'essayer de le résoudre depuis la recherche d'un bogue ouvert sur Facebook le couvrant. Mais Henson a publié ne réponse à une question similaire qui l'a corrigé pour moi. Dans le JavaScript de mon site master, j'ai supprimé ces lignes

    FB.UIServer.setLoadedNode = function (a, b) {
       //HACK: http://bugs.developers.facebook.net/show_bug.cgi?id=20168
        FB.UIServer._loadedNodes[a.id] = b;
    };

et maintenant ça marche. (N.B. Je n'ai pas vérifié pour voir si le problème IE8 ces lignes étaient destinées à surmonter les retours.)

1
dumbledad