New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redirect URI - How to remove "#_=_" from Facebook Redirect? #12

Closed
niftylettuce opened this Issue May 24, 2012 · 30 comments

Comments

Projects
None yet
@niftylettuce
Contributor

niftylettuce commented May 24, 2012

UPDATE: See this comment towards end of this issue comment thread for the latest version of the fix for this issue.


Not sure how to fix this, since there isn't an immediate answer as to how to set the redirect URI.

Found this on SO: http://stackoverflow.com/questions/7693663/remove-from-the-facebook-redirect-url.

Also this will help to provide context: https://developers.facebook.com/bugs/196125357123225.

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce May 24, 2012

Contributor

Here was my fix using Modernizr (with alternative in comments) ...

// Remove the ugly Facebook appended hash
// <https://github.com/jaredhanson/passport-facebook/issues/12>
if (window.location.hash && window.location.hash === "#_=_") {
  // If you are not using Modernizr, then the alternative is:
  //   `if (window.history && history.pushState) {`
  if (Modernizr.history) {
    window.history.pushState("", document.title, window.location.pathname);
  } else {
    // Prevent scrolling by storing the page's current scroll offset
    var scroll = {
      top: document.body.scrollTop,
      left: document.body.scrollLeft
    };
    window.location.hash = "";
    // Restore the scroll offset, should be flicker free
    document.body.scrollTop = scroll.top;
    document.body.scrollLeft = scroll.left;
  }
}
Contributor

niftylettuce commented May 24, 2012

Here was my fix using Modernizr (with alternative in comments) ...

// Remove the ugly Facebook appended hash
// <https://github.com/jaredhanson/passport-facebook/issues/12>
if (window.location.hash && window.location.hash === "#_=_") {
  // If you are not using Modernizr, then the alternative is:
  //   `if (window.history && history.pushState) {`
  if (Modernizr.history) {
    window.history.pushState("", document.title, window.location.pathname);
  } else {
    // Prevent scrolling by storing the page's current scroll offset
    var scroll = {
      top: document.body.scrollTop,
      left: document.body.scrollLeft
    };
    window.location.hash = "";
    // Restore the scroll offset, should be flicker free
    document.body.scrollTop = scroll.top;
    document.body.scrollLeft = scroll.left;
  }
}
@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce May 24, 2012

Contributor

I'll add this to the Readme since this is a common problem due to Facebook's current bug.

Contributor

niftylettuce commented May 24, 2012

I'll add this to the Readme since this is a common problem due to Facebook's current bug.

jaredhanson added a commit that referenced this issue May 28, 2012

Merge pull request #13 from niftylettuce/master
Added note regarding Facebook's bug with window.location.hash for issue #12
@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce May 31, 2012

Contributor

Thanks!

Contributor

niftylettuce commented May 31, 2012

Thanks!

@arxpoetica

This comment has been minimized.

Show comment
Hide comment
@arxpoetica

arxpoetica Mar 17, 2014

FYI: it's actually better to use window.history.replaceState('', document.title, window.location.pathname); if you don't want the #_=_ bug to remain in the history.

arxpoetica commented Mar 17, 2014

FYI: it's actually better to use window.history.replaceState('', document.title, window.location.pathname); if you don't want the #_=_ bug to remain in the history.

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Mar 31, 2014

Contributor

@arxpoetica thanks, how does this look? /cc @jaredhanson (do we need to update docs?)

// Remove the ugly Facebook appended hash
// <https://github.com/jaredhanson/passport-facebook/issues/12>
if (window.location.hash && window.location.hash === "#_=_") {
  // If you are not using Modernizr, then the alternative is:
  //   `if (window.history && history.replaceState) {`
  if (Modernizr.history) {
    window.history.replaceState("", document.title, window.location.pathname);
  } else {
    // Prevent scrolling by storing the page's current scroll offset
    var scroll = {
      top: document.body.scrollTop,
      left: document.body.scrollLeft
    };
    window.location.hash = "";
    // Restore the scroll offset, should be flicker free
    document.body.scrollTop = scroll.top;
    document.body.scrollLeft = scroll.left;
  }
}
Contributor

niftylettuce commented Mar 31, 2014

@arxpoetica thanks, how does this look? /cc @jaredhanson (do we need to update docs?)

