React SPA对接MVC后端OAuth2登录如何跨窗口传递token并关联会话

解决方案 #

针对你当前的弹窗OAuth登录场景，最通用稳定的实现方式是通过window.postMessage完成跨窗口通信，配合后端调整回调逻辑即可实现token传递，具体改造步骤如下：

1. 调整后端登录回调逻辑 #

原有逻辑中登录成功后会跳转到MVC首页，你需要新增一个专门的中转回调页，用来发送token到SPA父窗口后自动关闭。
首先修改认证控制器的跳转地址：

[HttpPost("~/signin")]
public async Task<IActionResult> SignIn([FromForm] string provider)
{
    if (string.IsNullOrWhiteSpace(provider)) return BadRequest();
    if (!await HttpContext.IsProviderSupportedAsync(provider)) return BadRequest();
    // 把跳转地址改成中转回调页
    return Challenge(new AuthenticationProperties { RedirectUri = "/AuthCallback" }, provider);
}

新增回调控制器获取token：

public class AuthCallbackController : Controller
{
    public async Task<IActionResult> Index()
    {
        ViewBag.AccessToken = await HttpContext.GetTokenAsync("GitHub", "access_token");
        ViewBag.RefreshToken = await HttpContext.GetTokenAsync("GitHub", "refresh_token");
        // 填你SPA的正式域名，用来限制消息接收方避免安全问题
        ViewBag.SpaOrigin = "https://你的SPA域名.com";
        return View();
    }
}

新增中转页视图AuthCallback/Index.cshtml：

<!DOCTYPE html>
<html>
<body>
<script>
// 发送登录成功消息到父窗口
window.opener.postMessage({
  type: 'LOGIN_SUCCESS',
  accessToken: '@ViewBag.AccessToken',
  refreshToken: '@ViewBag.RefreshToken'
}, '@ViewBag.SpaOrigin');
// 发送完成自动关闭当前弹窗
window.close();
</script>
<p>登录成功，正在关闭窗口...</p>
</body>
</html>

2. React SPA侧监听登录消息 #

在你调用window.open打开登录弹窗的代码位置，新增消息监听器接收后端发过来的token：

// 打开登录弹窗
const loginWindow = window.open('https://你的MVC后端域名/signin', 'oauthLogin', 'width=600,height=700');

// 监听跨窗口消息
const handleLoginMessage = (event) => {
  // 安全校验：只接收来自你后端域名的消息
  if (event.origin !== 'https://你的MVC后端域名') return;
  if (event.data?.type === 'LOGIN_SUCCESS') {
    const { accessToken, refreshToken } = event.data;
    // 此处处理你的登录逻辑：存token到本地存储、更新全局登录状态等
    console.log('登录成功', accessToken);
    // 移除监听器避免内存泄漏
    window.removeEventListener('message', handleLoginMessage);
  }
};
window.addEventListener('message', handleLoginMessage);

// 可选兜底逻辑：判断用户手动关闭弹窗时清除监听器
const checkWindowClose = setInterval(() => {
  if (loginWindow.closed) {
    clearInterval(checkWindowClose);
    window.removeEventListener('message', handleLoginMessage);
  }
}, 1000);

3. 修复现有配置问题 #

• 你当前CORS配置重复写了两次AllowAnyOrigin()，生产环境不要开全域名允许，改成仅放开你的SPA域名：

services.AddCors(opt =>
{
    opt.AddPolicy(name: policyName, builder =>
    {
        builder.WithOrigins("https://你的SPA域名.com")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();
    });
});

• Cookie配置添加SameSite规则适配浏览器跨域限制：

.AddCookie(options =>
{
    options.LoginPath = "/signin";
    options.LogoutPath = "/signout";
    options.Cookie.SameSite = SameSiteMode.None;
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always; // 生产环境必须开启HTTPS
});

• 你提到的CSP配置可以按需添加规则，允许你的SPA域名和第三方登录提供商域名即可。

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