Okay, so I have this app that needs to access the FB api in order to post content… thing is, I’m, of course, trying my app on localhost. (php5.6 internal server)
I keep getting the error:
The Login Button plugin no longer works on http pages. Please update your site to use https for Facebook Login.
and
The method FB.getLoginStatus can no longer be called from http pages.
despite the fact that people keep saying that https is not required for localhost, so long as the app is in development, which it is.
I thought maybe it was because I was running the php server on port 8000, but I checked using php5.6 -S localhost:80
just in case and the result is literally the same.
The code is:
<div id="fb-root"></div>
<div class="fb-login-button" data-width="" data-size="large" data-button-type="continue_with" data-auto-logout-link="false" data-use-continue-as="true"></div>
<script>
function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
console.log('statusChangeCallback');
console.log(response); // The current login status of the person.
if (response.status === 'connected') { // Logged into your webpage and Facebook.
testAPI();
} else { // Not logged into your webpage or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this webpage.';
}
}
function checkLoginState() { // Called when a person is finished with the Login Button.
FB.getLoginStatus(function(response) { // See the onlogin handler
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '[totally valid id belonging to my development app I quadruple checked.]',
cookie : true, // Enable cookies to allow the server to access the session.
xfbml : true, // Parse social plugins on this webpage.
version : 'v5.0' // Use this Graph API version for this call.
});
FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
statusChangeCallback(response); // Returns the login status.
});
};
(function(d, s, id) { // Load the SDK asynchronously
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<div id="status">
</div>
Please, help me out here. Do I really have to set up a server with https etc etc just for this?
2
Answers
With node.js you can use a tool called “devcert” to have https on localhost.
For PHP:
following change works for me without any issue
change localhost URL from
‘localhost/yoursitename’ to ‘https://localhost/yoursitename’