如何通过JavaScript实现Google Identity自定义登录功能

解决方案 #

你之前使用的gapi.auth2属于已弃用的旧版Google Sign-In库，新版Google Identity Services（GIS）完全支持「自定义按钮样式+手动触发常规登录流程」的需求，具体实现方式如下：

1. 先引入GIS客户端库

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

2. 初始化OAuth令牌客户端，给自定义按钮绑定点击事件触发登录

// 初始化登录客户端，按需替换配置参数
const googleLoginClient = google.accounts.oauth2.initTokenClient({
  client_id: '你申请的Google OAuth客户端ID',
  scope: 'openid email profile', // 可根据业务需求扩展权限范围
  callback: (res) => {
    if (res.error) {
      // 处理登录失败/用户取消逻辑
      return
    }
    // 登录成功，res.access_token为返回的访问令牌，后续按需调用接口获取用户信息即可
  }
})

// 绑定自定义按钮的点击事件
document.querySelector('#your-custom-google-login-btn').addEventListener('click', () => {
  googleLoginClient.requestAccessToken()
})

常见疑问说明 #

• 你之前调用google.accounts.id.prompt()返回opt_out_or_no_session属于正常情况，该API本身是为一键登录/自动登录场景设计的，不适用常规点击登录的需求，不需要在该方案中使用。
• 自定义按钮只要符合Google公开的品牌使用规范即可，官方没有强制要求必须使用默认渲染的按钮样式，你可以自由调整按钮的尺寸、风格和站点其他UI保持统一。
• 旧版gapi.auth2相关接口目前还可临时运行，但已停止维护且随时可能下线，建议尽快迁移到新版GIS方案。

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