O login do Facebook trava em “XD Proxy” quando a página é instalada através da Chrome Web Store

StackOverflow https://stackoverflow.com/questions/7368805

Pergunta

O criou o seguinte aplicativo da web:

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

Também adicionei à Chrome Web Store:

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

O problema é que, quando você vai para a Chrome Web Store e instala este aplicativo, a janela de login do Facebook trava em uma janela "Proxy XD". Enquanto a conexão em si funciona, esta janela em branco pode confundir os usuários.

Eu fiz minha pesquisa e este parece ser um problema do Chrome: https://code.google.com/p/chromium/ problemas / detalhes? id= 59285 # c26

Se você desinstalar o aplicativo do Chrome, o problema desaparece.

Existe alguma solução alternativa para esse problema?

Perguntas semelhantes sobre stackoverflow:

Este é o meu Facebook Connect, caso ajude: 

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

A solução

Graças à resposta do reekogi, consegui solucionar esse problema. Aqui está a implementação completa:

Para evitar o problema do proxy XD, você deve se conectar ao Facebook sem usar o FB.login; isso pode ser feito redirecionando manualmente o usuário para a página do Facebook.

Eu tinha esta função de login no meu código: 

_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 substituí por este código: 

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

O novo código abre um pop-up que se conecta ao Facebook e retorna ao url especificado no parâmetro 'próximo'. Eu adicionei alguns parâmetros extras neste url de retorno de chamada para que o código javascript pudesse verificar e fechar o pop-up.

Este código é executado quando o Facebook redireciona para o url de retorno de chamada: 

_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 é apenas um objeto auxiliar que contém todos os parâmetros de url.

Ainda acredito que este é um problema do Chrome, mas como esta solução alternativa funcionou e resolveu meu problema, estou marcando esta questão como resolvida.

Foi útil?

Solução

Você poderia chamar um redirecionamento de javascript para obter permissões e, em seguida, redirecionar de volta para http://www.web-allbum.com/connected uri?

Descrevi esse método em detalhes aqui -> Permissões na página de fãs

O método que demonstrei antes será descontinuado quando OAuth 2.0 entrar nos requisitos.

Aqui está o código, adaptado para OAauth 2.0 (response.session foi substituído por 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>

Apenas experimentado e testado, funcionou bem no Chrome.

Outras dicas

Não tentei a solução proposta por Cesar, porque prefiro ficar com o javascript SDK oficial do Facebook.

No entanto, gostaria de acrescentar algumas observações:

  • Na verdade, o problema de bloqueio só aconteceu no Chrome após a instalação a partir da Chrome Web Store.Desinstalar o aplicativo da web resolve o problema.(testado com o método de autenticação legado, sem oauth 2.0).Depois de fechar o pop-up do proxy XD manualmente, meu aplicativo estava funcionando corretamente.

  • Depois de alternar para FB.init() assíncrono e ativar a opção oauth 2.0, meu aplicativo nem mesmo obteria um status de conexão do Facebook válido no momento do login ({authResponse: null, status: "unknown"}) ... Novamente, desinstalando-o da Chrome Web Store, está funcionando ...({authResponse: Object, status: "connected"})

  • Nenhum problema encontrado com o Safari, em qualquer um desses casos.

No IE8 - isso pode ser causado pela sua versão do flash.Tentei de tudo e nada funcionou até que desativei o flash.Mais detalhes deste blog: http://hustoknow.blogspot.com/2011/06/how-facebooks-xdproxyphp-seemed-to-have.html#comment-form

Abra uma nova guia do navegador no Chrome e veja se você tem o 'App' do Facebook instalado.Nesse caso, arraste-o para o canto inferior direito para desinstalar.Depois de desinstalado, o proxy XD funcionará.

Referência: facebook connect blank pop up no chrome

Eu estava tendo o mesmo problema em todos os navegadores.Quando o usuário clicou no botão "login", um pop-up foi aberto e travado;e a menos que o usuário encerrasse o processo do navegador, isso causava uma alta carga na CPU.Se o usuário conseguiu ver o botão "permitir" e clicar nele, no entanto, apareceu uma janela em branco "proxy xd" e nada aconteceu.Esse era o problema.

Após longas investigações, percebi que meu novo código JS que usa os métodos setInterval / clearInterval / setTimeout / clearTimeout, causou esse problema.O código é o seguinte: 

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

Remover essas linhas resolveu meu problema.Talvez ajude a quem tem a mesma experiência.

Parece que isso foi corrigido no Chrome.Isso não acontece mais para nós no Mac Chrome 15.0.874.106

Outra solução alternativa é usar este código depois de chamar 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';
}

A janela pop-up permanece aberta e em branco, mas descobri que em meu aplicativo da Chrome Web Store, a autenticação passa quando este código é usado.

Este bug também está registrado no Facebook Developers aqui: http://developers.facebook.com/bugs/278247488872084

bug aberto no Facebook cobrindo-o.Mas Henson postou uma respostaem uma questão semelhante que corrigiu isso para mim.No JavaScript no meu site master eu removi as linhas 

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

e agora funciona.(N.B. Eu não verifiquei se o problema do IE8 essas linhas tinham como objetivo superar os retornos.)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top