ASP.NET Core MVC与Angular4应用间身份验证令牌共享方案问询

结合你的场景（ASP.NET Core MVC + IdentityServer4 HybridAndClientCredentials流程对接ADFS，现在要承载多Angular应用并调用Web API），我分享几个经过实践验证的方案，核心思路是利用MVC已有的Cookie身份，把IdentityServer颁发的Access Token安全传递给Angular应用：

1. 先确保MVC客户端正确存储令牌 #

首先要保证MVC在Hybrid流程中能获取并保留Access Token——在Startup.cs配置OpenIdConnect时，一定要开启SaveTokens = true，这样IdentityServer返回的Access Token、ID Token会被存在AuthenticationProperties里，后续可以从HttpContext中读取：

services.AddAuthentication(options =>
{
    options.DefaultScheme = "Cookies";
    options.DefaultChallengeScheme = "oidc";
})
.AddCookie("Cookies")
.AddOpenIdConnect("oidc", options =>
{
    options.Authority = "https://your-identityserver-url";
    options.ClientId = "your-mvc-client-id";
    options.ClientSecret = "your-mvc-client-secret";
    options.ResponseType = "code id_token"; // Hybrid流程
    options.SaveTokens = true; // 关键：保存令牌到AuthenticationProperties
    options.Scope.Add("openid");
    options.Scope.Add("profile");
    options.Scope.Add("your-api-scope"); // 要调用的Web API的Scope
    // 其他ADFS相关配置...
});

2. 方案一：服务器端渲染时直接注入令牌到Angular #

这是最简单的方式，适合同域下的Angular应用。在承载Angular的MVC视图（比如.cshtml文件）中，通过服务器端代码读取当前用户的令牌，注入到全局window对象中，Angular启动时读取这个配置：

首先在视图中注入IHttpContextAccessor：

@inject IHttpContextAccessor HttpContextAccessor
@{
    var accessToken = await HttpContextAccessor.HttpContext.GetTokenAsync("access_token");
    var idToken = await HttpContextAccessor.HttpContext.GetTokenAsync("id_token");
}

<!-- Angular应用容器 -->
<app-root></app-root>

<!-- 注入令牌配置 -->
<script>
    window.angularAppConfig = {
        accessToken: '@Html.Raw(accessToken)',
        idToken: '@Html.Raw(idToken)',
        apiBaseUrl: 'https://your-web-api-url'
    };
</script>

然后在Angular中，创建一个AuthService来读取这个全局配置：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuthService {
    private accessToken: string | null = null;

    constructor() {
        // 从全局对象读取令牌
        const config = (window as any).angularAppConfig;
        if (config?.accessToken) {
            this.accessToken = config.accessToken;
        }
    }

    getAccessToken(): string | null {
        return this.accessToken;
    }
}

最后用Angular的HTTP拦截器自动给API请求添加Authorization头：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private authService: AuthService) {}

    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
        const token = this.authService.getAccessToken();
        if (token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${token}`
                }
            });
        }
        return next.handle(request);
    }
}

记得在AppModule中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
    ]
})
export class AppModule { }

3. 方案二：通过MVC后端端点动态获取令牌 #

如果你的Angular应用需要动态刷新令牌，或者不想直接在页面中暴露令牌（虽然服务器端注入已经很安全），可以创建一个MVC的API端点，让Angular通过已有的Cookie身份换取令牌：

创建TokenController：

[ApiController]
[Route("api/[controller]")]
[Authorize(AuthenticationSchemes = "Cookies")] // 验证MVC的Cookie身份
public class TokenController : ControllerBase
{
    [HttpGet("access-token")]
    public async Task<IActionResult> GetAccessToken()
    {
        // 从当前用户的身份中获取Access Token
        var accessToken = await HttpContext.GetTokenAsync("access_token");
        if (string.IsNullOrEmpty(accessToken))
        {
            return Unauthorized("No access token available for current user.");
        }

        // 返回令牌（可以只返回必要信息，不要暴露敏感内容）
        return Ok(new { AccessToken = accessToken, ExpiresIn = 3600 });
    }
}

然后在Angular的AuthService中调用这个端点获取令牌：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class AuthService {
    private accessToken: string | null = null;

    constructor(private http: HttpClient) {}

    async loadAccessToken(): Promise<void> {
        try {
            const response = await this.http.get<{ AccessToken: string }>('/api/token/access-token').toPromise();
            this.accessToken = response.AccessToken;
        } catch (error) {
            console.error('Failed to load access token:', error);
        }
    }

    getAccessToken(): string | null {
        return this.accessToken;
    }
}

在Angular应用启动时调用loadAccessToken()，比如在AppComponent的ngOnInit中：

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
    selector: 'app-root',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
    constructor(private authService: AuthService) {}

    async ngOnInit(): Promise<void> {
        await this.authService.loadAccessToken();
    }
}

4. 多Angular应用的特殊处理 #

如果同一个MVC视图要承载多个Angular应用，可以：

• 给每个Angular应用的容器元素添加data属性，存储专属配置（比如不同的API Scope）：

  <app-app1 data-api-scope="api1"></app-app1>
  <app-app2 data-api-scope="api2"></app-app2>
  

• Angular应用启动时读取对应的data属性，调用MVC端点获取对应Scope的令牌（需要在IdentityServer中配置MVC客户端允许多个Scope）。
• 或者让多个Angular应用共享同一个AuthService实例（如果它们调用的API使用同一个令牌）。

5. 关键安全注意事项 #

• 令牌存储：Angular端尽量把令牌存在内存中，避免用localStorage（防止XSS攻击窃取令牌）；如果必须持久化，用sessionStorage并配合严格的XSS防护。
• Cookie安全：确保MVC的Cookie配置了HttpOnly=true、Secure=true、SameSite=Strict，防止CSRF和Cookie窃取。
• CORS配置：如果Angular和Web API不同域，要在Web API中配置CORS，允许MVC域名的请求，并且允许携带Credentials（Cookie）。
• 令牌过期处理：可以让Angular定期调用MVC的令牌端点刷新令牌，或者利用IdentityServer的刷新令牌机制（需要在MVC客户端配置OfflineAccess Scope）。

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