允许用户使用 Google 帐户登录我的网站，无需 3d 派对 cookie

Question

我一直在遵循这里非常简单的说明（“将 Google 登录集成到您的网络应用程序中”）。

<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<div class="g-signin2" data-onsuccess="onSignIn"></div>

尽管它在 Chrome 83 中确实有效，但我在 JavaScript 控制台中收到有关第三方 cookie 的警告。事实上，当我的用户（其中​​一些禁用了第三方 cookie）尝试登录按钮时，它会闪烁一个窗口，但没有任何反应。

在故障排除下的文档中，它说“如果您的许多用户都启用了此功能......另一种解决方法是实施服务器端 OAuth 2.0 流程。”

好的。那么它们所说的服务器端 OAuth 2.0 流是什么意思呢？

（FWIW 我的应用程序是 React 单页应用程序）。

Answer 1

https://developers.google.com/identity/protocols/oauth2/web-server 上有一般信息。这是一种方法：

1. 您的应用为您的用户提供了一个登录链接。此链接转到https://accounts.google.com/signin/oauth?response_type=code&client_id=CLIENT_ID&scope=openid%20email&redirect_uri=REDIRECT_URI&state=STATE&nonce=NONCE，其中大写的单词：

   • CLIENT_ID - 注册为您拥有的 Google Cloud 项目的一部分，使用 Cloud Console（当前位于 API 和服务/OAuth 同意屏幕下）
   • REDIRECT_URI - 必须在该项目中注册的应用程序中的 URI
   • STATE - 我用它来保存我希望我的用户被发送到的最终 URI
   • NONCE - 防止重放攻击

2. 当用户导航到该 URI 时，他们将通过 Google 登录过程。成功签名后，它们将被重定向到REDIRECT_URI?state=STATE&code=CODE. STATE是STATE您在前面的链接中提供的，CODE是身份验证代码。

3. 您的应用程序REDIRECT_URI通过向https://oath2.googleapis.com/token上的 Google OAuth 令牌服务发出服务器端 POST 请求，传递CODE, CLIENT_ID, CLIENT_SECRET（注册应用程序时在 Cloud Console 中提供）来处理该请求，REDIRECT_URI，和GRANT_TYPE（字符串authorization_code）。

   对该请求的 JSON 响应将包含一个名为id_token. 这id_token是一个 JWT，其中包括用户在该sub字段中经过验证的电子邮件地址。

   然后，您可以使用该用户信息建立自己的会话，并为其设置第一方 cookie。您可以使用 Google 身份验证库或第三方库验证和解析该 JWT。

4. 回应的REDIRECT_URI与设置您的会话cookie，向用户发送到您的应用程序的适当部分重定向响应。

这非常冗长，但我在我创建的示例应用程序中执行了上述操作，并且它为此工作。我希望它可以适应您的需求。