.NET Core WebAPI + OpenIdDict (учетные данные) и клиент Angular2: 401 после успешного входа в систему (полный рекоммендованный)

Question

Я пытаюсь создать Angular2 SPA, который использует .NET Core Web API, защищенный с использованием OpenIdDict, с потоком учетных данных. При создании решения для воспроизведения этой проблемы я также подробно описал все свои шаги в readme, поэтому надеюсь, что этот пост может быть полезен новичкам, таким как я. Пожалуйста, найдите полные REPRO Solutions в этих хранилищах:

• на стороне сервера (.NET ядро ​​+ OpenIdDict), с подробными инструкциями, чтобы создать свой собственный: https://github.com/Myrmex/repro-oidang

• стороне клиента (Angular2) : https://github.com/Myrmex/repro-angoid

Что касается стороны сервера, я следовал за образец, представленного OpenIdDict об этом потоке (https://github.com/openiddict/openiddict-samples/blob/master/samples/PasswordFlow). Вот наиболее значимые биты в Startup:

public void ConfigureServices(IServiceCollection services) 
{ 
    services.AddCors(); 

    services.AddEntityFrameworkSqlServer() 
     .AddDbContext<CatalogContext>(options => 
       options.UseSqlServer(Configuration.GetConnectionString("Catalog"))) 
     .AddDbContext<ApplicationDbContext>(options => 
       options.UseSqlServer(Configuration.GetConnectionString("Catalog"))); 

    services.AddIdentity<ApplicationUser, ApplicationRole>() 
     .AddEntityFrameworkStores<ApplicationDbContext>() 
     .AddDefaultTokenProviders(); 

    services.AddOpenIddict<ApplicationDbContext>() 
     .DisableHttpsRequirement() 
     .EnableTokenEndpoint("/connect/token") 
     .EnableLogoutEndpoint("/connect/logout") 
     .EnableUserinfoEndpoint("/connect/userinfo") 
     .AllowPasswordFlow() 
     .AllowRefreshTokenFlow() 
     .AddEphemeralSigningKey(); 

    services.AddMvc() 
     .AddJsonOptions(options => 
     { 
      options.SerializerSettings.ContractResolver = 
       new Newtonsoft.Json.Serialization.CamelCasePropertyNamesContractResolver(); 
     }); 

    // add my services 
    // ... 

    services.AddTransient<IDatabaseInitializer, DatabaseInitializer>(); 
    services.AddSwaggerGen(); 
} 

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
    ILoggerFactory loggerFactory, 
    IDatabaseInitializer databaseInitializer) 
{ 
    loggerFactory.AddConsole(Configuration.GetSection("Logging")); 
    loggerFactory.AddDebug(); 
    loggerFactory.AddNLog(); 

    app.UseDefaultFiles(); 
    app.UseStaticFiles(); 

    app.UseCors(builder => 
      builder.WithOrigins("http://localhost:4200") 
       .AllowAnyHeader() 
       .AllowAnyMethod()); 

    app.UseOAuthValidation(); 
    app.UseOpenIddict(); 
    app.UseMvc(); 
    databaseInitializer.Seed().GetAwaiter().GetResult(); 
    env.ConfigureNLog("nlog.config"); 
    app.UseSwagger(); 
    app.UseSwaggerUi(); 
} 

Если я проверить его с Скрипач, он отлично работает: маркер запроса получает маркер, а затем я могу включить его в заголовок Authorization, чтобы получить доступ к любому защищенному API, который возвращает данные JSON, как ожидалось.

Sample маркер запроса:

POST http://localhost:51346/connect/token 
Content-Type: application/x-www-form-urlencoded 

grant_type=password&scope=offline_access profile email roles&resource=http://localhost:4200&username=...&password=... 

Пример запроса ресурса:

GET http://localhost:51346/api/values 
Content-Type: application/json 
Authorization: Bearer ...received token here... 

Тем не менее, на стороне клиента, когда я пытаюсь тот же запрос, я получаю сообщение об ошибке 401; глядя на журнал, кажется, что служба Angular2 Http вообще не отправляет требуемый заголовок, так как я получаю ошибку Authentication was skipped because no bearer token was received (см. больше записей журнала ниже).

Служба извлечения некоторых ресурсов, как это:

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import { SettingsService } from './settings.service'; 
import { AuthenticationService } from './authentication.service'; 

export interface ICategory { 
    id: string; 
    name: string; 
} 

@Injectable() 
export class CategoryService { 

    constructor(
    private _http: Http, 
    private _settings: SettingsService, 
    private _authService: AuthenticationService) { } 

    public getCategories(): Observable<ICategory[]> { 
    let url = this._settings.apiBaseUrl + 'categories'; 
    let options = { 
     headers: this._authService.createAuthHeaders({ 
     'Content-Type': 'application/json' 
     }) 
    }; 
    return this._http.get(url, options).map((res: Response) => res.json()) 
     .catch((error: any) => Observable.throw(error.json().error || 'server error')); 
    } 
} 

