微服务架构下Sign in with Google按钮弹窗跳转异常问题

你的核心问题是当前用了ux_mode: "redirect"加上自定义的click_listener直接跳转，导致整页刷新。要实现弹窗内完成整个登录流程，需要调整Google GSI的配置，同时配合后端接口的返回逻辑，具体步骤如下：

1. 前端代码的关键修改 #

首先，你需要把Google GSI的初始化模式从redirect改成popup，并且移除自定义的点击跳转逻辑——因为GSI的popup模式已经会自动处理弹窗跳转，不需要手动写window.location.replace。

修改后的前端代码：

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <script>
        window.onload = function () {
          google.accounts.id.initialize({
            client_id: "...", // 替换成你的Google Client ID
            login_uri: "https://localhost:1234/signin",
            ux_mode: "popup", // 核心：切换为弹窗模式
          });
          
          // 渲染按钮，移除自定义click_listener
          google.accounts.id.renderButton(
            document.getElementById("buttonDiv"),
            { theme: "outline", size: "large" }
          );
          
          // 监听弹窗发送的登录成功消息，用于后续更新原页面
          window.addEventListener('message', (event) => {
            // 验证消息来源，避免安全问题
            if (event.origin !== "https://localhost:1234") return;
            
            if (event.data.type === 'GOOGLE_LOGIN_SUCCESS') {
              // 登录成功后的操作：比如刷新页面或更新用户UI
              window.location.reload();
              // 或者这里可以调用你的接口获取用户信息，更新页面状态
            }
          });
          
          google.accounts.id.prompt();
        }
    </script>
    <div id="buttonDiv"></div> 
  </body>
</html>

2. 后端callback接口的调整 #

当Google回调你的POST callback接口，完成用户登录/创建本地用户后，不要直接重定向回原页面——因为这会在弹窗里触发跳转，无法通知原页面。你需要返回一段HTML+JS代码，用来关闭弹窗并告知原页面登录成功。

示例的callback接口返回内容：

<!DOCTYPE html>
<html>
<body>
<script>
// 向原页面发送登录成功的消息
window.opener.postMessage(
  { type: 'GOOGLE_LOGIN_SUCCESS' },
  window.opener.origin // 确保只发送给原页面域名，提升安全性
);
// 关闭弹窗
window.close();
</script>
</body>
</html>

修改后的完整流程 #

1. 用户点击Login with Google按钮，自动弹出新窗口（不会刷新原页面）。
2. 弹窗内跳转到你的https://localhost:1234/signin接口，接着重定向到Google登录页面。
3. 用户完成Google登录后，Google回调你的https://localhost:1234/callback接口，后端处理登录逻辑。
4. callback接口返回上述HTML代码，弹窗内的JS会向原页面发送成功消息，然后关闭弹窗。
5. 原页面监听收到消息后，刷新页面或更新用户状态，完成整个登录流程。

这样就完全避免了整页刷新，所有操作都在弹窗内完成，符合你的预期。

内容的提问来源于stack exchange，提问作者Dr. Strangelove