PAYATHON 2026

Angular 部署到 Firebase 后,如何修复自定义域名的 Google 登录回调?

数据阿明

结论

通常不需要给 Angular 配置“忽略路由”。/__/auth/handler 应由 Firebase Authentication 的认证辅助页面处理,前提是自定义域名正确接入了对应项目的 Firebase Hosting。

NG04002 表明 Angular Router 尝试匹配了这条路径。结合弹窗显示应用首页的现象,可以推测认证请求进入了 Angular 应用,但仅凭这个报错还不能确定问题是由域名配置、代理还是缓存造成的。

为什么调整 Angular 路由解决不了根本问题

浏览器加载 Angular 应用后,即使路由守卫拒绝导航,也不会自动把同一个请求交给 Firebase 认证处理器。为该路径添加空组件或将其重定向到首页,同样无法完成 OAuth 回调。

Firebase Hosting 对 /__/* 保留命名空间的处理优先于普通重定向和 SPA rewrite。因此,请求直接到达正确的 Firebase Hosting 服务时,常见的 ** → /index.html rewrite 通常不需要为认证路径增加例外。Firebase Hosting 响应优先级

按顺序检查配置

1. 确认自定义域名接入了正确的 Hosting 项目

在 Firebase Hosting 中确认 auth.example.com 已完成自定义域名绑定,并且属于当前应用使用的 Firebase Authentication 项目。仅配置 DNS 或将该域名重定向到应用首页,都不能提供认证处理端点。

Firebase 官方要求自定义 authDomain 接入使用同一认证项目的 Firebase Hosting。自定义认证域名配置

2. 确认 authDomain 只填写主机名

authDomain 的值应为:

auth.example.com

不要填写完整回调 URL:

https://auth.example.com/__/auth/handler

修改现有 Firebase 配置中的 authDomain 字段,其余配置保留原值。下面的 existingFirebaseConfig 代表项目原有的配置对象:

const firebaseConfig = {
  ...existingFirebaseConfig,
  authDomain: "auth.example.com"
};

在现有的 Firebase 或 AngularFire 初始化位置使用修改后的配置,并确认生产环境实际加载了这份配置。

3. 分别配置 Firebase 域名授权和 Google OAuth 回调地址

  1. 在 Firebase Authentication 的 Authorized domains 中添加 auth.example.com。如果应用实际运行在其他域名,也应确认该域名已获授权。
  2. 找到 Firebase Google 登录实际使用的 Google OAuth Web 客户端,在 Authorized redirect URIs 中添加以下完整地址:
https://auth.example.com/__/auth/handler

与 authDomain 字段不同,这里需要包含 https:// 和 /__/auth/handler。Firebase 的 Google 登录文档列出了这些自定义域名配置步骤。Google 登录自定义域名说明

配置正确后仍跳首页,如何定位

在登录弹窗的开发者工具中打开 Network,保留请求日志并重新触发登录,然后检查 /__/auth/handler 请求的响应内容和重定向链:

  • 如果响应包含 Angular 的根元素和应用脚本,说明请求返回了应用入口页面,应继续检查实际提供响应的服务。
  • 如果出现跳转到 / 的 HTTP 重定向,检查域名转发、CDN 或反向代理规则。
  • 如果请求由 Service Worker 响应,先临时绕过或注销它,再重试,以判断导航回退是否拦截了认证路径。

如果应用启用了 PWA,Service Worker 的 navigation fallback 必须排除 Firebase 保留的 /__ 命名空间。Firebase 官方明确要求不要拦截这类请求。保留 URL 与 Service Worker

直接访问不带登录参数的 /__/auth/handler 时,可能出现认证参数相关错误,这本身不能证明端点配置失败。应结合真实登录请求判断,重点确认它没有返回 Angular 首页。

如果该域名实际上由其他服务器提供服务

如果 auth.example.com 的请求没有由 Firebase Hosting 处理,就需要在实际服务器上提供认证辅助端点。一种官方方案是将 /__/auth/ 下的 GET/POST 请求透明反向代理到当前项目的默认 Firebase 域名,并保留路径和查询参数。普通的 302 跳转不能替代这种代理。认证请求反向代理方案

目前缺少 Hosting、代理和 Service Worker 配置,无法确定具体是哪一层出了问题。优先核实自定义域名的实际请求去向,以及 /__/auth/handler 返回的内容,再调整对应配置。

备注:内容仅供参考。