列出了 Firebase 重定向域，但仍然出现 signInWithRedirect 错误

Question

我有一个使用 firebase 进行身份验证的 angular 2 应用程序。我想使用 Google 作为我的身份验证提供程序，并设置好所有内容以使其正常工作。

如果我尝试使用 signinWithPopup 进行身份验证（如文档中所述），它会起作用：

firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Google Access Token. You can use it to access the Google API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
}).catch(function(error) {
  // Handle Errors here.
});

但是，如果我使用重定向尝试相同的代码，则会firebase.auth().signInWithRedirect(provider) 收到错误消息：

[firebase-auth] 信息：当前域未被授权进行 OAuth 操作。这将阻止 signInWithPopup、signInWithRedirect、linkWithPopup 和 linkWithRedirect 工作。将您的域 (localhost) 添加到 Firebase 控制台 -> 身份验证部分 -> 登录方法选项卡中的 OAuth 重定向域列表。

但是该域在我的 firebase 控制台中列出（本地主机甚至是默认允许的域之一）。并且错误指出这也会阻止仍然有效的 signinwithpopup。

任何人都知道为什么弹出方法有效而重定向方法无效？

Answer 1

所以我终于弄清楚问题出在哪里了。问题不是基于领域的，而是应用程序流程中的问题。在 app.component.ts 的构造函数中调用 loginwithpopup 代码（目的是在网站加载后立即让人们登录）。

我将该代码更改为 loginwithredirect 函数，但因为它是在构造函数中调用的，所以每次您从 google 身份验证页面重定向回该站点时都会调用它（这使您陷入永恒循环）。我仍然不知道为什么域错误出现在浏览器控制台中，但是当我修复流程以首先检查我们是否从重定向返回时，问题消失了。

为了完整起见，我使用当前代码通过重定向方法登录：

firebase.auth().getRedirectResult().then(function (result) {
  if (result.credential) {
    // This gives you a Google Access Token. You can use it to access the Google API.
    var token = result.credential.accessToken;
    // The signed-in user info.
    var user = result.user;
  } 
  else {
    var provider = new firebase.auth.GoogleAuthProvider();

    provider.addScope('https://www.googleapis.com/auth/gmail.readonly');
    provider.addScope('https://www.googleapis.com/auth/calendar');
    provider.addScope('https://www.googleapis.com/auth/drive');
    provider.addScope('https://www.googleapis.com/auth/drive.appdata');
    provider.addScope('https://www.googleapis.com/auth/drive.file');

    firebase.auth().signInWithRedirect(provider);

   }
}).catch(function (error) {
  // Handle Errors here.
  console.log(error);
});