如何用Google Identity Services替代gapi.auth2.authorize手动获取id_token？

完全可以实现自定义按钮点击触发谷歌登录弹窗并获取ID Token的需求，下面是具体的实现方法：

核心思路 #

通过google.accounts.oauth2.requestAccessToken方法，结合OpenID Connect的openid scope，即可在弹出登录窗口后获取ID Token。该方法支持自定义触发时机（比如绑定到你自己的按钮点击事件），且返回结果中包含ID Token（当scope包含openid时）。

实现代码 #

1. 加载Google Identity Services脚本 #

在页面中引入GIS脚本：

<script src="https://accounts.google.com/gsi/client" async defer></script>

2. 自定义登录按钮与逻辑 #

<button id="custom-google-login">点击用谷歌登录</button>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const loginBtn = document.getElementById('custom-google-login');
  
  loginBtn.addEventListener('click', () => {
    google.accounts.oauth2.requestAccessToken({
      client_id: '你的Google客户端ID',
      scope: 'openid email profile', // 必须包含openid才能获取ID Token
      ux_mode: 'popup', // 弹出登录窗口，而非跳转页面
      callback: (response) => {
        if (response.error) {
          console.error('登录失败:', response.error);
          return;
        }
        
        // 获取ID Token并发送至后端
        console.log('获取到的ID Token:', response.id_token);
        fetch('/你的后端认证接口', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id_token: response.id_token })
        })
        .then(res => res.json())
        .then(data => {
          // 处理后端返回的认证结果
          console.log('后端认证完成:', data);
        })
        .catch(err => console.error('请求后端失败:', err));
      }
    });
  });
});
</script>

关键说明 #

• scope必须包含openid：只有当scope中包含openid时，Google才会返回ID Token，email和profile是可选的，用于获取用户基本信息。
• ux_mode设置为popup：确保登录流程在弹窗中完成，和你之前使用gapi.auth2.authorize的行为一致，避免页面跳转。
• 自定义按钮完全可控：你可以完全自定义按钮的HTML结构、样式和位置，只需在点击事件中调用requestAccessToken方法即可触发登录弹窗。

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