问题
I'm trying to integrate a web app I'm building with Facebook. Facebook now requires all API calls to be made from https sites. This app I'm building is just for fun so I'm using localhost. I'm using ngrok to forward my requests to Facebook as https.
My issue is that although I can see my app when I navigate to the ngrok domain, but it is not working as expected. The ngrok command I am using to create a https tunnel is ngrok http -bind-tls=true localhost:3001
I'm using React to build my app and I've made it so the Login button is disabled until the initial Facebook SDK as been connected to my app. If a view my app on localhost I my login button goes from disabled to enabled and I can click it and login to Facebook successfully but I do get an error in the console saying index.js:1 The method FB.api can no longer be called from http pages.
If I try to logout from localhost it fails and I get an error Refused to display 'https://www.facebook.com/home.php' in a frame because it set 'X-Frame-Options' to 'deny'.
Now if I navigate to the ngrok site (https://f9e3ae2d.ngrok.io/) the login button is still disabled, but if I click the logout button I will successfully logout of Facebook. Additionally if I remove the disabled functionality from the login button the login button in ngrok will work rarely but I can't figure out why this is.
Any help is greatly appreciated
Why can I login to Facebook from localhost, but cannot on ngrok? Why can't I logout of Facebook on localhost, but I can on ngrok? Have I mixed something up with ngrok works? My app did work correctly in ngrok when I had everything in App.js, but when I tried to move the login button into it's own component that's when these issues arose. Can I not use React with ngrok?
index.html
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXX',
autoLogAppEvents : true,
xfbml : false,
version : 'v5.0'
});
const fbInitEvent = new Event('FBObjectReady')
document.dispatchEvent(fbInitEvent)
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="root"></div>
</body>
App.js
import React from 'react'
import FacebookLogin from './FacebookLogin/FacebookLogin'
import './App.css'
class App extends React.Component {
handleFacebookLogout = () => {
window.FB.getLoginStatus((response) => {
if (response.status === 'connected') {
window.FB.logout(function(response) {
console.log(response)
})
}
})
}
render () {
return (
<div className="App">
<header className="App-header">
<h2>Social Media Manager</h2>
<FacebookLogin />
<button onClick={this.handleFacebookLogout}>Logout</button>
</header>
</div>
)}
}
export default App
FacebookLogin.js
import React from 'react'
class FacebookLogin extends React.Component {
constructor() {
super()
this.state = {
disableLogin: true
}
}
componentDidMount() {
document.addEventListener('FBObjectReady', this.initalizeFacebookLogin)
}
componentWillUnmount() {
document.removeEventListener('FBObjectReady', this.initalizeFacebookLogin)
}
initalizeFacebookLogin = () => {
this.FB = window.FB
this.checkLoginStatus()
this.setState({disableLogin: false})
}
checkLoginStatus = () => {
this.FB.getLoginStatus(response => {
if (response.status === 'connected') {
console.log('you are logged in')
} else {
console.log('you are not logged in')
}
})
}
facebookLoginHandler = () => {
if (this.FB) {
this.FB.login(response => {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ')
this.FB.api('/me', response => {
console.log('Good to see you, ' + response.name + '.')
})
} else {
console.log('User cancelled login or did not fully authorize.')
}
})
}
}
render () {
return (
<button disabled={this.state.disableLogin} onClick={this.facebookLoginHandler}>Login to Facebook</button>
)
}
}
export default FacebookLogin
来源：https://stackoverflow.com/questions/59522085/facebook-sdk-login-logout-ngrok