Token mit ungültiger Signatur in IdentityServer4 mit Client Angular

Question

Ich entwickle das Application Web mit einem Client Angular2 und einem Backend in ASP.NET Core 2 mit IdentityServer4 und schließe schließlich ein Webapi mit dem Authentifizierungsserver IdentityServer4. Ich habe das Backend erfolgreich implementiert und mi webapi ist geschützt. Mein Client Angular ist ebenfalls geschützt und verwendet den Login in mi client mit einem Client, der in IdentityServer mit AllowedGrantTypes konfiguriert ist, die in flow mit Passwort und Benutzer definiert sind. Das Problem ist die Generierung des Tokens. Ich kann ein Token mit Payload und Header gültig generieren, aber ich habe keine Signatur gültig. In jwt.io meine Token es ungültig, und ich kann nicht auf die Benutzerinformationen mit dem Token zugreifen, aber mit diesem Token kann ein Zugriff auf die Informationen in meinem Webapi. Was ist das Problem? Wie repariert werden?

in Angular Mein Code ist dies:

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'); 
     } 
    }); 
    } 
} 

Und mein Code in IdentityServer dies:

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

Das Protokoll der Konsole ist:

Hilfe bitte.

Answer 1

den openid Umfang zu Ihrem Winkel Code hinzu:

this.oAuthService.scope = 'openid api1'; 

Sie Kunde wirklich mit dem impliziten Fluss

AllowedGrantTypes = GrantTypes.Implicit,