OAuth2.0

OAuth2.0授权有四种模式，常用的两种为authorization_code和implicit模式。前后端分离架构下如何完成授权，请参见文章前后端分离：spring security OAuth2.0第三方授权.

Google平台库变更

Warning: The Google Sign-In JavaScript platform library for Web is deprecated, and unavailable for download after March 31, 2023. The solutions in this guide are based on this library and therefore also deprecated.
Use instead the new Google Identity Services for Web solution to quickly and easily sign users into your app using their Google accounts.
By default, new client IDs are now blocked from using the older platform library; existing client IDs are unaffected. New client IDs created before July 29th, 2022 may set the plugin_name to enable use of the legacy Google platform library.

参见Migrating from Google Sign-In

React集成谷歌第三方登录

我在变更之前用的js库是 react-google-login，现在创建的clientID已经用不了了。
这里推荐使用另一个js库 @react-oauth/google。具体使用参见@react-oauth/google
除此之外，还需要安装jwt的库，因为google返回的是jwt，可使用js库jwt-decode

在 @react-oauth/google库中有三种方式通过google登录：

1. authorization_code模式，Google会返回前端一个code，这个code需要传回应用后端，让后端去google授权服务器获取access_token，后端再拿着access_token去google资源服务器拿数据
2. implicit模式 ，省区code，Google直接将access_token返回给前端，然后前端把access_token传回后端，后端再拿着access_token去google资源服务器拿数据
3. 直接登录。在浏览器点击允许谷歌授权后 谷歌会直接把数据返回给前端，code和access_token全部省略了。

另外，谷歌的登录方式有三种配置：

• Google Account sign-in 输入密码
• Consent and sign-in with One Tap 一键登录(谷歌浏览器必须已经登录)
• Automatic sign-in 自动登录(谷歌浏览器必须已经登录)

具体可参考 Sign in with Google for Web / Overview

实例

react-share-me