如何通过最新Google Identity JS库实现OpenID Connect Authorization Code Flow？

我刚解决了类似的困惑，给你梳理下新版库的正确实现方式——其实它只是换了更贴合标准OIDC的玩法，并没有砍掉Authorization Code Flow的支持。

核心变化与解决方案 #

旧版的grantOfflineAccess()确实被移除了，但新版用google.accounts.oauth2.initCodeClient()专门适配了服务器端认证场景，完全可以实现等效的授权码流程，核心是明确指定response_type: 'code'和access_type: 'offline'参数。

分步实现指南 #

• 初始化授权码客户端：替代旧的gapi.auth2.init()，用initCodeClient创建专门用于获取授权码的客户端实例，配置好关键参数。
• 触发授权流程：绑定到登录按钮点击事件，调用requestCode()触发用户授权，授权成功后会通过回调或重定向返回授权码。
• 后端交换令牌：把前端拿到的授权码传到后端，用客户端密钥和授权码向Google服务器交换ID Token、Access Token和Refresh Token（这一步是Authorization Code Flow安全性的核心，密钥只在后端保存）。

示例代码 #

// 初始化授权码客户端
const authClient = google.accounts.oauth2.initCodeClient({
  client_id: '你的客户端ID',
  scope: 'openid email profile', // OIDC基础权限，按需添加其他业务scope
  redirect_uri: '你的后端重定向URI', // 必须和Google控制台配置的一致
  access_type: 'offline', // 关键：获取离线访问权限，用于后续刷新令牌
  response_type: 'code', // 指定返回授权码，而非直接返回令牌
  callback: (response) => {
    // 弹窗模式下，授权码会在这里返回；跳转模式下会在重定向URI的URL参数中
    if (response.code) {
      // 将授权码发送到后端处理
      fetch('/你的后端令牌交换接口', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ authCode: response.code })
      });
    }
  }
});

// 绑定登录按钮点击事件
document.getElementById('google-login-btn').addEventListener('click', () => {
  authClient.requestCode();
});

关于ID Token的澄清 #

你提到的ID Token是用户身份的凭证，但它不能替代授权码：

• ID Token是给前端/客户端用来快速验证用户身份的，属于OIDC流程里的身份断言。
• 授权码是后端用来交换长效令牌（尤其是Refresh Token）的密钥，这也是Authorization Code Flow比Implicit Flow更安全的原因——授权码不会直接暴露给前端，全程由后端和Google服务器交互。

额外注意事项 #

• 务必在Google Cloud控制台的OAuth 2.0客户端配置中，添加你的重定向URI，否则会报错。
• 如果使用弹窗模式，要确保页面没有被浏览器的弹窗拦截器阻止。
• 后端交换授权码时，必须带上客户端密钥（这一步绝对不能在前端做，否则密钥泄露会导致安全风险）。

内容的提问来源于stack exchange，提问作者Angelo C.