Jeton avec signature invalide dans IdentityServer4 avec le client Angular

Question

Je fais le développement d'une application web avec un client Angular2, et un backend dans ASP.NET Core 2 avec IdentityServer4 et enfin un webapi protégé avec le authserver IdentityServer4. J'ai implémenté le backend avec succès, et mi webapi est protégé. Mon client Angular est également protégé et utilise le login dans mi client avec un client configuré dans IdentityServer avec AllowedGrantTypes défini dans flow avec mot de passe et utilisateur. Le problème est la génération du jeton. Je peux générer un jeton avec charge utile et en-tête valide mais je n'ai pas fait une signature valide. En jwt.io mon jeton est invalide, et je ne peux pas accéder à l'information de l'utilisateur avec le jeton, néanmoins avec ce jeton un peut accéder à l'information dans mon webapi. Quel est le problème? Comment fixer?

Mon code angulaire est le suivant:

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

Et, mon code dans IdentityServer est ceci:

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

Le journal de la console est:

Aidez-moi, s'il vous plaît.

Answer 1

ajouter le champ Openid à votre code angulaire:

this.oAuthService.scope = 'openid api1'; 

client Vous devriez vraiment être configuré avec le flux Implicite

AllowedGrantTypes = GrantTypes.Implicit,