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

Question

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.

have a self signed certificate and run your local server on https. https://devcenter.heroku.com/articles/ssl-certificate-self — Akhil Surapuram, Apr 10 '20 at 16:52

andyrandy · Accepted Answer · 2020-04-10T18:06:44.780

9

If your server runs on localhost (aka on your machine): Use devcert for https on localhost
alternatively, use a self signed certificate manually
...or use ngrok, if you want to expose your local server
If not on localhost, use a free certificate of Let's Encrypt with certbot: https://letsencrypt.org/docs/client-options/

edited Apr 10 '20 at 18:06

answered Oct 10 '19 at 14:46

andyrandy

72,880
8
113
130

According to [this Facebook blog post](https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/) from 2018, HTTPS should not be required for "localhost" addresses when your app is in development mode. Surely you shouldn't have to go to the trouble of setting up HTTPS while developing locally. – Simon East Jan 13 '23 at 07:03
as you said, 2018...either way, i would not want to work with http on localhost anymore, to be honest. – andyrandy Jan 18 '23 at 16:16
Really? What's your concern about developing locally with plain HTTP? Well, apart from instances like the original post where API's like Facebook require it? – Simon East Jan 19 '23 at 05:07
the main concern is that i want to develop locally as close to the final system in production :) - either way, devcert or self signed certificate works very well, for example. if you run all your projects on the same local domain (local.dev or whatever), you can even use the same certificate. or use DDEV, it does all the ssl stuff for you already. – andyrandy Jan 19 '23 at 11:23
@andyrandy where should i place `ngrok url` once I execute `ngrok http 3000` – Azhar Uddin Sheikh Jul 31 '23 at 14:36

wvdz · Answer 2 · 2020-07-13T13:02:04.023

5

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

edited Jul 13 '20 at 13:02

answered Apr 13 '20 at 21:14

wvdz

16,251
4
53
90

2

"set HTTPS=true" has no effect, as far as I can tell. – Marc Jul 10 '20 at 07:44
1

@Marc looks like I mistakenly assumed this to be nodeJS feature, but it's actually a feature of Create React App (https://create-react-app.dev/docs/advanced-configuration). I'll update my answer to reflect this. – wvdz Jul 13 '20 at 13:00
All you need to do is to add `HTTPS=true` in `.env` file and then simply run `npm start`. No need to change `npm start` script also – Germa Vinsmoke Feb 05 '21 at 14:06
@GermaVinsmoke That's what I'm saying... you don't need to do both. I'm just providing two different ways of setting the env variable. – wvdz Feb 17 '21 at 10:23

score 3 · Answer 3 · answered Dec 03 '19 at 13:15

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)

Download ngrok
Unzip it to folder
Run cmd and navigate to folder with ngrok
Now You can run :"ngrok http:80" <-assuming that You have apache2 service working
I have my project in different/sub folder of DocumentRoot and i need also do this:

https://stackoverflow.com/a/51114684

score 0 · Answer 4 · edited Jan 13 '23 at 07:06

0

If you're using the Vue CLI to develop your website or app, then in package.json you can use this:

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

Instead of:

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

And it worked fine.

edited Jan 13 '23 at 07:06

Simon East

55,742
17
139
133

answered Apr 24 '22 at 11:16

Mohamed El Firdoussi

71
1
2

score 0 · Answer 5 · answered Sep 29 '22 at 12:18

For those running NextJS, there is a detailed discussion here: https://github.com/vercel/next.js/discussions/10935

I think the simplest solution among the comments is this:

yarn add --dev local-ssl-proxy
next dev -p 3001 & local-ssl-proxy --source 3000 --target 3001

If you're using Chrome, navigate to chrome://flags/#allow-insecure-localhost and enable the setting.

The down side of this solution is that local-ssl-proxy is a very old package. But it serves the purpose if you only need to test some HTTPS only features.

Gnopor · Answer 6 · 2023-01-13T08:36:30.087

0

It works on local machines but there is something you need to do first.

Change your machine URI from the X.X.X.X to localhost.

Ex: Change http://127.0.0.0 ---> http://localhost

edited Jan 13 '23 at 08:36

answered Nov 18 '22 at 16:07

Gnopor

587
9
16

Does it work if you're using `localhost:8080` or some other port like that? – Simon East Jan 13 '23 at 07:04
1

Yes, It works with port. – Gnopor Jan 13 '23 at 08:38

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

6 Answers6

Linked