Firebase 重定向域已列出,但仍给出 signInWithRedirect 错误

2024-06-18

我有一个 Angular 2 应用程序,它使用 firebase 进行身份验证。 我想使用 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 控制台的该部分中(localhost 甚至是默认允许的域之一)。 该错误指出,这也会阻止仍然有效的signinwithpopup。

有人知道为什么弹出方法有效而重定向方法无效吗?


所以我终于弄清楚问题出在哪里了。 问题不是基于领域的,而是应用程序流程中的问题。 在 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);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Firebase 重定向域已列出,但仍给出 signInWithRedirect 错误 的相关文章

  • 从 API 响应动态创建 md-card

    我正在进行 API 调用并存储一堆用户配置文件 并且我希望能够为每个配置文件动态创建卡片 Angular Material Design md card 返回的配置文件数量可能会有所不同 因此这需要是动态的 这是我的组件文件 它发出 JSO
  • 批处理文件运行 npm start

    我有一个角度应用程序 可以使用命令启动npm start在控制台中 现在我想创建一个批处理文件 在启动时执行 npm install 这是我创建的批处理文件 前端 bat cd
  • Cloud Function 会影响 Firebase 存储带宽使用吗?

    I am trying to figure out why firebase storage usage is far above my expectation 我的 Firebase 存储中只有很少的照片文件 只有大约 75 张照片 每张
  • 如何在 Angular CLI 中重命名组件?

    除了手动编辑所有组件文件 例如文件夹名称 css ts spec ts 和 app module ts 之外 是否有任何快捷方式可以使用 Angular CLI 重命名组件 No 没有任何命令可以更改使用组件创建命令生成的所有文件的名称 于
  • 在Firestore中管理createdAt时间戳

    每天我都会将产品从外部零售商进口到谷歌云Firestore https firebase google com docs firestore 数据库 在此过程中 产品可以是新的 新文档将添加到数据库中 或现有的 现有文档将在数据库中更新 应
  • 在 Firebase Listener 中设置 Singleton 属性值

    我目前正在测试 Firebase 以及我计划在整个应用程序的生命周期中用于访问的单例模型 我现在被一些看似微不足道的事情所困扰 但我一生都无法弄清楚 我有一个我使用的模型的示例 Bookmarks in firebase public cl
  • Angular 4 ExpressionChangedAfterItHasBeenCheckedError 错误

    在父组件中 gt ExpressionChangedAfterItHasBeenCheckedError Expression has changed after it was checked Previous value Current
  • Angular/RxJS 我什么时候应该取消订阅“订阅”

    我什么时候应该储存Subscription实例并调用unsubscribe 在此期间ngOnDestroy生命周期以及什么时候我可以忽略它们 保存所有订阅会给组件代码带来很多混乱 HTTP 客户端指南 https angular io do
  • 加载 ng2-table 数据表单 API

    我正在学习 Angular 2 我想使用 PHP 中的 API 数据填充 ng2 table 我有一个返回数据的服务 但我不知道如何使用服务的订阅数据填充数据变量 我正在调用服务方法 getLanguages 我的服务代码是 import
  • FRebase Firestore onCreate 云函数事件参数未定义

    我尝试按照 Firebase 的文档和其他 SO 帖子访问我已成功部署的云函数的参数值 不幸的是我仍然收到了 类型错误 无法读取未定义的属性 id 我已经记录了 event params 并且它输出为未定义 所以我理解这个问题 但不确定从语
  • 重置 Angular 7 Reactive 验证

    我使用 Angular Reactive 表单作为搜索表单 我希望能够重置表格 我用以下代码做到了这一点
  • 从父节点读取特定叶/子节点的 Firebase 规则

    我的 firebase 数据库看起来像这样 students firebase key 1 Name blah blah Address blah blah Roll No blah blah Marks Sub1 blah Sub2 bl
  • React Redux:调度时无限循环

    我发现这个问题很常见 但我没有找到适合我的情况的解决方案 我正在尝试使用 React 和 Redux 以及 Redux thunk 将用户重定向到 React Native 中的另一个导航器 如果我只显示主屏幕 它工作正常 但是当我从登录屏
  • Angular 2 CLI - 部署

    我使用 Angular 2 CLI 构建了 Angular 2 应用程序 我现在的问题是我想将应用程序部署到本地服务器作为暂存环境以供其他人查看 大多数使用 Angular 2 CLI 的教程都展示了dist该文件夹似乎是在首次使用 CLI
  • 如何将 JSON 对象解析为 TypeScript 对象

    我目前正在尝试将收到的 JSON 对象转换为具有相同属性的 TypeScript 类 但无法使其工作 我究竟做错了什么 员工阶层 export class Employee firstname string lastname string
  • 将 WordPress 用户导入 Firebase 身份验证

    我正在将我的 Wordpress 网站迁移到 Firebase 我已成功将我的 Wordpress 用户导出为下面的 JSON 格式 如中所述文档 https firebase google com docs cli auth 我相信 Wo
  • 输入属性在 ngx-charts 模板中不起作用

    按照这个answer https stackoverflow com questions 47826641 ngx charts cant load bar charts directly with async pipe in angula
  • 如何在 webpack 2 和 typescript 以及 Angular 2 中使用 tree-shaking?

    我已经用 Angular 设置了 webpack 2 大多数情况下它似乎可以工作 但它似乎并没有做到这一点tree shaking 因为我有一个几乎不执行任何操作的应用程序 并且vendor js仍然是 800 KB 似乎关于如何打开 tr
  • 在 React 中渲染来自 Firebase 的数据

    请帮助我渲染从 Firebase 实时数据库检索的数据 我成功从 Firebase 中以数组形式检索数据 下一步是显示数据 问题就从这里开始了 我想要显示的数据应该存储在 模块 状态 首先 它被设置为一个空数组 然后检索数据 通过 Coum
  • Angular2 中的 MVW 代表什么?

    我有很多介绍 MVC MVP MVVM 等的链接 但我没有得到一个可以说明 M 在 Angular2 中到底代表什么 V 在 Angular2 中到底代表什么以及 W 在 Angular2 中到底代表什么的信息 也许W有一个答案 那就是W代

随机推荐