登录后如何通过Google Identity Services获取新的access token

我目前使用google.accounts.oauth2.initTokenClient，随后调用tokenClient.requestAccessToken()来提示用户选择账户。接着，我从TokenResponse中获取access_token，并将该参数发送到服务器完成登录。

我的问题在于google.accounts.oauth2.revoke()现在需要传入有效的access token作为参数。但access token会在一小时后过期，有没有办法无需让用户再次通过requestAccessToken()的交互流程就能获取新的access token？

当前代码 #

_googleClient = google.accounts.oauth2.initTokenClient({
  client_id: _clientid,
  scope: 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email',
  callback: function (tokenResponse) {
    _accessToken = tokenResponse.access_token; additionalOptions);
  },
  error_callback: function (err) {
    console.log('err:', err)
  }
});
_googleClient.requestAccessToken(); 

核心原因 #

你当前使用的initTokenClient属于客户端侧的隐式授权流程，这个流程不会返回refresh_token——而只有refresh_token才能实现无交互刷新access_token。要解决问题，必须切换到授权码流程（带PKCE），这是Google推荐的安全流程，能获取到可长期使用的refresh_token。

具体实现步骤 #

1. 前端切换到initCodeClient获取授权码 #

替换initTokenClient为initCodeClient，它会返回授权码而非直接返回access_token。你需要把授权码发送到后端，由后端去交换正式的token（包括refresh_token）。

const codeClient = google.accounts.oauth2.initCodeClient({
  client_id: _clientid,
  scope: 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email',
  redirect_uri: '你的前端回调地址', // 必须与Google控制台配置的一致
  callback: async (response) => {
    // 将授权码传给后端
    const res = await fetch('/api/google-login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ code: response.code })
    });
    const data = await res.json();
    // 保存后端返回的token到本地
    localStorage.setItem('google_access_token', data.access_token);
    localStorage.setItem('google_refresh_token', data.refresh_token);
  },
  error_callback: (err) => {
    console.log('授权错误:', err);
  }
});

// 触发授权流程
codeClient.requestCode();

2. 后端处理授权码，交换Token #

后端收到授权码后，调用Google的token端点获取access_token和refresh_token。以下是Node.js示例：

const axios = require('axios');

app.post('/api/google-login', async (req, res) => {
  const { code } = req.body;
  try {
    const tokenRes = await axios.post('https://oauth2.googleapis.com/token', {
      client_id: '你的客户端ID',
      client_secret: '你的客户端密钥', // 后端安全存储，绝不能暴露到前端
      code,
      redirect_uri: '你的前端回调地址',
      grant_type: 'authorization_code'
    });

    res.json({
      access_token: tokenRes.data.access_token,
      refresh_token: tokenRes.data.refresh_token,
      expires_in: tokenRes.data.expires_in
    });
  } catch (err) {
    res.status(400).json({ error: err.response?.data || '授权码交换失败' });
  }
});

3. 静默刷新Access Token #

当access_token过期时，前端将refresh_token传给后端，由后端调用Google接口刷新token，全程无需用户交互。

后端刷新接口

app.post('/api/google-refresh', async (req, res) => {
  const { refresh_token } = req.body;
  try {
    const tokenRes = await axios.post('https://oauth2.googleapis.com/token', {
      client_id: '你的客户端ID',
      client_secret: '你的客户端密钥',
      refresh_token,
      grant_type: 'refresh_token'
    });

    res.json({
      access_token: tokenRes.data.access_token,
      expires_in: tokenRes.data.expires_in
    });
  } catch (err) {
    // 如果refresh_token失效，需要引导用户重新授权
    res.status(401).json({ error: 'Refresh Token无效，请重新登录' });
  }
});

前端刷新逻辑

async function refreshGoogleToken() {
  const refreshToken = localStorage.getItem('google_refresh_token');
  if (!refreshToken) return null;

  try {
    const res = await fetch('/api/google-refresh', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ refresh_token: refreshToken })
    });
    const data = await res.json();
    localStorage.setItem('google_access_token', data.access_token);
    return data.access_token;
  } catch (err) {
    console.error('Token刷新失败:', err);
    return null;
  }
}

4. 优化Token使用逻辑 #

可以在每次调用需要access_token的接口前，检查token是否即将过期（比如提前5分钟），如果是则先调用刷新接口获取新token，再发起业务请求。

注意事项 #

• refresh_token存储：前端可存在localStorage，但更安全的方式是后端存储refresh_token，前端仅保留会话标识，刷新操作由后端完成。
• Google控制台配置：确保客户端ID已正确配置回调地址，且启用了授权码流程。
• 权限变更：如果后续增加权限范围，用户需要重新授权才能获取包含新权限的refresh_token。

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