// Remove the ugly Facebook appended hash
// <https://github.com/jaredhanson/passport-facebook/issues/12>
if (window.location.hash && window.location.hash === "#_=_") {
  // If you are not using Modernizr, then the alternative is:
  //   `if (window.history && history.replaceState) {`
  if (Modernizr.history) {
    window.history.replaceState("", document.title, window.location.pathname);
  } else {
    // Prevent scrolling by storing the page's current scroll offset
    var scroll = {
      top: document.body.scrollTop,
      left: document.body.scrollLeft
    };
    window.location.hash = "";
    // Restore the scroll offset, should be flicker free
    document.body.scrollTop = scroll.top;
    document.body.scrollLeft = scroll.left;
  }
}
@arxpoetica

This comment has been minimized.

Show comment
Hide comment
@arxpoetica

arxpoetica Apr 1, 2014

Yup. That's what I did in my app.

arxpoetica commented Apr 1, 2014

Yup. That's what I did in my app.

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Apr 14, 2014

Contributor

@jerone why'd you remove your comment? how about this /cc @arxpoetica

// Remove the ugly Facebook appended hash
// <https://github.com/jaredhanson/passport-facebook/issues/12>
(function removeFacebookAppendedHash() {
  if (!window.location.hash || window.location.hash !== '#_=_')
    return;
  if (window.history && window.history.replaceState)
    return window.history.replaceState('', document.title, window.location.pathname + window.location.search);
  // Prevent scrolling by storing the page's current scroll offset
  var scroll = {
    top: document.body.scrollTop,
    left: document.body.scrollLeft
  };
  window.location.hash = "";
  // Restore the scroll offset, should be flicker free
  document.body.scrollTop = scroll.top;
  document.body.scrollLeft = scroll.left;
}());
Contributor

niftylettuce commented Apr 14, 2014

@jerone why'd you remove your comment? how about this /cc @arxpoetica

// Remove the ugly Facebook appended hash
// <https://github.com/jaredhanson/passport-facebook/issues/12>
(function removeFacebookAppendedHash() {
  if (!window.location.hash || window.location.hash !== '#_=_')
    return;
  if (window.history && window.history.replaceState)
    return window.history.replaceState('', document.title, window.location.pathname + window.location.search);
  // Prevent scrolling by storing the page's current scroll offset
  var scroll = {
    top: document.body.scrollTop,
    left: document.body.scrollLeft
  };
  window.location.hash = "";
  // Restore the scroll offset, should be flicker free
  document.body.scrollTop = scroll.top;
  document.body.scrollLeft = scroll.left;
}());
@arxpoetica

This comment has been minimized.

Show comment
Hide comment
@arxpoetica

arxpoetica commented Apr 15, 2014

Word.

@jerone

This comment has been minimized.

Show comment
Hide comment
@jerone

jerone Apr 15, 2014

@jerone why'd you remove your comment?

Because I posted exactly what the comment already noted, which I stupidly saw after posting.

// If you are not using Modernizr, then the alternative is:
//   `if (window.history && history.replaceState) {`

jerone commented Apr 15, 2014

@jerone why'd you remove your comment?

Because I posted exactly what the comment already noted, which I stupidly saw after posting.

// If you are not using Modernizr, then the alternative is:
//   `if (window.history && history.replaceState) {`
@pedramphp

This comment has been minimized.

Show comment
Hide comment
@pedramphp

pedramphp Oct 22, 2014

I can't believe that facebook hasn't fixed this issue, yet.
But thanks for the fix Guys.

pedramphp commented Oct 22, 2014

I can't believe that facebook hasn't fixed this issue, yet.
But thanks for the fix Guys.

@grabbou

This comment has been minimized.

Show comment
Hide comment
@grabbou

grabbou Nov 3, 2014

I am not sure if that's a Facebook issue @pedramphp.

https://developers.facebook.com/blog/post/552/

This week, we started adding a fragment #= to the redirect_uri when this field is left blank. Please ensure that your app can handle this behavior.

grabbou commented Nov 3, 2014

I am not sure if that's a Facebook issue @pedramphp.

https://developers.facebook.com/blog/post/552/

This week, we started adding a fragment #= to the redirect_uri when this field is left blank. Please ensure that your app can handle this behavior.

@arcanis

This comment has been minimized.

