如何在网站接入Google登录后显示用户姓名及头像

很简单！你只需要实现onSignIn回调函数，从Google返回的用户对象中提取姓名和头像数据，然后把它们渲染到页面的profileinfo容器里就行。我给你修改好完整代码，还加了点实用细节：

<html>
<head>
  <script src="https://apis.google.com/js/platform.js" async defer></script>
  <!-- 记得把这里的-PLACEHOLDER-替换成你自己的Google Client ID -->
  <meta name="google-signin-client_id" content="-PLACEHOLDER-">
  <style>
    /* 给头像加个圆角，让样式更美观 */
    #user-avatar {
      border-radius: 50%;
      width: 80px;
      height: 80px;
      object-fit: cover;
    }
    #profileinfo {
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <!-- 原有的登录按钮 -->
  <div class="g-signin2" data-onsuccess="onSignIn"></div>
  <!-- 用户信息展示容器 -->
  <div id="profileinfo"></div>
  <!-- 可选：添加登出按钮，方便用户退出登录 -->
  <button onclick="signOut()" style="margin-top:15px; padding:8px 16px;">登出</button>

  <script>
    // 登录成功后的回调函数
    function onSignIn(googleUser) {
      // 获取用户的基础信息对象
      const userProfile = googleUser.getBasicProfile();
      
      // 提取需要的信息
      const userName = userProfile.getName(); // 用户姓名
      // 可以通过在URL后加?sz=xxx来调整头像大小，比如这里改成80px
      const userAvatarUrl = userProfile.getImageUrl() + '?sz=80';

      // 获取页面上的信息容器，插入用户信息
      const profileContainer = document.getElementById('profileinfo');
      profileContainer.innerHTML = `
        <img id="user-avatar" src="${userAvatarUrl}" alt="${userName}的头像">
        <div>
          <h4>欢迎回来！</h4>
          <p>${userName}</p>
        </div>
      `;
    }

    // 可选：登出功能实现
    function signOut() {
      // 获取Google认证实例
      const authInstance = gapi.auth2.getAuthInstance();
      authInstance.signOut().then(() => {
        // 登出成功后清空用户信息容器
        document.getElementById('profileinfo').innerHTML = '';
        console.log('用户已成功登出');
      });
    }
  </script>
</body>
</html>

关键部分说明： #

• onSignIn回调：这是Google登录按钮data-onsuccess指定的函数，登录成功后会自动触发，参数googleUser包含了用户的所有认证信息。
• 提取用户数据：userProfile.getName()获取用户的显示姓名，userProfile.getImageUrl()获取头像的默认链接，你可以通过在URL末尾追加?sz=xxx自定义头像尺寸（比如?sz=100就是100px的正方形头像）。
• 渲染到页面：用innerHTML把头像和姓名拼接成HTML插入到profileinfo容器里，也可以用document.createElement()的方式创建元素再添加，两种方式都可行。
• 登出功能：额外加了登出按钮，调用Google的signOut()方法完成登出，同时清空页面上的用户信息，提升用户体验。

别忘了把代码里的-PLACEHOLDER-替换成你在Google开发者控制台创建的Client ID，否则登录功能无法正常工作。

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