Где помощник createAuthHeaders просто получает некоторые свойства, представляющие Header (https://angular.io/docs/ts/latest/api/http/index/Headers-class.html) записи, извлекает сохраненный маркер, добавляет Authentication записи в заголовок, и возвращает его:

public createAuthHeaders(headers?: { [name: string]: any }): Headers { 
    let auth = new Headers(); 
    if (headers) { 
     for (let key in headers) { 
      if (headers.hasOwnProperty(key)) { 
       auth.append(key, headers[key]); 
      } 
     } 
    } 
    let tokenResult = this._localStorage.retrieve(this._settings.tokenStorageKey, true); 
    if (tokenResult) { 
     auth.append('Authentication', 'Bearer ' + tokenResult.access_token); 
    } 
    return auth; 
} 

Тем не менее, этот запрос получает 401 ответ, а затем угловые броски при попытке отображения ответа на объект JSON (Unexpected end of JSON input).

Я должен добавить, что как только клиент получает токен, он делает с ним другой запрос, чтобы получить информацию о пользователе, и это работает нормально; вот это (см код после get user info):

public login(name: string, password: string) { 
    let body = 'grant_type=password&scope=offline_access profile email roles' + 
     `&resource=${this._settings.appBaseUrl}&username=${name}&password=${password}`; 

    this._http.post(
     this._settings.authBaseUrl + `token`, 
     body, 
     { 
      headers: new Headers({ 
       'Content-Type': 'application/x-www-form-urlencoded' 
      }) 
     }).map(res => res.json()) 
     .subscribe(
     (token: ITokenResult) => { 
      if (token.expires_in) { 
       token.expires_on = this.calculateExpirationDate(+token.expires_in); 
      } 
      this._localStorage.store(this._settings.tokenStorageKey, token, true); 
      // get user info 
      this._http.get(this._settings.authBaseUrl + 'userinfo', { 
       headers: new Headers({ 
        'Content-Type': 'application/json', 
        'Authorization': 'Bearer ' + token.access_token 
       }) 
      }).map(res => res.json()) 
       .subscribe((info: IUserInfoResult) => { 
        let user: IUser = { 
         id: info.name, 
         email: info.email, 
         name: info.name, 
         firstName: info.given_name, 
         lastName: info.family_name, 
         role: info.role, 
         verified: info.email_verified 
        }; 
        this._localStorage.store(this._settings.userStorageKey, user, true); 
        this.userChanged.emit(user); 
       }, error => { 
        console.log(error); 
       }); 
     }, 
     error => { 
      console.log(error); 
     }); 
    } 

Тем не менее, любой другой запрос, построенный с помощью сервиса выше, не удается. Что случилось с заголовками, построенными с помощью цитируемой функции?

Вот несколько записей журнала на стороне сервера:

2016-11-18 20:41:31.9815|0|AspNet.Security.OAuth.Validation.OAuthValidationMiddleware|DEBUG| Authentication was skipped because no bearer token was received. 
2016-11-18 20:41:31.9815|0|OpenIddict.Infrastructure.OpenIddictProvider|INFO| The token request validation process was skipped because the client_id parameter was missing or empty. 
2016-11-18 20:41:32.0715|0|AspNet.Security.OpenIdConnect.Server.OpenIdConnectServerMiddleware|INFO| No explicit audience was associated with the access token. 
2016-11-18 20:41:32.1165|10|AspNet.Security.OpenIdConnect.Server.OpenIdConnectServerMiddleware|INFO| AuthenticationScheme: ASOS signed in. 
2016-11-18 20:41:32.1635|3|AspNet.Security.OAuth.Validation.OAuthValidationMiddleware|INFO| HttpContext.User merged via AutomaticAuthentication from authenticationScheme: Bearer. 
2016-11-18 20:41:57.7430|0|AspNet.Security.OAuth.Validation.OAuthValidationMiddleware|DEBUG| Authentication was skipped because no bearer token was received. 
2016-11-18 20:41:57.7430|0|AspNet.Security.OAuth.Validation.OAuthValidationMiddleware|DEBUG| Authentication was skipped because no bearer token was received. 
2016-11-18 20:41:57.8820|12|AspNet.Security.OAuth.Validation.OAuthValidationMiddleware|INFO| AuthenticationScheme: Bearer was challenged. 
2016-11-18 20:41:57.9305|12|AspNet.Security.OAuth.Validation.OAuthValidationMiddleware|INFO| AuthenticationScheme: Bearer was challenged. 
2016-11-18 20:41:57.9465|0|AspNet.Security.OAuth.Validation.OAuthValidationMiddleware|DEBUG| Authentication was skipped because no bearer token was received. 
2016-11-18 20:41:57.9925|12|AspNet.Security.OAuth.Validation.OAuthValidationMiddleware|INFO| AuthenticationScheme: Bearer was challenged. 

Answer 1

Вашего податель маркер использование является неправильным.

auth.append('Authentication', 'Bearer ' + tokenResult.access_token) // wrong 
auth.append('Authorization', 'Bearer ' + tokenResult.access_token) // right 

Жатка должна быть Authorization. См. https://tools.ietf.org/html/rfc6750#section-2.1