L'accesso a Facebook si blocca su "XD Proxy" quando la pagina viene installata tramite Chrome Web Store

Question

Ha creato la seguente applicazione web:

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

L'ho aggiunto anche al Chrome Web Store:

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

Il problema è che quando accedi al Chrome Web Store e installi questa app, la finestra di accesso a Facebook si blocca in una finestra "XD Proxy". Mentre la connessione stessa funziona, questa finestra vuota può confondere gli utenti.

Ho fatto le mie ricerche e questo sembra essere un problema di Chrome: https://code.google.com/p/chromium/ problemi / dettagli? id= 59285 # c26

Se disinstalli l'app da Chrome, il problema scompare.

C'è qualche soluzione alternativa per questo problema?

Domande simili su stackoverflow:

• Blocco della finestra di accesso di Facebook Connect in Chrome
• La finestra di dialogo FB.login non si chiude su Google Chrome
• popup facebook connect vuoto su Chrome
• https://stackoverflow.com / questions / 4423718 / pagina-vuota-con-fb-connect-js-sdk-dopo-richiesta-di-autorizzazione

Questo è il mio collegamento a Facebook nel caso in cui aiuti:

    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 soluzione

Grazie alla risposta di reekogi sono riuscito a risolvere questo problema. Ecco l'implementazione completa:

Per evitare il problema di XD Proxy, devi connetterti a Facebook senza utilizzare FB.login, questo può essere ottenuto reindirizzando manualmente l'utente alla pagina Facebook.

Avevo questa funzione di accesso nel mio codice:

_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__});
};

Che ho sostituito con questo codice:

_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);
};

Il nuovo codice apre un popup che si collega a Facebook e ritorna all'URL specificato nel parametro "next". Ho aggiunto alcuni parametri extra in questo URL di richiamata in modo che il codice javascript potesse verificarlo e chiudere il popup.

Questo codice viene eseguito quando Facebook reindirizza all'URL di richiamata:

_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 è solo un oggetto helper che contiene tutti i parametri URL.

Credo ancora che si tratti di un problema di Chrome, ma poiché questa soluzione ha funzionato e ha risolto il mio problema, contrassegno questa domanda come risolta.

Answer 1

Potresti chiamare un reindirizzamento javascript per ottenere le autorizzazioni e poi reindirizzare di nuovo al http://www.web-allbum.com/connected uri?

Ho descritto questo metodo in dettaglio qui -> Autorizzazioni sulla fan page

<”EDIT:

Il metodo che ho dimostrato prima sarà deprecato quando OAuth 2.0 entrerà nei requisiti.

Ecco il codice, adattato per OAauth 2.0 (response.session è sostituito con 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>

Appena provato e testato, ha funzionato bene con Chrome.

Answer 2

Non ho provato la soluzione proposta da Cesar, perché preferisco restare fedele all'SDK javascript ufficiale di Facebook.

Tuttavia vorrei aggiungere alcune osservazioni:

• In effetti, il problema di blocco si è verificato solo su Chrome dopo l'installazione da Chrome Web Store.La disinstallazione dell'app Web risolve il problema.(testato con il metodo di autenticazione legacy, senza oauth 2.0).Dopo aver chiuso manualmente il popup XD Proxy, la mia applicazione funzionava correttamente.

• Dopo essere passato a FB.init() asincrono e aver abilitato l'opzione oauth 2.0, la mia applicazione non otterrebbe nemmeno uno stato di connessione Facebook valido al momento dell'accesso ({authResponse: null, status: "unknown"}) ... Anche in questo caso, disinstallandolo dal Chrome Web Store, funziona ...({authResponse: Object, status: "connected"})

• Nessun problema riscontrato con Safari, in nessuno di questi casi.

Answer 3

In IE8, questo può essere causato dalla tua versione flash.Ho provato di tutto e niente ha funzionato fino a quando non ho disabilitato il flash.Maggiori dettagli da questo blog: http://hustoknow.blogspot.com/2011/06/how-facebooks-xdproxyphp-seemed-to-have.html#comment-form

Answer 4

Apri una nuova scheda del browser in Chrome e verifica se è installata l '"app" di Facebook.In tal caso, trascinalo nell'angolo in basso a destra per disinstallarlo.Una volta disinstallato, XD Proxy funzionerà.

Riferimento: popup facebook connect vuoto su chrome

Answer 5

Ho riscontrato lo stesso problema per tutti i browser.Quando l'utente ha cliccato sul pulsante "login", un popup si apriva e si bloccava;e a meno che l'utente non uccida il processo del browser, causava un carico elevato sulla CPU.Se l'utente è riuscito a vedere il pulsante "consenti" e a cliccarci sopra, allora è apparsa una finestra vuota "xd proxy" e non è successo niente.Questo era il problema.

Dopo lunghe indagini, ho notato che il mio nuovo codice JS, che utilizza i metodi proxy setInterval / clearInterval / setTimeout / clearTimeout, ha causato questo problema.Il codice è il seguente:

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 rimozione di queste righe ha risolto il mio problema.Forse aiuta chi vive la stessa cosa.

Answer 6

Sembra che il problema sia stato risolto in Chrome.Non succede più per noi in Mac Chrome 15.0.874.106

Answer 7

Un'altra soluzione alternativa consiste nell'utilizzare questo codice dopo aver chiamato 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 finestra popup rimane aperta e vuota, ma ho scoperto che nella mia app Chrome Web Store, l'autenticazione viene eseguita quando viene utilizzato questo codice.

Questo bug è stato segnalato anche su Facebook Developers qui: http://developers.facebook.com/bugs/278247488872084

Answer 8

Ho riscontrato lo stesso problema in IE9 e sembrava derivare dall'aggiornamento a Flash Player 10. Le risposte suggerite già non funzionavano per me e avevo perso la speranza nel provare a risolverlo da quando ho trovato un bug aperto su Facebook che lo copre.Ma Henson ha pubblicato una rispostasu una domanda simile che lo ha risolto per me.Nel JavaScript nel master del mio sito ho rimosso le righe

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

e ora funziona.(N.B. Non ho controllato per vedere se il problema di IE8 quelle linee erano destinate a superare i ritorni.)