角度 10 'oidc-client' / IdentityServer4 .netCore 3.1

Question

我在从客户端 webSite angular 10 调用 api rest 时遇到问题，无法使用 Authorize 属性调用请求（获取 401 Unauthorized）。

环境：

- IdentityServer4 mvc .netCore 3.1
- Web.Api mvc .netCore 3.1
- client webapp, angular 10 with package 'oidc-client' (login/logout, ..., allowing to call api, ...)

web.api 是这样配置的（在 ids 中）：

  {
    "ClientId": "WebApi",
    "ClientSecret": "WebApi",
    "AllowedGrantTypes": "GrantTypes.CodeAndClientCredentials",
    "ClientType": "MvcApi",
    "RedirectUris": [
      "https://localhost:44372/signin-oidc"
    ],
    "PostLogoutRedirectUris": [
      "https://localhost:44372/",
      "https://localhost:44372/signout-callback-oidc",
      "https://localhost:44372/home/index"
    ],
    "FrontChannelLogoutUri": "https://localhost:44372/account/frontchannellogout",
    "AllowedScopes": [
      "openid",
      "profile",
      "roles"
    ],
    "RequireConsent": false,
    "RequirePkce": true,
    "AllowOfflineAccess": true
  },
 

web 应用 Angular 在 ids 中配置如下：

  {
    "ClientId": "ng.MOGUI.Web.UI",
    "ClientSecret": "ng.MOGUI.Web.UI",
    "AllowedGrantTypes": "GrantTypes.Implicit",
    "ClientType": "Mvc",
    "RedirectUris": [
      "http://localhost:4200/auth-callback",
      "http://192.168.1.7:4200/auth-callback"
    ],
    "PostLogoutRedirectUris": [
      "http://localhost:4200/",
      "http://192.168.1.7:4200/"
    ],
    "AllowedScopes": [
      "openid",
      "profile",
      "email",
      "WebAPI2",
      "WebApi",
      "api.read"
    ],
    "RequireConsent": false,
    "RequirePkce": true,
    "AllowOfflineAccess": true
  },

这些是客户端设置：

export function getClientSettings(): UserManagerSettings {
  return {
      authority: 'https://localhost:999',
      client_id: 'ng.MOGUI.Web.UI',
      client_secret: 'ng.MOGUI.Web.UI',
      response_mode : 'fragment',
      redirect_uri: 'http://localhost:4200/auth-callback',
      post_logout_redirect_uri: 'http://localhost:4200/',
      response_type:"id_token token",
      // scope:"openid profile email",
      scope:"openid profile email",
      filterProtocolClaims: true,
      loadUserInfo: true,
      automaticSilentRenew: true,
      silent_redirect_uri: 'http://localhost:4200/silent-refresh.html'
  };

oidc-client 包安装在 angular webapp 中，并且工作正常：

• 登录/注销好的
• 调用 api 请求未使用 [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)] ok

但是：

• 调用使用 [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)] 保护的 api 请求不起作用并返回 401 Unauthorized。

oidc-client 在登录时正确地为用户填写必要的信息：

export class User {
  constructor(settings: UserSettings);

  id_token: string;
  session_state: any;
  access_token: string;
  refresh_token: string;
  token_type: string;
  scope: string;
  profile: ApplicationUser;
  expires_at: number;
  state: any;

  toStorageString(): string;

  readonly expires_in: number | undefined;
  readonly expired: boolean | undefined;
  readonly scopes: string[];
}

id_token 和 access_token 好像没问题

安全 api 请求的调用在 angular 中是这样完成的：

  update(userRegistration: UpdateInputModel) {  
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json; charset=utf-8',
        'Authorization': this.authorizationHeaderValue
      })
    };

    return this.http.post(this.configService.authApiURI + '/Account/Update', 
                          userRegistration, httpOptions).pipe(catchError(this.handleError));
  }

this.authorizationHeaderValue

中似乎正确填写了acces_token

但是，如果我用从 mvc 客户端（调用 api）获得的 access_token（稍长一点）替换它，它就可以正常工作。

你有什么想法吗？

问候。

Answer 1

显然，客户端 Web 应用范围内缺少 Web.api，应该是这样的：

    export function getClientSettings(): UserManagerSettings {
      return {
          authority: 'https://localhost:999',
          client_id: 'ng.MOGUI.Web.UI',
          client_secret: 'ng.MOGUI.Web.UI',
          response_mode : 'fragment',
          redirect_uri: 'http://localhost:4200/auth-callback',
          post_logout_redirect_uri: 'http://localhost:4200/',
          response_type:"id_token token",
          scope:"openid profile email **WebApi**",
      filterProtocolClaims: true,
      loadUserInfo: true,
      automaticSilentRenew: true,
      silent_redirect_uri: 'http://localhost:4200/silent-refresh.html'
  };

很抱歉打扰您，在我看来，添加此范围会使应用程序中止，我想我错了......

问候。