12

This issue is no longer a problem for me. Facebook doesn't allow you to share/post photos on the web anymore. As for the login issue, i cannot tell which solution proposed resovles the issue since I am no longer working on it. //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

I am working on a login button for sharing purposes. The button and sharing feature works great on every browser except MS Edge. It used to work on Edge 25 (I'm currently on Edge 38).

The problem is that when I click on the login button, a login popup appears in which I can enter my credentials. Once they are entered and I try to login, the popup doesn't close and is redirected to this address: 

https://www.facebook.com/v2.1/dialog/oauth?app_id=141515299765971&auth_type=&channel_url=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FlY4eZXm_YWu.js%3Fversion%3D42%23cb%3Df2de29c1e9204f4%26domain%3Dikeabuilds.sandbox3.2020.net%26origin%3Dhttp%253A%252F%252Fikeabuilds.sandbox3.2020.net%252Ff1deb23126bcc0c%26relation%3Dopener&client_id=141515299765971&display=popup&domain=ikeabuilds.sandbox3.2020.net&e2e=%7B%7D&locale=en_US&logger_id=80452c59-88a0-7681-0f2c-ac690c1d62b8&origin=1&redirect_uri=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FlY4eZXm_YWu.js%3Fversion%3D42%23cb%3Df1aa391653df35c%26domain%3Dikeabuilds.sandbox3.2020.net%26origin%3Dhttp%253A%252F%252Fikeabuilds.sandbox3.2020.net%252Ff1deb23126bcc0c%26relation%3Dopener%26frame%3Df7b23e2a9aa328&ref=LoginButton&response_type=none%2Ctoken%2Csigned_request&scope=publish_actions&sdk=joey&seen_revocable_perms_nux=false&version=v2.1

I am not considered logged in too. I searched a lot on the web and even read the documentation about the login button and haven't found anything except that there is only one workaround. It consist of adding the facebook url to the trusted site in the internet options of windows. It is not a viable solution and therefore is not a solution for me. The images are the code of the facebook login html page, the blank redirect page and the one containing the login button. I also have a .js page containing all facebook related functions but doesn't fit in one image, if need be I will provide it. What is going on?

The facebook login button:

The redirect link:

The html code for the page containing the facebook login button:

Astrea
  • 131
  • 6
  • Most likely a problem with how 3rd-party cookies are treated by the browser. Little you can do about that, Facebook would have to fix this (if at all possible from their end). File a bug report and ask them to look into it. me have web site auto like – CBroe Nov 10 '17 at 09:47
  • So turns out, I filed a bug report. They told me it was on my side so... I'm at the same point as I was before – Astrea Nov 20 '17 at 15:19
  • 1
    The login prompt connects me to facebook actually. The login prompt simply never close so the access token is never returned on my app. So it doesn't connect... I don't know how to make this work though – Astrea Nov 20 '17 at 20:29
  • If it works when you add it to trusted sites, then it must be some setting-related issue. Since you can't force or know what settings regular users will come to your site with, I'd suggest you forgo the whole popup login and the issues that come with it, and switch to the server-side login flow, if at all possible - that is certainly the most "robust" version. – CBroe Nov 20 '17 at 21:05
  • Hum I guess this could be a solution if nothing else works. It is mostly going to be hard to implement. I actually work for a company and the facebook feature is part of the website we are building for clients. So even if we implement it on our test servers, it might not work on theirs... I'll have to check on that but it is worth considering. Thanks btw :) – Astrea Nov 21 '17 at 18:20
  • @ThDK, any browser console errors or something else? – Tarun Lalwani Jun 06 '18 at 09:14
  • @TarunLalwani just a blank screen... Nothing in console, nothing else either unfortunately. – ThdK Jun 07 '18 at 11:19
  • There's a redirect functionality if that is what you are looking for. Once login is complete, facebook navigates back to the specified url. Now, since you are logged in, you can request for your token separately. – Aseem Upadhyay Jun 12 '18 at 06:26

2 Answers2

3

From what I have tested, I am able to reproduce your issue, but I am not sure if this is the case in your situation.

The same issue happens when MS Edge or IE blocks pop-ups and the user chooses to "Allow once" the popup and when the popup tries to redirect, you get the blank page(it is blocked).

If you choose to "Allow always", the popup redirects and closes correctly.

What you can do to overcome this, is actually enable

  • login redirect,
  • let the redirect place a cookie at your domain
  • use Facebook JS SDK and check if the user is connected.

So, first enable the login redirect:

enter image description here

and then do:

FB.init({
  appId            : 'APP_ID',
  autoLogAppEvents : true,
  cookie           : true,  // <-- use this
  xfbml            : true,
  version          : 'v3.0'
});
var uri = encodeURI('http://test.gr');
FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
        console.log(response.status); // should log connected.

    } else {
       window.location = 'https://www.facebook.com/v3.0/dialog/oauth?client_id=APP_ID&redirect_uri='+encodeURI(uri)+'&display=popup&scope=user_status&response_type=token&version=v3.0';
    }
});

Replace "test.gr" and "APP_ID" with your domain and app id.

After the redirect back to your site, a cookie with name fbm_{APP_ID} will be placed for your domain, which enables user to be logged in.

References

Jannes Botis
  • 11,154
  • 3
  • 21
  • 39
0

I think you have to leave the javascript SDK to a more customizable solution called manual login flow.

Instead of using the fb:login-button you can write your custom button like this: 

<a href="https://www.facebook.com/v3.0/dialog/oauth?client_id={app-id}&redirect_uri={redirect-uri}&state={state-param}">Log-in to my app</a>

and customize the redirect_uri parameter with an url of an html page of your app that you can handle with your custom code, for example a thank you message and a timeout with window.close().

Emanuele
  • 795
  • 4
  • 13