例外：不支持此浏览器，或者可能会禁用第 3 方 cookie 和数据

Posted 2023-02-19

【中文标题】例外：不支持此浏览器，或者可能会禁用第 3 方 cookie 和数据

【英文标题】：EXCEPTION: This browser is not supported or 3rd party cookies and data may be disabled

【发布时间】：2017-06-03 20:05:54

【问题描述】：

当我们的用户“阻止第三方 cookie 和站点数据”时会发生此错误。

要复制错误，请转到：

检查您的 Chrome 浏览器“阻止第三方 cookie 和站点数据”reference in this guide 转到https://www.deeptent.com 点击登录 接下来您将看到一个空白屏幕。如果你打开浏览器开发者控制台，你会看到这个错误：

我们始终建议我们的用户取消选中对第三方 cookie 和站点数据的阻止；但是，一些用户仍然喜欢阻止它。

在此被阻止的情况下，人们仍然可以登录他们的 Gmail。有趣的是，为什么我们的用户无法使用 Firebase-Google OAuth 登录，但第三方 Cookie 和网站数据已被屏蔽？

我们是用 Angular2 和 Firebase 构建的。用户是否仍然无法通过第三方 cookie 和站点数据进行身份验证？

【问题讨论】：

我不确定 Google 登录网络库是否在这种模式下工作。如果是这样，您可以在这种情况下使用该库登录，然后获取 Google OAuth ID 令牌/访问令牌并使用 signInWithCredential 登录 Firebase。

听起来像是一个计划。谢谢

@choopage 有用吗？我自己也遇到了这个错误。

@choopage 嗨，遇到同样的问题。我看到了可以提供帮助的 firebase 文档guide（部分：“高级：手动处理登录流程”）。有没有人设法解决这个问题？

@choopage - 我最终发现了这个错误，向用户显示错误消息并要求他使用电子邮件和密码登录。

【参考方案1】：

您使用的域是 deeptent.com，但 firebase 对其进行身份验证和设置 cookie 的域是您的 .firebaseapp.com 域。所以，是的，cookie 被视为第三方。 firebase 的人真的应该更仔细地看看他们如何在 firebase 托管设置中连接自定义域。另外，请参见此处： Use Google Firebase Authentication without 3rd Party Cookies

【讨论】：

我想知道我们是否应该将authDomain设置为自定义域而不是项目的firebaseapp.com URL？

【参考方案2】：

我在使用 firebase 和 Angular 时遇到了同样的问题。

在您的environment.ts 文件中，查找：

firebase: 
  authDomain: '<domain>.firebaseapp.com',

在 chrome 设置 chrome://settings/content/cookies 中，将以下字符串添加到 cookie 白名单中：

https://[*.]firebaseapp.com

【讨论】：

在我的项目中，authDomain 设置位于environment.ts 目录下的environment.ts 文件旁边的firebase.comfig.ts 中。

将 cookie 列入白名单就可以了。我想为了增强安全性，我不会将整个 *.firebaseapp.com 列入白名单，而是专门针对我项目的 URL？

是的，只是您的最终用户不会这样做，您必须拥有与他们相同的环境。

您希望最终用户将这些添加到白名单中？

【参考方案3】：

不推荐，因为这个解决方案并不适合所有人

仅限 Chrome： 在chrome中打开内容设置Content Settings > Cookies

并选择 cookie。在那里，找到阻止第三方 cookie 并禁用它。

注意：其他所有浏览器都可能有这个选项，只是在正确的位置寻找问题:)

【讨论】：

它不能解决问题。您不能告诉所有客户这样做才能使用您的应用。

【参考方案4】：

当您在大多数浏览器中处于Incognito Mode 时，会发生此错误。使用自定义 Firebase 域。

2021 解决方案

您可以更改authDomain 以使用相同域 或子域 作为托管应用程序。这样可以避免 cookie 错误。

自定义托管域

如果您使用的是自定义域，您可能需要这样的设置：

mydomain.com      -> Hosted website
auth.mydomain.com -> Auth domain (firebaseConfig.authDomain)

要进行此设置，您需要执行以下操作：

Firebase Console > Authentication > Authorized domains加auth.mydomain.com。 使用您自己的 DNS 管理，添加以下 DNS 记录：

TYPE  = CNAME   
HOST  = auth.mydomain.com
VALUE = my-project-id.firebaseapp.com
TTL   = 3600

Firebase Console > Hosting > Add custom domain（加auth.mydomain.com） 然后在您的应用程序的firebaseConfig 中将authDomain 的值更改为使用auth.mydomain.com

注意

此解决方案在 localhost 上运行时不起作用，因为 authDomain 不会是 localhost 的子域。

在这种情况下，最简单的解决方案是在您的本地域上允许 3rd 方 cookie，以下是在 Chrome 中执行此操作的方法：

转到：chrome://settings/cookies

【讨论】：

我正在使用应用引擎来托管。当我添加自定义域 (auth.example.com) 时，它要求我添加一个将 auth.example.com 指向 ghs.googlehosted.com 的 CNAME，我无法更改该值。这在我添加 SSL 时会产生问题，因为即使重定向成功，它也显示证书属于 firebaseapp.com，而不是 example.com。因此，创建无效证书警告。有什么建议吗？

【参考方案5】：

解决方案非常简单。 假设您已经在 Firebase Hosting 上托管了您的应用，并且 example.com 已经在托管您的包含身份验证的应用：

您的身份验证域应类似于 [projectid].firebaseapp.com

为 Firebase 配置更改您的 authDomain：

config = 
    apiKey: ...,
    authDomain: example.com,
    databaseURL: ...,
    projectId: ...,
    storageBucket: ...,
    appId: ...,

允许 OAuth ID 客户端使用新的重定向 URL： 从console.developers.google.com > 你的项目 > ids > ID 客户端 OAuth 2.0 将https://example.com/__/auth/handler添加到授权重定向url列表中

部署您的主机以包含第 1 步中的更改。

此方法不需要添加 CNAME，这可能由于缺少 https 证书而无法工作。

官方文档https://firebase.google.com/docs/auth/web/google-signin

旁注：不要忘记更新您的其他身份验证方法，例如 GitHub、Facebook 等，以将此重定向 url 添加到列表中。