Die Facebook-Anmeldung hängt bei „XD Proxy“, wenn die Seite über den Chrome Web Store installiert wird

Question

Die folgende Webanwendung wurde erstellt:

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

Ich habe es auch zum Chrome Web Store hinzugefügt:

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

Das Problem ist, dass beim Aufrufen des Chrome Web Store und bei der Installation dieser App das Facebook-Anmeldefenster an einem "XD Proxy" -Fenster hängt. Während die Verbindung selbst funktioniert, kann dieses leere Fenster die Benutzer verwirren.

Ich habe meine Nachforschungen angestellt und dies scheint ein Chrome-Problem zu sein: https://code.google.com/p/chromium/ Probleme / Details? id= 59285 # c26

Wenn Sie die App von Chrome deinstallieren, verschwindet das Problem.

Gibt es eine Problemumgehung für dieses Problem?

Ähnliche Fragen zum Stapelüberlauf:

• Sperren des Facebook-Verbindungsanmeldefensters in Chrome
• Der FB.login-Dialog wird in Google Chrome
• Facebook Connect Blank Popup auf Chrome
• https://stackoverflow.com / Fragen / 4423718 / leere Seite-mit-fb-connect-js-sdk-auf-nach-Erlaubnis-Anfrage

  Dies ist meine Facebook-Verbindung, falls es hilft:

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

  Die Lösung

  Dank der Antwort von reekogi konnte ich dieses Problem umgehen. Hier ist die vollständige Implementierung:

  Um das XD-Proxy-Problem zu vermeiden, müssen Sie eine Verbindung zu Facebook herstellen, ohne das FB.-Login zu verwenden. Dies kann erreicht werden, indem der Benutzer manuell auf die Facebook-Seite umgeleitet wird.

  Ich hatte diese Anmeldefunktion in meinem 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__});
  };
  

  Was ich durch diesen Code ersetzt habe:

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

  Der neue Code öffnet ein Popup, das eine Verbindung zu Facebook herstellt und zu der im Parameter 'next' angegebenen URL zurückkehrt. Ich habe dieser Rückruf-URL einige zusätzliche Parameter hinzugefügt, damit der Javascript-Code danach suchen und das Popup schließen kann.

  Dieser Code wird ausgeführt, wenn Facebook zur Rückruf-URL umleitet:

  _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 ist nur ein Hilfsobjekt, das alle URL-Parameter enthält.

  Ich glaube immer noch, dass dies ein Chrome-Problem ist, aber da diese Problemumgehung funktioniert und mein Problem gelöst hat, markiere ich diese Frage als gelöst.

Answer 1

Können Sie eine Javascript-Umleitung aufrufen, um Berechtigungen zu erhalten, und dann zurück zur http://www.web-allbum.com/connected uri?

Ich habe diese Methode hier ausführlich beschrieben -> Berechtigungen auf der Fanseite

EDIT:

Die Methode, die ich zuvor demonstriert habe, wird veraltet sein, wenn OAuth 2.0 die Anforderungen erfüllt.

Hier ist der für OAauth 2.0 angepasste Code (response.session wird durch response.authResponse ersetzt)

<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>

Nur erprobt und gut funktioniert in Chrom.

Answer 2

Ich habe die von Cesar vorgeschlagene Lösung nicht ausprobiert, weil ich mich lieber an das offizielle Javascript-SDK von Facebook halte.

Trotzdem möchte ich einige Bemerkungen hinzufügen:

• In der Tat trat das Blockierungsproblem erst in Chrome nach der Installation aus dem Chrome Web Store auf.Die Deinstallation der Web-App löst das Problem.(getestet mit Legacy-Authentifizierungsmethode, ohne oauth 2.0).Nach dem manuellen Schließen des XD-Proxy-Popups funktionierte meine Anwendung ordnungsgemäß.

• Nachdem ich zu asynchronem FB.init() gewechselt und die Option oauth 2.0 aktiviert habe, erhält meine Anwendung zum Zeitpunkt der Anmeldung nicht einmal einen gültigen Facebook-Verbindungsstatus ({authResponse: null, status: "unknown"}) ... Auch hier funktioniert die Deinstallation aus dem Chrome Web Store ...({authResponse: Object, status: "connected"})

• In keinem dieser Fälle ist Safari auf ein Problem gestoßen.

Answer 3

In IE8 kann dies durch Ihre Flash-Version verursacht werden.Ich habe alles versucht und nichts hat funktioniert, bis ich Flash deaktiviert habe.Weitere Details aus diesem Blog: http://hustoknow.blogspot.com/2011/06/how-facebooks-xdproxyphp-seemed-to-have.html#comment-form

Answer 4

Öffnen Sie eine neue Browser-Registerkarte in Chrome und prüfen Sie, ob Sie die Facebook-App installiert haben.Wenn ja, ziehen Sie es zur Deinstallation in die untere rechte Ecke.Nach der Deinstallation funktioniert der XD-Proxy.

Referenz: Facebook Connect Blank Popup auf Chrome

Answer 5

Ich hatte bei allen Browsern das gleiche Problem.Wenn der Benutzer auf die Schaltfläche "Anmelden" klickte, wurde ein Popup geöffnet und aufgehängt.und wenn der Benutzer den Browserprozess nicht beendet hat, hat dies eine hohe CPU-Belastung verursacht.Wenn der Benutzer die Schaltfläche "Zulassen" sehen und darauf klicken konnte, wurde ein leeres Fenster "xd-Proxy" angezeigt, und es ist nichts passiert.Das war das Problem.

Nach langen Untersuchungen stellte ich fest, dass mein neuer JS-Code, dessen Proxys setInterval / clearInterval / setTimeout / clearTimeout-Methoden dieses Problem verursachten.Der Code lautet wie folgt:

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

Das Entfernen dieser Zeilen hat mein Problem gelöst.Vielleicht hilft es, wer das gleiche erlebt.

Answer 6

Es scheint, dass dies in Chrome behoben wurde.In Mac Chrome 15.0.874.106 passiert dies bei uns nicht mehr

Answer 7

Eine andere Problemumgehung besteht darin, diesen Code zu verwenden, nachdem Sie FB.init() aufgerufen haben:

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

Das Popup-Fenster bleibt geöffnet und leer, aber ich habe festgestellt, dass in meiner Chrome Web Store-App die Authentifizierung durchlaufen wird, wenn dieser Code verwendet wird.

Dieser Fehler wird auch bei Facebook-Entwicklern hier abgelegt: http://developers.facebook.com/bugs/278247488872084

Answer 8

Ich hatte das gleiche Problem in IE9 und es schien auf ein Upgrade auf Flash Player 10 zurückzuführen zu sein. Die vorgeschlagenen Antworten funktionierten bereits nicht für mich und ich hatte die Hoffnung verloren, es zu beheben, seit ich ein Fehler bei Facebook öffnen .Aber Henson hat eine Antwort veröffentlichtauf eine ähnliche Frage , die es für mich behoben hat.Im JavaScript in meinem Site-Master habe ich die Zeilen entfernt

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

und jetzt funktioniert es.(NB: Ich habe nicht überprüft, ob das IE8-Problem diese Zeilen zur Überwindung von Renditen verwenden soll.)