Web应用Google OAuth登录后无界面变化问题排查求助

你的核心问题是登录跳转回页面后，页面未更新状态，主要由以下几个代码问题导致：

1. HTML结构严重错误 #

代码里重复了</style>、</head>和<body>标签，这会导致浏览器解析DOM时出现混乱，后续JS无法正确获取目标元素。

2. 不存在的DOM元素导致JS报错 #

onSignIn函数里尝试设置user-image元素的src，但HTML中并没有这个元素，执行到这里会抛出错误，中断后续代码执行，导致登录按钮和用户信息都无法更新。

3. Auth2初始化与登录状态检测的冗余配置 #

对于g-signin2这种客户端登录按钮，不需要额外配置redirect_url参数；另外页面跳转后，需要确保auth2完全初始化后再检测登录状态。

修复后的完整代码 #

<html>
  <head>
    <script src="https://apis.google.com/js/platform.js"></script>
    <script>
      var auth2;
      var profile;

      function onSignIn(googleUser) {
        profile = googleUser.getBasicProfile();
        console.log('ID: ' + profile.getId()); // 不要把ID发送到后端！请使用ID Token替代
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail());
        
        // 更新页面状态
        document.getElementById("g-signin2").style.display = "none";
        document.getElementById("user-details").style.display = "block";
        document.getElementById("user-name").innerHTML = profile.getName();
        document.getElementById("user-email").innerHTML = profile.getEmail();
        // 如果需要显示头像，先在HTML里添加对应的img元素再取消注释
        // document.getElementById("user-image").src = profile.getImageUrl();
      }

      function signOut() {
        auth2.signOut().then(function () {
          console.log('用户已退出登录');
          // 恢复登录按钮状态
          document.getElementById("g-signin2").style.display = "block";
          document.getElementById("user-details").style.display = "none";
        });
      }

      gapi.load('auth2', function() {
        gapi.auth2.init({
          client_id: '你的Client ID',
          scope: 'profile email'
        }).then(function(auth) {
            auth2 = auth;
            // 监听登录状态变化，确保页面跳转后能触发更新
            auth2.isSignedIn.listen(function(isSignedIn) {
              if (isSignedIn) {
                onSignIn(auth2.currentUser.get());
              }
            });
            // 初始化时立即检查一次登录状态
            if (auth2.isSignedIn.get()) {
              onSignIn(auth2.currentUser.get());
            }
        });
      });
    </script>
    <style>
        .g-signin2 {
            width: auto;
            margin: 0;
        }
        #user-details {
            display: none;
        }
        /* 如果添加头像，可以使用这个样式 */
        #user-image {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    </style>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" id="g-signin2"></div>
    <div id="user-details">
        <!-- 如果需要显示头像，添加下面的img元素 -->
        <!-- <img id="user-image" alt="用户头像"> -->
        <p>姓名: <span id="user-name"></span></p>
        <p>邮箱: <span id="user-email"></span></p>
        <button onclick="signOut()">退出登录</button>
    </div>
  </body>
</html>

关键修复点说明 #

• 移除重复HTML标签，确保DOM结构正常解析
• 注释掉不存在的user-image相关代码（如需显示头像，取消注释并添加对应HTML元素）
• 删除冗余的redirect_url参数，g-signin2按钮会自动处理跳转逻辑
• 添加isSignedIn.listen监听登录状态，确保页面跳转后能触发状态更新
• 优化用户信息展示结构，提升页面可读性

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