La connexion Facebook est accrochée à «XD Proxy» lorsque la page est installée via Chrome Web Store

Question

La création de l'application Web suivante:

http://www.web-allbum.com/

Je l'ai également ajouté au Chrome Web Store:

https://chrome.google.com/webstore/detail/idalgghcnjhmnbgbeebpdolhgdpbcplf

Le problème est que lorsque vous allez au Chrome Web Store et installez cette application, les fenêtres de connexion Facebook sont accrochées à une fenêtre "Proxy XD". Alors que la connexion elle-même fonctionne, cette fenêtre vide peut confondre les utilisateurs.

J'ai fait mes recherches, et cela semble être un problème chromé:https://code.google.com/p/chromium/issues/detail?id=59285#c26

Si vous désinstallez l'application de Chrome, le problème disparaît.

Y a-t-il une solution de contournement pour ce problème?

Questions similaires de Stackoverflow:

• Facebook Connect Verrouillage de la fenêtre de connexion dans Chrome
• La boîte de dialogue FB.login ne se ferme pas sur Google Chrome
• Facebook Connect Blank Pop Up sur Chrome
• https://stackoverflow.com/questions/4423718/blank-page-with-fb-connect-js-sdk-on-after-permission-request

Ceci est mon Facebook Connect au cas où cela aide:

    FB.init({
        appId  : window.__FACEBOOK_APP_ID__,
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true, // parse XFBML
        channelUrl : window.__MEDIA_URL__ + 'channel.html', // channel.html file
        oauth  : true // enable OAuth 2.0
    });


    FB.XD.Flash.init();
    FB.XD._transport = "flash";

    if (A.networks.facebook.connected) {
        FB.getLoginStatus(function (response) {
            // Stores the current user ID for later use
            that.network_id = response.authResponse.userID;

            if (!response.authResponse) {
                // no user session available, someone you dont know
                A.networks.facebook.connected = false;
            }
            callback();
        });
    }
    else {
        callback();
    }
}; 

La solution

Grâce à la réponse de Reekogi, j'ai pu s’engager ce problème. Voici la mise en œuvre complète:

Afin d'éviter le problème de proxy XD, vous devez vous connecter à Facebook sans utiliser le fb.login, cela peut être réalisé en redirigeant manuellement l'utilisateur vers la page Facebook.

J'avais cette fonction de connexion dans mon code:

_facebook.connect_to_network = function (callback) {
    FB.login(function (response) {
        if (response.authResponse) {
            console.log('Welcome!  Fetching your information.... ');
            FB.api('/me', function (response) {
                // Stores the current user Id for later use
                that.network_id = response.id;
                console.log('Good to see you, ' + response.name + '.');
                callback();
            });
        }
        else {
            console.log('User cancelled login or did not fully authorize.');
            that.connected = false;
            callback();
        }

    }, {scope: window.__FACEBOOK_PERMS__});
};

Que j'ai remplacé par ce code:

_facebook.connect_to_network = function (callback) {
    var url = 'https://www.facebook.com/connect/uiserver.php?app_id=' + window.__FACEBOOK_APP_ID__ + '&method=permissions.request&display=page&next=' + encodeURIComponent(window.__BASE_URL__ + 'authorize-window?my_app=facebook&my_method=login') + '&response_type=token&fbconnect=1&perms=' + window.__FACEBOOK_PERMS__;

    window.open(url);
};

Le nouveau code ouvre une fenêtre contextuelle qui se connecte à Facebook et revient à l'URL spécifiée dans le paramètre «suivant». J'ai ajouté quelques paramètres supplémentaires dans cette URL de rappel afin que le code JavaScript puisse le vérifier et fermer la fenêtre contextuelle.

Ce code est exécuté lorsque le Facebook redirige vers l'URL de rappel:

_facebook.parse_url_params = function () {
    // This is the popup window
    if (URL_PARAMS.my_method === 'login') {
        window.opener.A.networks.facebook.connected = true;
        self.close();
    }
};

URL_PARAMS est juste un objet d'assistance qui contient tous les paramètres URL.

Je crois toujours que c'est un problème chromé, mais comme cette solution de contournement a fonctionné et résolu mon problème, je marque cette question comme résolue.

Answer 1

Pourriez-vous appeler une redirection JavaScript pour obtenir des autorisations puis rediriger vers le http://www.web-allbum.com/connected uri?

J'ai décrit cette méthode en détail ici -> Autorisations sur la page du ventilateur

ÉDITER:

La méthode que j'ai démontrée auparavant sera obsolète lorsque OAuth 2.0 entre dans les exigences.

Voici le code, adapté pour OAAuth 2.0 (response.session est remplacé par response.authResponse)

<div id="fb-root"></div>
<script>
theAppId = "YOURAPPID";
redirectUri = "YOURREDIRECTURI"; //This is the page that you redirect to after the user accepts the permissions dialogue

//Connect to JS SDK
FB.init({
    appId  : theAppId,
    cookie: true, 
    xfbml: true, 
    status: true,
    channelURL : 'http://yourdomain.co.uk/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
});

