Angular使用window.location.href跳转后如何处理OpenId登录回调响应

问题本质 #

你当前的核心问题是Steam授权成功后，后端ExternalCallback接口直接返回了JSON响应，而非跳转回Angular应用，导致浏览器跳转后仅展示纯JSON内容，无法执行前端JS逻辑处理登录数据。

方案1：后端重定向回前端+哈希传参（最简实现，无页面跳转割裂感） #

步骤1：修改后端ExternalCallback成功逻辑 #

不要直接返回JSON，将登录凭证编码后通过哈希片段拼接在回跳地址上（哈希片段仅存在于浏览器端，不会发送到服务器，安全性高于查询参数）：

[HttpGet]
[AllowAnonymous]
[Route("Steam", Name = "ExternalCallback")]
public async Task<IActionResult> ExternalCallback(string error = null, string returnUrl = "", string userId = null)
{
    if (error != null)
    {
        return Redirect(returnUrl + "/unauthorized");
    }

    var loginResults = await ...sign in duties...;
    var (result, data) = loginResults;
    
    if (result == AppSignInResult.Success)
    {
        // 构造登录参数
        var authParams = new Dictionary<string, string>
        {
            {"accessToken", data.Token.AccessToken},
            {"tokenType", data.Token.TokenType},
            {"expiresIn", data.Token.GetRemainingLifetimeSeconds().ToString()},
            {"username", data.Username},
            {"email", data.Email},
            {"isExternalLogin", data.IsExternalLogin.ToString()},
            {"externalProvider", data.ExternalAuthenticationProvider}
        };
        // 拼接为哈希片段
        var hashFragment = string.Join("&", authParams.Select(kv => 
            $"{Uri.EscapeDataString(kv.Key)}={Uri.EscapeDataString(kv.Value)}"));
        // 重定向回前端地址
        return Redirect($"{returnUrl}#{hashFragment}");
    }

    throw new InvalidEnumArgumentException($"Unknown sign-in result '{result}'.");
}

步骤2：Angular端新增回调参数解析逻辑 #

在应用初始化阶段（比如AppComponent的ngOnInit钩子）检测地址栏哈希片段，解析参数存入本地存储后清理哈希：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    this.handleExternalAuthCallback();
  }

  private handleExternalAuthCallback(): void {
    // 提取并去除哈希前缀#
    const hash = window.location.hash.slice(1);
    if (!hash) return;

    const authParams = new URLSearchParams(hash);
    const accessToken = authParams.get('accessToken');
    if (accessToken) {
      // 存入本地存储
      localStorage.setItem('access_token', accessToken);
      localStorage.setItem('token_type', authParams.get('tokenType') || 'Bearer');
      localStorage.setItem('expires_in', authParams.get('expiresIn') || '3600');
      localStorage.setItem('username', authParams.get('username') || '');
      localStorage.setItem('email', authParams.get('email') || '');

      // 清理地址栏哈希，避免凭证泄露
      window.location.hash = '';
      // 跳转到登录后首页
      this.router.navigate(['/dashboard']);
    }
  }

  // 原有登录方法仅需补充returnUrl编码即可
  public loginExternal() {
    window.location.href = `https://localhost:5001/v1/account/ExternalLogin?provider=Steam&returnUrl=${encodeURIComponent(window.location.href)}`;
  }
}

方案2：弹窗授权（体验更佳，主页面无跳转） #

如果不希望主页面发生跳转，可以改用弹窗完成授权流程：

1. 点击登录按钮弹出小窗口加载Steam授权页
2. 授权成功后后端跳转到前端专门的回调路由
3. 回调页面拿到参数后通过postMessage将登录数据发送给主窗口
4. 主窗口收到数据后关闭弹窗，完成登录逻辑

注意事项 #

• 回跳的returnUrl必须用encodeURIComponent编码，避免原地址携带特殊字符导致拼接错误
• 生产环境建议进一步优化：后端仅返回一次性授权Code，前端拿到Code后再调用接口兑换令牌，进一步降低凭证泄露风险

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