具有客戶端Angular的IdentityServer4中具有無效簽名的令牌

Question

我正在使用Client Angular2開發一個應用程序網絡，並使用IdentityServer4開發ASP.NET Core 2中的后端，最后使用identserver IdentityServer4保護一個webapi。 我成功實現了后端，並且mi webapi得到了保護。 我的客戶端Angular也受到保護，並使用在IdentityServer中配置的客戶端中的mi客戶端登錄，並在其中設置AllowedGrantTypes，並設置密碼和用戶流。 問題是令牌的生成。 我可以生成帶有有效負載和標頭有效的令牌，但是我沒有使簽名有效。 在jwt.io中，我的令牌無效，並且我無法使用該令牌訪問用戶信息，盡管如此，使用此令牌仍可以訪問我的webapi中的信息。 有什么問題嗎？ 如何解決？

我在Angular中的代碼是這樣的：

import { Component, OnInit } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { JwksValidationHandler } from 'angular-oauth2-oidc';
import { authConfig } from './auth.config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(private oAuthService: OAuthService) {
    this.oAuthService.tokenEndpoint = 'http://localhost:5000/connect/token';
    this.oAuthService.userinfoEndpoint = 'http://localhost:5000/connect/userinfo';
    this.oAuthService.clientId = 'angular-client';
    this.oAuthService.responseType = 'id_token token';
    this.oAuthService.scope = 'api1';
    this.oAuthService.dummyClientSecret = 'password';
  }

  ngOnInit(): void {
    this.login();
  }

  login() {
    this.oAuthService.fetchTokenUsingPasswordFlow('aherrera', 'password').then((resp) => {
      // Loading data about the user
      return this.oAuthService.loadUserProfile();
    }).then(() => {
      // Using the loaded user data
      const claims = this.oAuthService.getIdentityClaims();
      if (claims) {
        // tslint:disable-next-line:no-console
        console.debug('given_name');
      }
    });
  }
}

而且，我在IdentityServer中的代碼是這樣的：

new Client
                {
                    ClientId = "angular-client",
                    ClientName = "Angular Client",
                    AllowedGrantTypes = GrantTypes.ResourceOwnerPassword,
                    AllowAccessTokensViaBrowser = true,
                    EnableLocalLogin = true,
                    AllowedCorsOrigins =
                    {
                        "httpsd://localhost:4200",
                        "http://localhost:4200"
                    },
                    AllowedScopes =
                    {
                        IdentityServerConstants.StandardScopes.OpenId,
                        IdentityServerConstants.StandardScopes.Profile,
                        IdentityServerConstants.StandardScopes.Email,
                        "api1"
                    },
                    ClientSecrets = new List<Secret>() {
                        new Secret("password".Sha256())
                    }
                },

控制台的日志為：

請幫助。

Answer 1

將openid范圍添加到您的Angular代碼中：

this.oAuthService.scope = 'openid api1';

您的客戶端應該真正使用隱式流程進行配置

AllowedGrantTypes = GrantTypes.Implicit,