Show comment
Hide comment
@arcanis

arcanis Dec 21, 2014

The fragment is added even when the redirect_uri is not blank (actually, it doesn't work anyway without the redirect_uri parameter, as far as I can see) ... :(

And Facebook seems to have removed the bug, so it's great.

Could this hash be removed from passport side ? : /

arcanis commented Dec 21, 2014

The fragment is added even when the redirect_uri is not blank (actually, it doesn't work anyway without the redirect_uri parameter, as far as I can see) ... :(

And Facebook seems to have removed the bug, so it's great.

Could this hash be removed from passport side ? : /

@arcanis

This comment has been minimized.

Show comment
Hide comment
@arcanis

arcanis Dec 21, 2014

I've found another Facebook bug about this, which heavily implies that :

  • The bug is actually the blog post description
  • It will never be fixed
  • It is made to force-kill the hash

I think that node-passport should support this and drop the hash altogether, since its only purpose is to prevent the previous one from being transmitted.

arcanis commented Dec 21, 2014

I've found another Facebook bug about this, which heavily implies that :

  • The bug is actually the blog post description
  • It will never be fixed
  • It is made to force-kill the hash

I think that node-passport should support this and drop the hash altogether, since its only purpose is to prevent the previous one from being transmitted.

@k-j-kleist

This comment has been minimized.

Show comment
Hide comment

k-j-kleist commented May 16, 2015

@arcanis: +1

@yozaira

This comment has been minimized.

Show comment
Hide comment
@yozaira

yozaira May 21, 2015

Thanks for the fix, guys! It was driving me crazy

yozaira commented May 21, 2015

Thanks for the fix, guys! It was driving me crazy

@m3commish

This comment has been minimized.

Show comment
Hide comment
@m3commish

m3commish Jul 1, 2015

Where do I place the code?

// Remove the ugly Facebook appended hash
// #12
(function removeFacebookAppendedHash() {
if (!window.location.hash || window.location.hash !== '#=')
return;
if (window.history && window.history.replaceState)
return window.history.replaceState("", document.title, window.location.pathname);
// Prevent scrolling by storing the page's current scroll offset
var scroll = {
top: document.body.scrollTop,
left: document.body.scrollLeft
};
window.location.hash = "";
// Restore the scroll offset, should be flicker free
document.body.scrollTop = scroll.top;
document.body.scrollLeft = scroll.left;
}());

m3commish commented Jul 1, 2015

Where do I place the code?

// Remove the ugly Facebook appended hash
// #12
(function removeFacebookAppendedHash() {
if (!window.location.hash || window.location.hash !== '#=')
return;
if (window.history && window.history.replaceState)
return window.history.replaceState("", document.title, window.location.pathname);
// Prevent scrolling by storing the page's current scroll offset
var scroll = {
top: document.body.scrollTop,
left: document.body.scrollLeft
};
window.location.hash = "";
// Restore the scroll offset, should be flicker free
document.body.scrollTop = scroll.top;
document.body.scrollLeft = scroll.left;
}());

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jul 27, 2015

When user try to log in with FB, then I redirect him to my web url "/fb", but this code is clear my "/fb" get param...

ghost commented Jul 27, 2015

When user try to log in with FB, then I redirect him to my web url "/fb", but this code is clear my "/fb" get param...

@BjarniLeifs

This comment has been minimized.

Show comment
Hide comment
@BjarniLeifs

BjarniLeifs Aug 4, 2015

I had this problem and tried a lot of things.

How ever when I added website and hit quick start in the app (in website title bar on app site)
I saw : Setup the Facebook SDK for JavaScript

They said to put it after body and So I did.

window.fbAsyncInit = function() {
FB.init({
appId YOUR_APP_ID,
xfbml : true,
version : 'v2.4'
});
};

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Everything worked after what ..

Since I'm using jwt and not session I had to add in the callback

app.get('/auth/facebook/callback', passport.authenticate('facebook', {
session: false,
successRedirect : '/',
failureRedirect : '/login'
}));

Now I get the information from Facebook but some variable's undefined, but it is step forward.

Hope this works for you too :)

BjarniLeifs commented Aug 4, 2015

I had this problem and tried a lot of things.

How ever when I added website and hit quick start in the app (in website title bar on app site)
I saw : Setup the Facebook SDK for JavaScript

They said to put it after body and So I did.

window.fbAsyncInit = function() {
FB.init({
appId YOUR_APP_ID,
xfbml : true,
version : 'v2.4'
});
};

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Everything worked after what ..

Since I'm using jwt and not session I had to add in the callback

app.get('/auth/facebook/callback', passport.authenticate('facebook', {
session: false,
successRedirect : '/',
failureRedirect : '/login'
}));

Now I get the information from Facebook but some variable's undefined, but it is step forward.

Hope this works for you too :)

