Facebook Callback ajoute '#_=_' à l'URL de retour

Question

Le rappel de Facebook a commencé à ajouter #_=_ underscore de hachage à l'URL de retour

Est-ce que quelqu'un sait pourquoi? Quelle est la solution?

Answer 1

Via Mises à jour de la plateforme Facebook:

Changement dans le comportement de redirection de session

Cette semaine, nous avons commencé à ajouter un fragment #____=____ à l'URL de redirection lorsque ce champ est laissé vide. Veuillez vous assurer que votre application peut gérer ce comportement.

Pour éviter cela, définissez l'URL de redirection dans votre demande d'URL de connexion comme ceci : (en utilisant Facebook php-sdk)

$facebook->getLoginUrl(array('redirect_uri' => $_SERVER['SCRIPT_URI'],'scope' => 'user_about_me'));

MISE À JOUR

Le paragraphe ci-dessus est exactement comme le documentation dit de fixer cela. Cependant, la solution documentée par Facebook ne fonctionne pas. Veuillez envisager de laisser un commentaire sur le blog des mises à jour de la plateforme Facebook et suivez ce bogue pour obtenir une meilleure réponse. En attendant, ajoutez ce qui suit à votre balise head pour résoudre ce problème :

    if (window.location.hash && window.location.hash == '#_=_') {
        window.location.hash = '';
    }

Ou une alternative plus détaillée (merci à niftylettuce) :

    if (window.location.hash && window.location.hash == '#_=_') {
        if (window.history && history.pushState) {
            window.history.pushState("", document.title, window.location.pathname);
        } else {
            // Empêcher le défilement en stockant la position actuelle du défilement de la page
            var scroll = {
                top: document.body.scrollTop,
                left: document.body.scrollLeft
            };
            window.location.hash = '';
            // Restaurer la position de défilement, devrait être sans scintillement
            document.body.scrollTop = scroll.top;
            document.body.scrollLeft = scroll.left;
        }
    }

Answer 2

TL;DR

if (window.location.hash === "#_=_"){
    history.replaceState 
        ? history.replaceState(null, null, window.location.href.split("#")[0])
        : window.location.hash = "";
}

Version complète avec instructions étape par étape

// Testez la laideur.
if (window.location.hash === "#_=_"){

    // Vérifiez si le navigateur prend en charge history.replaceState.
    if (history.replaceState) {

        // Conservez l'URL exacte jusqu'au dièse.
        var cleanHref = window.location.href.split("#")[0];

        // Remplacez l'URL dans la barre d'adresse sans perturber le bouton retour.
        history.replaceState(null, null, cleanHref);

    } else {

        // Eh bien, vous êtes sur un vieux navigateur, nous pouvons nous débarrasser du _=_ mais pas du #.
        window.location.hash = "";

    }

}

Étapes :

1. Nous n'entrerons dans le bloc de code que si le fragment est #_=_.
2. Vérifiez si le navigateur prend en charge la méthode window.replaceState de HTML5.
   1. Nettoyez l'URL en la divisant sur # et en prenant seulement la première partie.
   2. Dites à history de remplacer l'état actuel de la page par l'URL propre. Cela modifie l'entrée d'historique actuelle au lieu d'en créer une nouvelle. Ce que cela signifie, c'est que les boutons de retour et de renvoi fonctionneront exactement comme vous le souhaitez. ;-)
3. Si le navigateur ne prend pas en charge les incroyables méthodes historiques HTML 5, nettoyez simplement l'URL du mieux que vous pouvez en définissant le hash comme une chaîne vide. Il s'agit d'un piètre recours car cela laisse toujours un dièse en fin d'URL (exemple.com/#) et cela ajoute également une entrée dans l'historique, donc le bouton retour vous ramènera à #_-_.

En savoir plus sur history.replaceState.

En savoir plus sur window.location.

Answer 3

Si vous voulez supprimer le "#" restant de l'url

$(window).on('load', function(e){
  if (window.location.hash == '#_=_') {
    window.location.hash = ''; // pour les anciens navigateurs, laisse un # derrière
    history.pushState('', document.title, window.location.pathname); // propre et net
    e.preventDefault(); // pas de rechargement de page
  }
})

Answer 4

Je ne suis pas sûr pourquoi ils font ça mais, vous pourriez contourner cela en réinitialisant le hash en haut de votre page :

if (window.location.hash == "#_=_")
  window.location.hash = "";

Answer 5

Facebook utilise un cadre et à l'intérieur, tout fonctionne en utilisant la communication AJAX. Le plus grand problème dans ce cas est de préserver l'état actuel de la page. Autant que je comprends, Facebook a décidé d'utiliser des ancres simulées. Cela signifie que si vous avez cliqué quelque part, ils simulent cela comme une ancre à l'intérieur de votre page, et lorsque la communication AJAX commence, ils changent également la partie ancre de votre URL.

Cette solution vous aide normalement lorsque vous essayez de recharger la page (pas ENTRER, appuyez sur F5), car votre navigateur envoie l'URL complète avec des ancres au serveur Facebook. Par conséquent, Facebook prend l'état le plus récent (ce que vous voyez) et vous êtes alors en mesure de continuer à partir de là.

Lorsque le rappel renvoie #_=_, cela signifie que la page était dans son état de base avant de la quitter. Comme cette ancre est analysée par le navigateur, vous n'avez pas à vous en soucier.