Firebase Auth自定义域名Google登录失败及多浏览器兼容问题求助

一、Firebase控制台核心配置 #

1. 添加自定义授权域

   • 进入Firebase控制台，打开目标项目，导航至「Authentication」→「设置」标签页。
   • 在「授权域」区域，点击「添加域」，输入你的自定义域名https://example.com，确认保存。

2. 配置Google登录提供商的重定向URI

   • 在「Authentication」→「登录方法」中找到「Google」提供商，点击「编辑」。
   • 在「授权重定向URI」列表中，添加自定义域名对应的回调地址：https://example.com/__/auth/handler（这是Angular Fire默认的认证回调路径，若你的应用路由有自定义配置，需替换为对应路径）。
   • 保存更改。

二、GCP Identity Platform补充配置（若Firebase配置未生效） #

1. 打开GCP控制台，定位到对应项目，搜索并进入「Identity Platform」服务。
2. 点击左侧菜单「身份提供商」→「Google」，进入编辑界面。
3. 在「已授权的重定向URI」中添加https://example.com/__/auth/handler，同时确保「已授权的JavaScript来源」包含https://example.com。
4. 保存配置。

三、解决浏览器兼容性问题（Safari/iOS Chrome） #

1. 强制HTTPS与证书有效性

   • 确保自定义域名已配置有效的SSL证书，所有页面资源均通过HTTPS加载（混合内容会触发浏览器安全限制）。

2. 调整Firebase Cookie政策

   • 在Firebase控制台「Authentication」→「设置」→「Cookie政策」中，将选项设置为「无限制」（或根据需求调整为SameSite=None，需配合HTTPS），避免Safari的跨站跟踪限制阻止认证Cookie。

3. 替换登录方式（可选）

   • 若用户开启了Safari的「阻止跨站跟踪」，重定向登录会受影响。可改用Firebase的弹出式登录（signInWithPopup）替代重定向登录，弹出式受跨站限制影响较小。

四、Angular Fire代码层面检查 #

1. 确认app.config.ts（或对应配置文件）中的Firebase初始化配置，authDomain若使用自定义域名需填写正确；若保留Firebase原生域名，需确保已在授权域中添加自定义域名。
2. 在应用初始化时，确保调用getRedirectResult()处理重定向后的认证结果，示例代码：

   import { getAuth, getRedirectResult } from '@angular/fire/auth';
   
   constructor() {
     const auth = getAuth();
     getRedirectResult(auth)
       .then((result) => {
         // 处理登录结果
       })
       .catch((error) => {
         // 捕获错误
       });
   }
   

内容的提问来源于stack exchange，提问作者serlingpa