如何设置Google OAuth客户端以在客户端与服务器间拆分授权和令牌交换流程？

兄弟，我太懂你这种前后端分离用Google OAuth的迷茫了——尤其是想用Authorization Code模式，前端拿授权码、后端换令牌的拆分流程，我之前踩过好几个坑，给你把关键步骤和坑点捋明白：

一、Google Cloud OAuth客户端配置（核心！） #

你提到“是不是要设置两个独立的OAuth客户端？”——其实完全不需要！只需要创建一个Web应用类型的OAuth客户端就够，但配置一定要精准：

• 授权重定向URI：这是最容易出错的地方，要加你的前端域名（比如开发环境的http://localhost:3000，生产环境的正式域名），而且要精确到你处理授权回调的页面（比如http://localhost:3000/auth/google-callback）。后端交换令牌不需要额外的重定向URI，因为是服务器直接调用Google的令牌接口，不存在前端回调的情况。
• 客户端ID和密钥的分工：创建客户端后会拿到两个关键值：
  • 客户端ID：可以安全地暴露给前端，用来发起授权请求；
  • 客户端密钥：绝对不能传给前端！要存在后端的环境变量里（比如Rails的credentials.yml.enc或者.env文件），只在后端交换令牌时使用。
• 启用目标API：别忘了在Google Cloud控制台的「API和服务」里启用Google Business Profile API，不然就算拿到令牌也调用不了业务接口，这个细节很容易被忽略！

二、前端（React）获取授权码的正确姿势 #

用Google Identity Services的前端工具链就行，推荐用@react-oauth/google这个npm包（比直接写脚本更符合React生态）：

• 配置授权请求时，必须指定response_type: 'code'（明确要授权码而不是直接拿令牌），还要带上：
  • 你的客户端ID；
  • 所需的权限范围（比如https://www.googleapis.com/auth/business.manage，根据你要调用的API权限来）；
  • redirect_uri（和你在Google Cloud里配置的前端回调URI完全一致）；
  • state参数：生成一个随机字符串，用来防止CSRF攻击，前端要把这个字符串存起来，等回调时验证一致性。
• 用户授权后，Google会把code（授权码）和state参数返回到前端页面，先验证state和之前存的一致，然后立刻把code传给你的Rails后端——授权码只有10分钟有效期，别存着！

三、后端（Rails）交换令牌的步骤 #

用Google官方的Ruby SDK google-auth-library-ruby 会比自己写POST请求更省心：

• 调用令牌交换接口时，参数必须包含：
  • code：前端传过来的授权码；
  • client_id和client_secret：你的客户端ID和密钥；
  • redirect_uri：必须和前端请求时的redirect_uri完全相同！这是很多人踩坑的核心点，差一个字符都不行；
  • grant_type: 'authorization_code'（明确是用授权码换令牌）。
• 成功拿到access_token和refresh_token后，把它们关联到对应的用户存到数据库里：refresh_token只有第一次授权或者用户重新授权时才会返回，一定要好好保存，用来刷新过期的access_token（access_token一般1小时过期）。

四、常见坑点避坑指南 #

• CORS问题：前端请求Google授权接口不会有CORS限制，后端交换令牌是服务器端请求，也不会触发CORS，所以不用额外配置跨域，别瞎折腾！
• 权限不足：如果调用Google Business Profile API时提示权限不够，先检查scope是否正确，再确认用户授权时是否同意了对应的权限。
• 生产环境适配：上线前要把生产环境的前端域名加到Google Cloud的授权重定向URI里，最好单独创建一个生产环境的OAuth客户端（或者同一个客户端添加多个重定向URI），避免开发和生产配置混在一起。

备注：内容来源于stack exchange，提问作者EthanML