angular 10 'oidc-client' / IdentityServer4 .netCore 3.1

Question

我在从客户端网站调用 api rest 时遇到问题 angular 10，无法调用具有授权属性的请求（获得 401 未授权）。

环境：

- 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
  },

在 angular 中，这些是客户端设置：

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
保护

但是：

• 调用 api 使用 [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)] 保护的请求 不起作用并且 return 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));
  }

acces_token好像填对了this.authorizationHeaderValue

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

你有什么想法吗？

此致。

Answer 1

显然 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'
  };

很抱歉打扰你，在我看来添加这个作用域会使应用程序中止，我想我错了......

此致。