Question

我在我的应用程序中使用Facebook“继续身份”按钮进行身份验证。该按钮将导致Facebook登录弹出窗口打开，然后将登录结果成功返回给客户端。然后弹出窗口消失，我可以开始将详细信息发送到服务器以使用我的应用进行身份验证的过程。

但是，如果我删除了包含Facebook登录按钮的组件，则弹出窗口将无限期保持打开状态，为空白，带有白色背景。 google上有很多关于此症状的结果，但似乎都与删除该元素无关。

通过延迟元素的移除，此问题得以解决，但是，较慢的连接（长于延迟）仍将导致在Facebook流程完成之前移除元素。

有人知道我如何正确解决此问题吗？我对Facebook SDK完全陌生，如果有更好的方法，请说出来。

组件中的登录按钮：

<div
  className="fb-login-button"
  data-width=""
  data-size="large"
  data-button-type="continue_with"
  data-auto-logout-link="false"
  data-use-continue-as="true"
>
</div>

接收响应的代码：

import { store } from './stores/store'
const facebookCallback = (response) => {
  if (response.status == 'connected') {
    console.log("Logged in successfully!")
    setTimeout(()=>{
      console.log("Runing dispatch")
      store.dispatch(setLoginStatus(true));
    },1000)
    //store.dispatch(setLoginStatus(true));
  } else {
    console.log("Logged in failed!")
    store.dispatch(setLoginStatus(false));
  }
  return false
}
window.fbAsyncInit = function() {
  FB.init({
    appId: '750335742141550',
    cookie: true,  // enable cookies to allow the server to access the session
    cookie: true, 
    xfbml: false,
    status: true,
    oauth: true,
    version: 'v3.2'
  })
  FB.Event.subscribe('auth.statusChange', function(response) {
    facebookCallback(response)
  })
}.bind(this);

登录表单组件由其父级显示/隐藏：

{!this.props.loginState.loggedIn && <LoginForm />}

删除Facebook登录按钮可防止弹出窗口关闭

0 个答案: