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

Question

当我们的用户 "Block third-party cookies and site data" 时出现此错误。

要重现错误，请转到：

检查您的 Chrome 浏览器 "Block third-party cookies and site data" reference in this guide
转到https://www.deeptent.com
点击登录
接下来您将看到一个空白屏幕。如果你打开浏览器开发者控制台，你会看到这个错误：

We always advise our users to Uncheck the blocking of third-party cookies and site data; however, some users still prefer to block it.

在这个被阻止的情况下，人们仍然可以登录他们的 Gmail。有趣的是，为什么我们的用户不能使用 Firebase-Google OAuth 登录，而第三方 cookie 和站点数据被阻止？
我们是用 Angular2 和 Firebase 构建的。用户仍然无法通过第三方 cookie 和网站数据被阻止进行身份验证吗？

Answer 1

您使用的域是 deeptent.com，但 firebase 进行身份验证和设置 cookie 的域是您的 .firebaseapp.com 域。所以，是的，cookie 被认为是 third-party。 firebase 的人真的应该更仔细地看看他们是如何在 firebase 托管设置中连接自定义域的。另外，请看这里：

Answer 2

我对 firebase 和 Angular 也有同样的问题。

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

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

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

https://[*.]firebaseapp.com

Answer 3

Not recommended, because this solution won't work for everyone

Chrome 仅：

在 chrome Content Settings > Cookies

中打开内容设置

和 select cookie。在那里，~~找到阻止第三方 cookies 并禁用它~~。

注意： 其他浏览器可能都有这个选项，只要找对地方就行了:)

Answer 4

解决方法很简单。假设您已经在 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

Side note: don't forget to also update your other authentification methods such as GitHub, Facebook, etc to add this redirect url to the list.

Answer 5

当您在大多数浏览器中处于 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

备注

当运行在本地主机上时，此解决方案将不起作用，因为 authDomain 将不是 localhost[=56= 的子域].

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

转到：chrome://settings/cookies

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

EXCEPTION: This browser is not supported or 3rd party cookies and data may be disabled

firebase

firebase-authentication

angularfire2

2021 年解决方案

自定义托管域