如何正确验证Google Access Token？基于React OAuth Google自定义按钮

你提到的风险确实存在——直接用access token调用userinfo只能拿到用户信息，但没法确认这个token是发给你的应用的。下面是两种靠谱的验证方式：

方法一：用Google Tokeninfo接口验证Token归属 #

拿到前端传过来的access token后，后端调用https://oauth2.googleapis.com/tokeninfo?access_token=YOUR_ACCESS_TOKEN，接口会返回包含aud（受众）字段的结果，比如：

{
  "azp": "your-client-id.apps.googleusercontent.com",
  "aud": "your-client-id.apps.googleusercontent.com",
  "sub": "102592121061571384",
  "email": "someemail@gmail.com",
  "exp": "1699999999",
  // 其他字段...
}

只要验证aud字段和你的Google OAuth客户端ID完全一致，就能确认这个token是发给你的应用的，不是其他应用的token被冒用。

方法二：让自定义按钮直接返回ID Token（JWT） #

其实自定义按钮也能拿到和默认GoogleLogin按钮一样的ID Token，只需要在配置里做调整：

1. 确保请求的scope包含openid（必须，因为ID Token属于OpenID Connect范围），比如scope: 'openid email profile'
2. 在调用useGoogleLogin时，指定responseType: 'id_token'或者responseType: 'id_token token'（如果同时需要access token）

示例代码：

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

const LoginButton = () => {
  const login = useGoogleLogin({
    onSuccess: (response) => {
      // 这里就能拿到id_token了
      console.log(response.id_token);
      // 把id_token传给后端
    },
    scope: 'openid email profile',
    responseType: 'id_token',
    clientId: 'your-client-id.apps.googleusercontent.com',
  });

  return <button onClick={login}>自定义登录按钮</button>;
};

后端拿到ID Token后，就可以像验证默认按钮返回的JWT一样：

• 验证签名（可以用Google提供的公钥自动验证，不用自己维护）
• 验证aud字段匹配你的客户端ID
• 验证exp字段确保token未过期

这两种方法都能解决你的问题，推荐方法二，因为ID Token本身包含了用户信息和验证所需的字段，不需要额外调用userinfo接口，效率更高。

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