@Globik

This comment has been minimized.

Show comment
Hide comment
@Globik

Globik Oct 11, 2015

Епт, на дворе 2016 год, а до сих пор не исправили баг.

Globik commented Oct 11, 2015

Епт, на дворе 2016 год, а до сих пор не исправили баг.

@cadilhac

This comment has been minimized.

Show comment
Hide comment
@cadilhac

cadilhac Feb 17, 2016

@niftylettuce For completeness, it would be good to add the query string to the url rewrite:

return window.history.replaceState("", document.title, window.location.pathname + window.location.search);

cadilhac commented Feb 17, 2016

@niftylettuce For completeness, it would be good to add the query string to the url rewrite:

return window.history.replaceState("", document.title, window.location.pathname + window.location.search);

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce
Contributor

niftylettuce commented Feb 20, 2016

done @cadilhac

@rubilnik89

This comment has been minimized.

Show comment
Hide comment
@rubilnik89

rubilnik89 Jun 30, 2017

Епт, на дворе середина 2017 года, а до сих пор не исправили баг.

rubilnik89 commented Jun 30, 2017

Епт, на дворе середина 2017 года, а до сих пор не исправили баг.

@Globik

This comment has been minimized.

Show comment
Hide comment
@Globik

Globik Jun 30, 2017

А и не говори.

Globik commented Jun 30, 2017

А и не говори.

@vtrykoz

This comment has been minimized.

Show comment
Hide comment
@vtrykoz

vtrykoz Dec 21, 2017

ёпт, на дворе начало 2018 года, а до сих пор не исправили баг.

vtrykoz commented Dec 21, 2017

ёпт, на дворе начало 2018 года, а до сих пор не исправили баг.

@Globik

This comment has been minimized.

Show comment
Hide comment
@Globik

Globik Dec 22, 2017

Баг не баг, а не покую ли как строка выглядет? Пить, есть не просит. Ее преобразовать можно с помощью windows.history или что-то в этом роде. Да мне просто лень это делать, да и не во всех браузерах сиё работает.

Globik commented Dec 22, 2017

Баг не баг, а не покую ли как строка выглядет? Пить, есть не просит. Ее преобразовать можно с помощью windows.history или что-то в этом роде. Да мне просто лень это делать, да и не во всех браузерах сиё работает.

@Globik

This comment has been minimized.

Show comment
Hide comment
@Globik

Globik Dec 22, 2017

Че интересно так history.replacestate в файерфоксе почему-то не возымеет никакого действия, в ие не пробовал. В хроме отлично работает, на ура.

Globik commented Dec 22, 2017

Че интересно так history.replacestate в файерфоксе почему-то не возымеет никакого действия, в ие не пробовал. В хроме отлично работает, на ура.

@nikitakotenko88

This comment has been minimized.

Show comment
Hide comment
@nikitakotenko88

nikitakotenko88 commented Jul 17, 2018

2018... still

@Globik

This comment has been minimized.

Show comment
Hide comment
@Globik

Globik Jul 17, 2018

@vtrykoz середина 2018-го уже.

Globik commented Jul 17, 2018

@vtrykoz середина 2018-го уже.

@vtrykoz

This comment has been minimized.

Show comment
Hide comment
@vtrykoz

vtrykoz Jul 17, 2018

@Globik и не говори

vtrykoz commented Jul 17, 2018

@Globik и не говори

@luisvallejomohl

This comment has been minimized.

Show comment
Hide comment
@luisvallejomohl

luisvallejomohl Jul 18, 2018

The answer is:

if(location.hash = '#_=_'){
location.href = location.href.split('#')[0];
}; 

luisvallejomohl commented Jul 18, 2018

The answer is:

if(location.hash = '#_=_'){
location.href = location.href.split('#')[0];
}; 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment