'The method FB.getLoginStatus can no longer be called from http pages

So I tried to implement Facebook Login feature in my nodejs backend server. For testing purpose, I am trying client side to check the login and get access token. For that, I followed the docs and it says to use Javascript SDK and I followed the procedure, but there is a problem.

window.fbAsyncInit = function() {
    FB.init({
      appId            : '##############',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v4.0'
    })


    FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
    });

  }

This is the code where I want to get the user login status, but I get an error saying:

The method FB.getLoginStatus can no longer be called from http pages

I am very much aware about the production rules, but this is development mode I am working on and still getting the error. Anything I am missing? Anything I have to do? I am running it on localhost and getting the error.



Solution 1:[1]

Solution 2:[2]

There's an easier fix if using create-react-app: set environment variable HTTPS to true. Cange your start script in package.json:

"scripts": {
  "start": "HTTPS=true react-scripts start",
  ...
}

If already using a custom script, you can also add it there:

process.env.HTTPS = true;

The main advantage of the latter method is that you can add a comment to explain it.

More info on configuration in CRA: https://create-react-app.dev/docs/advanced-configuration

Solution 3:[3]

To solve this problem "The method FB.getLoginStatus can no longer be called from http pages" i used application https://ngrok.com/

and its make https in my browser on localserver via tunneling or sth like that

Windows 10 +wsl(Debian)

  1. Download ngrok

  2. Unzip it to folder

  3. Run cmd and navigate to folder with ngrok

  4. Now You can run :"ngrok http:80" <-assuming that You have apache2 service working

  5. I have my project in different/sub folder of DocumentRoot and i need also do this:

    https://stackoverflow.com/a/51114684

Solution 4:[4]

In package.json I just used this:

"serve": "vue-cli-service serve  --https true",

Instead of:

"serve": "vue-cli-service serve",

And it worked fine.

Solution 5:[5]

You need an SSL-certificate deployed on your server (i.e. localhost). It will reject anything from an insecure location.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Jakub Ujvvary
Solution 4 Mohamed El Firdoussi
Solution 5 blackforest-tom