前端Google登录获ID Token对接Spring-Social时遇401无效凭证错误求助

你的问题核心很明确：前端Google Sign-In默认返回的是id_token（用于身份验证），但Spring Social Google需要的是OAuth2 access_token（用于授权调用Google API），这就是为什么调用userinfo接口返回401的原因。下面是具体的解决步骤：

1. 调整前端Google Sign-In配置，请求access_token #

默认情况下，Google Sign-In JS API只请求id_token，你需要显式配置权限范围和授权类型，让它返回access_token：

方式一：通过HTML标签配置 #

如果用的是<div class="g-signin2">标签，添加data-scope和data-access_type属性：

<div class="g-signin2" 
     data-onsuccess="onSignIn" 
     data-scope="profile email" 
     data-access_type="online"></div>

方式二：通过JS初始化配置 #

如果是手动初始化Auth2客户端，在gapi.auth2.init里指定scope：

gapi.load('auth2', function() {
  const auth2 = gapi.auth2.init({
    client_id: '你的Google Client ID',
    scope: 'profile email', // 权限范围可根据需调用的API调整
    access_type: 'online' // 在线模式，无需刷新令牌时使用
  });
});

这里的scope需要包含后续调用Google API所需的权限，比如访问用户基本信息用profile email就足够了。

2. 前端正确获取access_token并传给后端 #

配置完成后，googleUser.getAuthResponse().access_token就不会返回undefined了。修改你的onSignIn函数，把access_token（而非id_token）传给后端：

function onSignIn(googleUser) {
  const profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId());
  console.log('Name: ' + profile.getName());
  console.log('Email: ' + profile.getEmail());
  
  // 现在能拿到正确的access_token了
  const access_token = googleUser.getAuthResponse().access_token;
  
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://localhost/signin/google');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onload = function() {
    console.log('Signed in as: ' + xhr.responseText);
    console.log('access_token=' + access_token);
  };
  // 发送access_token而不是id_token
  xhr.send('access_token=' + access_token);
}

3. 后端代码无需修改 #

你现有的后端代码是正确的，Spring Social Google会用传入的access_token去调用Google的userinfo接口，现在token类型正确了，就不会返回401了：

AccessGrant accessGrant = new AccessGrant(accessToken); 
connection = ((OAuth2ConnectionFactory<?>) connectionFactory).createConnection(accessGrant);

补充说明 #

• 为什么Google文档里用id_token？那篇文档的场景是后端验证用户身份（确认用户确实是Google认证过的），而不是调用Google API。Spring Social的定位是建立社交连接并调用API，所以需要的是access_token。
• 验证token有效性：拿到access_token后，可以用工具（比如Postman）调用https://www.googleapis.com/oauth2/v2/userinfo，请求头带上Authorization: Bearer {你的access_token}，如果能返回用户信息，说明token是有效的。
• 检查配置坑：确保Google Cloud Console里的OAuth2客户端配置正确，前端的域名已经添加到授权JavaScript来源列表里，否则可能出现拿不到access_token的情况。

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