Angular IdentityServer4中具有无效签名的令牌,客户端为

Angular IdentityServer4中具有无效签名的令牌,客户端为,angular,asp.net-web-api,asp.net-core,identityserver4,openid-connect,Angular,Asp.net Web Api,Asp.net Core,Identityserver4,Openid Connect,我正在开发一个带有客户端Angular2的web应用程序,以及一个带有IdentityServer4的ASP.NET Core 2中的后端,最后是一个受authserver保护的webapi,即IdentityServer4。 我成功地实现了后端,mi webapi得到了保护。My client Angular也受到保护,并使用mi client中的登录,同时在IdentityServer中配置客户端,并在flow中设置AllowedGrantTypes以及密码和用户。问题是令牌的生成。 我可以

我正在开发一个带有客户端Angular2的web应用程序,以及一个带有IdentityServer4的ASP.NET Core 2中的后端,最后是一个受authserver保护的webapi,即IdentityServer4。 我成功地实现了后端,mi webapi得到了保护。My client Angular也受到保护,并使用mi client中的登录,同时在IdentityServer中配置客户端,并在flow中设置AllowedGrantTypes以及密码和用户。问题是令牌的生成。 我可以生成有效负载和头有效的令牌,但我没有使签名有效。 在jwt.io中,我的令牌无效,我无法使用该令牌访问用户信息,但是使用该令牌a可以访问我的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');
      }
    });
  }
}
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())
                    }
                },
我在IdentityServer中的代码是:

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');
      }
    });
  }
}
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())
                    }
                },
控制台的日志为:


请提供帮助。

将openid范围添加到角度代码中:

this.oAuthService.scope = 'openid api1';
您的客户端应该真正配置隐式流

AllowedGrantTypes = GrantTypes.Implicit,

在本例中,请求响应为400个错误请求。我认为我的问题是证书,而不是使用太多的工作流。例如,使用控制台客户端和返回我的令牌进行探测也不会验证签名,并且与IdentityServer的lso示例中的实现完全相同。