如何将Google OAuth的access_token或code兑换为含用户信息的ID token？

核心方案 #

react-oauth的Google登录组件无需额外兑换操作，只要配置正确的参数，就能直接拿到包含完整用户信息的ID Token（即你需要的JWT）。

具体实现方式 #

1. 直接获取ID Token（Implicit Flow） #

使用GoogleLogin组件时，指定response_type="id_token"，并确保包含openid、profile、email这三个关键scope，即可在回调中直接拿到ID Token：

import { GoogleLogin } from '@react-oauth/google';

<GoogleLogin
  onSuccess={(credentialResponse) => {
    // 直接获取ID Token，和旧组件返回的JWT格式一致
    const idToken = credentialResponse.credential;
    // 后续传给后端解码，就能拿到头像、邮箱、姓名等信息
  }}
  onError={() => {
    console.log('登录失败');
  }}
  scope="openid profile email"
  response_type="id_token"
/>

如果需要同时获取Access Token，可将response_type设为"id_token token"。

2. 授权码模式（Authorization Code Flow）获取ID Token #

若使用flow="auth-code"模式，前端拿到code后，需要将其传给后端，由后端调用Google的令牌端点兑换ID Token：

// 后端伪代码示例
const exchangeCodeForTokens = async (code) => {
  const response = await fetch('https://oauth2.googleapis.com/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      code: code,
      client_id: '你的Google Client ID',
      client_secret: '你的Google Client Secret',
      redirect_uri: '与前端配置一致的回调地址',
      grant_type: 'authorization_code'
    })
  });
  const data = await response.json();
  // 此处的id_token即为所需的JWT
  const idToken = data.id_token;
  return idToken;
};

3. ID Token的处理 #

拿到ID Token后，后端的验证、解码流程和使用react-google-login时完全一致，直接用Google公钥验证签名后，即可解析出用户的头像、邮箱、姓名等完整信息。

关键注意点 #

• 必须包含openid scope，否则Google不会返回ID Token；
• 不要尝试用Access Token兑换ID Token，二者功能不同：Access Token用于调用Google API，ID Token用于身份验证，正确配置参数即可直接获取；
• 授权码模式下，后端的redirect_uri必须和前端配置的完全一致，否则会兑换失败。

内容的提问来源于stack exchange，提问作者Paymahn Moghadasian