验证弹出返回空白页答案

【问题标题】：Auth pop up returning blank page验证弹出返回空白页
【发布时间】：2015-03-30 16:18:47
【问题描述】：

当我向 google 提交身份验证调用时，我会从 google 窗口获得弹出窗口，然后当我提交我的凭据并按下提交时，它会转发到类似的东西

https://auth.firebase.com/v2/FIREBASEREF/auth/google/callback?state= etc

然后我得到的只是一个空白（蓝色背景）屏幕。

$('#loginButton').click(function() {
  myFirebaseRef.authWithOAuthPopup("google", function(error, authData) {
    if (error) {
      console.log("Login Failed!", error);
      alert("Login Failed, please try again.")
    } else {
      console.log("Authenticated successfully with payload:", authData);
      myUserID = authData.uid;
    }
  });
});

尝试使用 Github 进行身份验证时也会发生同样的情况，我可以按“提交”或“登录”等，然后它只会在 auth.firebase.com 加载一个空白页面

有什么想法吗？

谢谢

【问题讨论】：

大量的想法。 JavaScript 控制台中有什么？您的帐户仪表板中是否启用了这些提供商？哪个屏幕是空白的，弹出窗口还是父页面？它实际上是说 FIREBASEREF 还是指您不想共享的隐藏 URL？什么版本的 Firebase SDK？也许最重要的是，您能否提供一个我们可以运行以查看错误发生的重现？像这样的细微错误不会通过想法或猜测来解决。
@Deanmv 我也面临同样的问题。你得到任何帮助了吗？是的，第二个链接工作正常。这与域不匹配有关吗？

标签： oauth firebase

【解决方案1】：

有时这应该是与您尝试发出请求的域相关的权限问题，例如 localhost 或 127.0.0.1。

在这种情况下，转到 Firebase 控制台 -> 身份验证 -> 登录方法，然后向下滚动到 Authorized domains 并添加您当前尝试登录的域，例如127.0.0.1.

注意：这仅用于开发目的，如果您想将应用部署到 Prod，则不应进行此配置。对于多个环境，您应该检查here

另一个注意事项：如果您正在使用 Javascript，您可以在调用 firebase.authWithOAuthPopup(...) 之前添加一个 event.preventDefault() 以便能够获得返回 authWithOAuthPopup 函数的承诺的结果。

【讨论】：

【解决方案2】：

FWIW，如果有人最终解决了这个问题：我得到了完全相同的东西...... oauth 弹出窗口是空白的，没有做任何事情。我通过从表单处理程序中删除 async/await 来修复它：

<form onSubmit={this.onSubmit}>
  <button type="submit">Sign In with Google</button>
</form>
...
onSubmit = async event => {
    await this.auth.signInWithPopup(this.googleProvider)
      .then(....

【讨论】：

【解决方案3】：

我的解决方案是从 cordova 添加 inAppBrowser，它不再返回空白页。

【讨论】：