带有客户端Angular的IdentityServer4中具有无效签名的令牌答案

【问题标题】：Token with invalid signature in IdentityServer4 with client Angular带有客户端Angular的IdentityServer4中具有无效签名的令牌
【发布时间】：2018-03-10 18:38:49
【问题描述】：

我使用客户端 Angular2 开发应用程序 Web，使用 IdentityServer4 开发 ASP.NET Core 2 中的后端，最后使用 IdentityServer4 进行身份验证服务器保护的 webapi。我成功实现了后端，并且 mi webapi 受到保护。我的客户端 Angular 也受到保护，并在 mi 客户端中使用登录，并在 IdentityServer 中配置了一个客户端，其中 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())
                    }
                },

控制台的日志是：

请帮忙。

【问题讨论】：

标签： angular asp.net-web-api asp.net-core identityserver4 openid-connect

【解决方案1】：

将 openid 范围添加到您的 Angular 代码中：

this.oAuthService.scope = 'openid api1';

您的客户端确实应该配置隐式流程

AllowedGrantTypes = GrantTypes.Implicit,

【讨论】：

在这种情况下，请求以 400 Bad Request 响应。
我认为我的问题是证书，而不是使用的工作流程。例如，使用控制台客户端进行探测，返回我的令牌也不会验证签名，并且与 IdentityServer 的 lso 示例中的实现完全相同。