在 Angular 7 中配置和使用 Dotnet Core Web API答案

【问题标题】：Configuring and Consuming Dotnet Core Web API in Angular 7在 Angular 7 中配置和使用 Dotnet Core Web API
【发布时间】：2019-05-16 19:10:51
【问题描述】：

我创建了一个我希望在我的 Angular 7 应用程序中使用的 dotnet core web api。我遇到了几个问题：

我将中间件配置为使用 Jwt 身份验证（参见下面的部分代码）；但是，当我期待 401 时，我收到了 404 状态代码。当未经授权的用户尝试访问授权资源时，用户被重定向到不存在的登录页面。我偶然发现了一篇描述如何覆盖 applicationcookie 以返回 401 而不是 404 的帖子。它部分解决了我的问题。
调用 API 时，我得到一个 401，但我必须在请求标头中添加一个 cookie 参数。
在我的 Angular 应用程序中，我可以获得一个令牌。但是，任何对 API 中授权路由的请求都会返回 404，因为标头缺少 cookie 参数。我尝试将烹饪添加到标题中，但我收到错误消息“http.js:1436 拒绝设置不安全的标题“cookie”。

Jwt 配置

 services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddJwtBearer(options =>
   {
    options.TokenValidationParameters = new Microsoft.IdentityModel.Tokens.TokenValidationParameters()
  {
    ...
  };
});

将 404 覆盖为 401。

// Configure the Application Cookie
services.ConfigureApplicationCookie(options => {
    // Override the default events
    options.Events = new CookieAuthenticationEvents
    {
        OnRedirectToAccessDenied = ReplaceRedirectorWithStatusCode(HttpStatusCode.Forbidden),
        OnRedirectToLogin = ReplaceRedirectorWithStatusCode(HttpStatusCode.Unauthorized)
    };

    // Configure our application cookie
    options.Cookie.Name = ".applicationname";
    options.Cookie.HttpOnly = true; // This must be true to prevent XSS
    options.Cookie.SameSite = SameSiteMode.None;
    options.Cookie.SecurePolicy = CookieSecurePolicy.None; // Should ideally be "Always"

    options.SlidingExpiration = true;
});

Angular 拦截器的部分代码 - 基于几个 cmets，我删除了 cookie 并留下了 'withcredential':'true' 或 'included'。这并没有什么不同。我现在对标头值进行了硬编码。

 intercept(request : HttpRequest<any>, next: HttpHandler):Observable<HttpEvent<any>>{
    const headers = new HttpHeaders({
        'cookie':'ASPNET_COOKIE=CfDJ8K9C4yVY5HtDnXVGM_H-y2wweqlBcYiVLelvIMw2xntKY9j_AMP1GvLahXrR4fSNhbS3AysDXYVgFCrT_-LOyHT0iofBVwdllx3UHpXvbhXrCwSofHk5CwJn3Ae5dPI9gzx-BQSxIuwTQy-SF6LcYp9ctShzvQ5D6Qxty6OHuV5yGW8ShqQ05yV0qMdxivI87j6hv2eTdTW5oAqgYEN7LRUUA9MYz7Rq8i-XSB1KirtLC0v1i5NirYdENY2XNSpRF50A5lTu2m7M1CGe8TPU1mF2RW_rV7lOHAk-HYRCl80k8vYG8SVBYMrrK3soGApWcaDteZfJtN_K_g-xhZ2etT-js0ie0nCB_OWENrBilDpl8-0AcvjqvXG5E4AFXLh47XhAbRjkIOZECZn2WU_BT6TnvCkzUevgFZDMVVx6XmqUWzYb9WESlAoWfX4RYWnaDucba_FJDlMoi3YlXEaJgDnIB1-xYSKuuGScvAt7o49595pWLyFH4Yw7qgyOeLB5YpnookVPIEmyxj3-VXe5DU7mbW1GPFZMlcFXGU9P8RwkY0LO1OJiZP0wFh4NAQ_WSockhB8t_q0vM5jOBxcLNGTricbAZcEyYTwFa-XAKNgHXqu4q7LUCID02jZpNYbdj204CIV0I1H_kUN-e2AciA8QHFCx-gpq_6Tl-1t_vOaHW1sFfxHP2fvqu3r5hlVK2Q',
        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy5taWNyb3NvZnQuY29tL3dzLzIwMDgvMDYvaWRlbnRpdHkvY2xhaW1zL3VzZXJkYXRhIjoidXNlcnR3b0Bkc3NpbmMuY29tIiwiaHR0cDovL3NjaGVtYXMueG1sc29hcC5vcmcvd3MvMjAwNS8wNS9pZGVudGl0eS9jbGFpbXMvZW1haWxhZGRyZXNzIjoidXNlcnR3b0Bkc3NpbmMuY29tIiwiZXhwIjoxNTQ0OTE0MDQxLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjIwMDEvIiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdDoyMDAxLyJ9.WJhyQHGxjUykg5GXrcnm2vdadxmRF83iBwwRheddu8w',
        'Content-Type': 'application/json',
        'withCredentials' :'true'
      });
    console.log('modifying headers');
     const cloneRequest = request.clone({headers});
     return next.handle(cloneRequest)

CORS 启用

  services.AddCors(options =>
            {
            options.AddPolicy("AllowSpecificOrigin",
                builder => builder
                .WithOrigins("http://localhost:4200")
                .AllowAnyHeader() // version important for cors.
                .AllowAnyMethod() //very import in order for cors to work
                    //.WithExposedHeaders("")
                    );
            });

我希望有人会指出 API 的不同配置或以角度设置 cookie 的方法。

更新

我已经能够将问题缩小到下面的代码段。当我将它们注释掉时，当我尝试访问未经授权的资源时会收到 401。

    services.AddIdentity<IdentityUser, IdentityRole<string>>(options =>
    {
        options.Password.RequireNonAlphanumeric = false;
        options.Password.RequiredLength = 4;
        options.User.AllowedUserNameCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._@+";
        options.Password.RequireUppercase = false;
        options.Password.RequiredUniqueChars = 1;

        options.User.RequireUniqueEmail = false;
        options.Lockout.AllowedForNewUsers = true;
        options.Lockout.MaxFailedAccessAttempts = 5;
        options.Lockout.DefaultLockoutTimeSpan = TimeSpan.FromMinutes(5);

    }).AddEntityFrameworkStores<ClientPanelDbContext>()
    .AddDefaultTokenProviders();

【问题讨论】：

为什么需要使用 cookie，你已经在 header 中传递不记名令牌？
@saj 当我发送没有 cookie 的请求时，我得到的是 404 状态而不是 401。添加 cookie 后，我得到了预期的 401。
你在这里问了几个不同的问题。关于http.js: Refused to set unsafe header "cookie"：这个Angular 4线程可能帮助（至少作为一种解决方法）：github.com/angular/angular/issues/15730

标签： c# cors asp.net-core-webapi interceptor angular7

【解决方案1】：

这是我的错误，经过一番挫折，我终于弄明白了。 API 工作正常，我能够获得令牌并访问受保护的资源。我错误地将安全密钥从 config.Value.key 更改为 config.Value.Issuer。它以前有效，所以我再也没有回到那种方法。今天早上，我注意到消息是签名无效。我去了创建令牌的方法，我意识到我的错误。我修复了，我得到了 200、401、500 和 404 的预期值。

【讨论】：