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

Question

我一直在遵循非常简单的说明 here (“将 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)尝试登录按钮时，它会闪烁一个窗口，但没有任何 react 。
在故障排除下的文档中，它说“如果您的许多用户都启用了此功能......另一种解决方法是实现服务器端 OAuth 2.0 流程。”
好的。那么它们所说的服务器端 OAuth 2.0 流是什么意思呢？
(FWIW 我的应用程序是 React 单页应用程序)。

Answer 1

一般信息位于 https://developers.google.com/identity/protocols/oauth2/web-server .这是一种方法:

您的应用程序为您的用户提供了一个登录链接。此链接转到 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 - 防止重放攻击

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

您的应用程序处理对该 REDIRECT_URI 的请求通过向 Google OAuth token 服务发出服务器端 POST 请求 https://oath2.googleapis.com/token ，通过 CODE , CLIENT_ID , CLIENT_SECRET (注册应用程序时在 Cloud Console 中提供)，REDIRECT_URI , 和 GRANT_TYPE (字符串 authorization_code )。
对该请求的 JSON 响应将包含一个名为 id_token 的字段。 .那个id_token是一个 JWT，其中包括 sub 中用户的已验证电子邮件地址等。 field 。
然后，您可以使用该用户信息建立自己的 session ，并为其设置第一方 cookie。您可以使用 Google 身份验证库或第三方库验证和解析该 JWT。

回复 REDIRECT_URI使用设置 session cookie 的重定向响应，将用户发送到应用程序的适当部分。

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