我正在尝试将我正在构建的网络应用程序与 Facebook 集成。 Facebook 现在要求所有 API 调用都必须从 https 站点进行。我正在构建的这个应用程序只是为了好玩，所以我使用的是 localhost。我在用着ngrok将我的请求作为 https 转发到 Facebook。
我的问题是，虽然当我导航到 ngrok 域时可以看到我的应用程序，但它没有按预期工作。我用来创建 https 隧道的 ngrok 命令是ngrok http -bind-tls=true localhost:3001
我正在使用 React 来构建我的应用程序，并且我已经做到了这一点，因此登录按钮被禁用，直到初始 Facebook SDK 连接到我的应用程序。如果在本地主机上查看我的应用程序，我的登录按钮从禁用变为启用，我可以单击它并成功登录 Facebook，但我确实在控制台中收到错误消息index.js:1 The method FB.api can no longer be called from http pages.
如果我尝试从本地主机注销，则会失败并收到错误消息Refused to display 'https://www.facebook.com/home.php' in a frame because it set 'X-Frame-Options' to 'deny'.
现在，如果我导航到 ngrok 站点（https://f9e3ae2d.ngrok.io/ https://f9e3ae2d.ngrok.io/）登录按钮仍然被禁用，但如果我单击注销按钮，我将成功注销 Facebook。另外，如果我从登录按钮中删除禁用的功能，ngrok 中的登录按钮将很少起作用，但我不明白这是为什么。
任何帮助是极大的赞赏
为什么我可以从 localhost 登录 Facebook，但不能在 ngrok 上登录？
为什么我无法在 localhost 上注销 Facebook，但可以在 ngrok 上注销？
我是否与 ngrok 作品混淆了？当我在 App.js 中拥有所有内容时，我的应用程序在 ngrok 中确实可以正常工作，但是当我尝试将登录按钮移到它自己的组件中时，就会出现这些问题。我可以不将 React 与 ngrok 一起使用吗？
索引.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