//Append to JS SDK to div.fb-root
(function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

//Check login status and permissions
FB.getLoginStatus(function(response) {
  if (response.authResponse) {
    // logged in and connected user, someone you know
  } else {
    //Redirect to permissions dialogue
    top.location="https://www.facebook.com/connect/uiserver.php?app_id=" + theAppId + "&method=permissions.request&display=page&next=" + redirectUri + "&response_type=token&fbconnect=1&perms=email,read_stream,publish_stream,offline_access";
  }
});

</script>

Je viens d'essayer et de tester, a bien fonctionné dans Chrome.

Answer 2

Je n'ai pas essayé la solution proposée par Cesar, car je préfère m'en tenir au SDK JavaScript officiel de Facebook.

Néanmoins, je voudrais ajouter quelques observations:

• En effet, le problème de blocage ne s'est produit que sur Chrome après l'installation depuis Chrome Web Store. La désinstallation de l'application Web résout le problème. (testé avec la méthode d'authentification héritée, sans oauth 2.0). Après avoir fermé la fenêtre contextuelle du proxy XD manuellement, mon application fonctionnait correctement.

• Après être passé à Asynchrone FB.init() et habilitant oauth 2.0 Option, mon application n'obtiendrait même pas de statut de connexion Facebook valide à l'heure de connexion ({authResponse: null, status: "unknown"})... Encore une fois, le désinstallant à partir de la boutique en ligne Chrome, ça marche ... ({authResponse: Object, status: "connected"})

• Aucun problème rencontré avec Safari, dans aucun de ces cas.

Answer 3

Dans IE8 - cela peut être causé par votre version flash. J'ai tout essayé et rien ne fonctionnait jusqu'à ce que je n'aie pas de flash. Plus de détails sur ce blog: http: //hustoknow.blogspot.com/2011/06/how-facebooks-xdproxyphp-seemed-to-have.html#comment-formul

Answer 4

Ouvrez un nouvel onglet de navigateur dans Chrome et voyez si vous avez installé «l'application» Facebook. Si c'est le cas, faites-le glisser dans le coin inférieur droit pour désinstaller. Une fois désinstallé, le proxy XD fonctionnera.

Référence: Facebook Connect Blank Pop Up sur Chrome

Answer 5

Je ressentais le même problème pour tous les navigateurs. Lorsque l'utilisateur a cliqué sur le bouton "Connexion", une fenêtre contextuelle s'est ouverte et suspendue; Et à moins que l'utilisateur ne tue le processus de navigateur, cela a provoqué une charge élevée sur le CPU. Si l'utilisateur a réussi à voir le bouton "Autoriser" et cliquer dessus, il est apparu, il apparaissait une fenêtre vide "proxy XD" et rien ne s'est passé. C'était le problème.

Après de longues investigations, j'ai remarqué mon nouveau code JS qui proxie SetInterval / ClearInterval / SetTimeout / ClearTimeout, a provoqué ce problème. Le code est le suivant:

window.timeoutList = new Array();
window.intervalList = new Array();

window.oldSetTimeout = window.setTimeout;
window.oldSetInterval = window.setInterval;
window.oldClearTimeout = window.clearTimeout;
window.oldClearInterval = window.clearInterval;

window.setTimeout = function(code, delay) {
    window.timeoutList.push(window.oldSetTimeout(code, delay));
};
window.clearTimeout = function(id) {
    var ind = window.timeoutList.indexOf(id);
    if(ind >= 0) {
        window.timeoutList.splice(ind, 1);
    }
    window.oldClearTimeout(id);
};
window.setInterval = function(code, delay) {
    window.intervalList.push(window.oldSetInterval(code, delay));
};
window.clearInterval = function(id) {
    var ind = window.intervalList.indexOf(id);
    if(ind >= 0) {
        window.intervalList.splice(ind, 1);
    }
    window.oldClearInterval(id);
};
window.clearAllTimeouts = function() {
    for(var i in window.timeoutList) {
        window.oldClearTimeout(window.timeoutList[i]);
    }
    window.timeoutList = new Array();
};
window.clearAllIntervals = function() {
    for(var i in window.intervalList) {
        window.oldClearInterval(window.intervalList[i]);
    }
    window.intervalList = new Array();
};

La suppression de ces lignes a résolu mon problème. Peut-être que cela aide à vivre la même chose.

Answer 6

Il semble que cela ait été fixé dans Chrome. Ne nous arrive plus dans Mac Chrome 15.0.874.106

Answer 7

Une autre solution de contournement consiste à utiliser ce code après avoir appelé FB.init():

if (/chrome/.test(navigator.userAgent.toLowerCase())) {
    FB.XD._origin = window.location.protocol + '//' + document.domain + '/' + FB.guid();
    FB.XD.Flash.init();
    FB.XD._transport = 'flash';
}

La fenêtre contextuelle reste ouverte et vide, mais j'ai constaté que dans mon application Chrome Web Store, l'authentification passe lorsque ce code est utilisé.

Ce bogue est également déposé sur les développeurs Facebook ici: http://developers.facebook.com/bugs/278247488872084

Answer 8

J'ai rencontré le même problème dans IE9, et cela semblait 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 de l'espoir d'essayer de le réparer depuis qu'il a trouvé un Ouvrez Bug sur Facebook le couvrant. Mais Henson a posté Une réponse sur une question similaire Cela l'a corrigé pour moi. Dans le javascript de mon site maître, j'ai supprimé les 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. (NB Je n'ai pas vérifié pour voir si le problème IE8 ces lignes visaient à surmonter les rendements.)