如何在Google登录API库中检测用户访问网站时的已登录状态

由于旧版Google Sign-In SDK已被弃用，现在推荐使用**Google Identity Services (GIS)**来实现用户登录状态检测，以下是具体实现步骤：

1. 加载GIS客户端脚本 #

在页面中引入官方脚本：

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

2. 初始化GIS并配置客户端 #

替换YOUR_CLIENT_ID为你在Google Cloud Console中创建的OAuth 2.0客户端ID：

google.accounts.id.initialize({
  client_id: 'YOUR_CLIENT_ID',
  callback: handleCredentialResponse // 登录成功后的回调函数
});

3. 检测用户登录状态 #

静默检测（无弹窗） #

如果想在不打扰用户的前提下检测登录状态，使用prompt: 'none'参数：

google.accounts.id.prompt({ prompt: 'none' })
  .then((notification) => {
    switch (notification.getStatus()) {
      case 'displayed':
        // 若用户未登录，此处会显示登录弹窗（但由于prompt: 'none'，实际不会触发）
        break;
      case 'skipped':
        // 用户已登录Google，但未授权过你的应用，或之前拒绝过授权
        // 可以后续主动触发登录按钮引导用户授权
        break;
      case 'dismissed':
        // 用户已登录且授权过，凭据会自动通过callback返回
        break;
    }
  });

主动触发登录提示 #

如果希望直接显示账号选择弹窗（已登录用户会看到自己的账号列表），直接调用：

google.accounts.id.prompt();

4. 处理登录凭据 #

在回调函数中解析返回的JWT令牌，获取用户信息：

function handleCredentialResponse(response) {
  // 解析JWT令牌的payload部分
  const payload = JSON.parse(atob(response.credential.split('.')[1]));
  
  // 从payload中提取用户信息
  const userInfo = {
    id: payload.sub,
    name: payload.name,
    email: payload.email,
    avatar: payload.picture
  };
  
  // 此处可将用户信息存入会话或进行后续业务逻辑处理
  console.log('用户已登录:', userInfo);
}

关键注意事项 #

• 确保你的Google Cloud Console项目已正确配置OAuth同意屏幕，并添加了对应的授权范围（如openid、email、profile）
• JWT令牌仅用于客户端验证，若需服务器端验证，需将令牌发送到后端并调用Google的令牌验证接口

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