Auth0 java jwt exemple

La sécurisation d’une application web est l’une des tâches les plus importantes à faire et généralement l’une des choses les plus difficiles à réaliser. Dans cette série, nous allons apprendre à implémenter l’authentification JWT dans ASP.Net API Web Core côté serveur et Angular côté client.

Nous allons également apprendre comment fonctionne l’authentification en général et comment utiliser les jetons Web JSON pour transmettre en toute sécurité les informations d’identification de l’utilisateur à partir du serveur au client et vice versa.

---

VIDEO : Authentification ASP.NET Core avec JWT et Angular - Partie 1.

---

Par conséquent, nous allons diviser cette série en trois parties. Dans la première partie , nous allons implémenter une authentification JWT dans ASP.NET API Web Core et voir comment fonctionne le processus d’intégration entre l’API Web et JWT (jeton web JSON). Dans la deuxième partie, nous allons implémenter des fonctionnalités front-end telles que la connexion, la déconnexion, la sécurisation des itinéraires et les fonctions basées sur les rôles autorisation avec Angular. Enfin, dans la troisième partie de la série, nous allons en apprendre davantage sur les jetons de rafraîchissement et leur utilisation dans les applications web modernes.

Pour télécharger le code source de cet article, vous pouvez visiter notre référentiel GitHub.

Alors, commençons.

Vue d’ensemble de l’authentification JWT

Avant d’aborder la mise en œuvre de l’authentification et de l’autorisation, jetons un coup d’œil rapide à la vue d’ensemble de l’authentification JWT. Il existe une application qui dispose d’un formulaire de connexion. Un utilisateur saisit son nom d’utilisateur et son mot de passe et appuie sur le bouton de connexion. Après avoir appuyé sur le bouton de connexion, un client (par exemple un navigateur Web) envoie les données de l’utilisateur au point de terminaison de l’API du serveur :

Lorsque le serveur valide les informations d’identification de l’utilisateur et confirme que l’utilisateur est valide, il envoie un JWT encodé au client. Il peut contenir un nom d’utilisateur, un utilisateur sujet, les rôles des utilisateurs ou d’autres informations utiles.

Côté client, nous stockons le JWT dans le stockage du navigateur pour mémoriser la session de connexion de l’utilisateur. Nous pouvons également utiliser les informations de JWT pour améliorer la sécurité de notre application.

Qu’est-ce que JWT (JSON Web Token) Les

jetons Web JSON permettent de transmettre des données de manière sécurisée entre deux parties sous la forme d’un objet JSON. Il s’agit d’une norme ouverte et d’un mécanisme populaire pour l’authentification Web. Dans notre cas, nous allons utiliser des jetons Web JSON pour transférer en toute sécurité les données d’un utilisateur entre le client et le serveur.

Les jetons Web JSON se composent de trois parties de base : l’en-tête, la charge utile et la signature.

Un exemple réel d’un jeton web JSON :

Les différentes parties du jeton sont affichées avec des couleurs différentes :

En-tête

La première partie de JWT est l’en-tête, qui est un objet JSON encodé au format base64 . L’en-tête est une partie standard de JWT et nous n’avons pas à nous en soucier. Il contient des informations telles que le type de jeton et le nom de l’algorithme :

{ « alg » : « HS256 », « typ » : « JWT » }

Charge utile

La charge utile contient certains attributs concernant l’utilisateur connecté. Par exemple, il peut contenir l’identifiant de l’utilisateur, le sujet de l’utilisateur et des informations indiquant si un utilisateur est un utilisateur admin ou non. Les jetons Web JSON ne sont pas chiffrés et peuvent être décodés avec n’importe quel décodeur base64, nous ne devons donc jamais inclure d’informations sensibles dans la charge utile :

{ « sub » : « 1234567890 », « name » : « John Doe », « iat » : 1516239022 }

Signature

Enfin, nous avons la partie Signature. Habituellement, le serveur utilise la partie signature pour vérifier si le jeton contient des informations valides – les informations que le serveur émet. Il s’agit d’une signature numérique qui est générée en combinant l’en-tête et la charge utile. De plus, il est basé sur une clé secrète que seul le serveur connaît :

ainsi, si des utilisateurs malveillants tentent de modifier les valeurs de la charge utile, ils doivent recréer la signature et à cette fin, ils ont besoin de la clé secrète que seul le serveur connaît. Du côté du serveur, on peut facilement vérifier si les valeurs sont d’origine ou non en comparant la signature d’origine avec une nouvelle signature calculée à partir des valeurs provenant du client.

Ainsi, nous pouvons facilement vérifier l’intégrité de nos données simplement en comparant les signatures numériques. C’est la raison pour laquelle nous utilisons JWT.

Création d’ASP.NET projet d’API Web Core

Créons maintenant un tout nouveau projet d’API Web Core ASP.NET. Nous pouvons créer un projet d’API Web avec l’interface de ligne de commande .NET Core ou utiliser Visual Studio. Pour cet article, nous allons utiliser Visual Studio.

Nous pouvons ouvrir le fichier et modifier la propriété applicationUrl :

Maintenant, nous pouvons démarrer notre projet.

En conséquence, nous verrons notre application hébergée à l’adresse et le navigateur enverra automatiquement une requête GET à .

Pour l’instant ça va.

Dans l’étape suivante, nous allons configurer l’authentification JWT dans notre application.

Configuration de l’authentification JWT

Pour configurer l’authentification JWT dans .NET Core, nous devons modifier le fichier. Si vous utilisez .NET Core version 5, vous devez ajouter les modifications dans le fichier à l’intérieur de la méthode .

Par souci de simplicité, nous allons ajouter tout le code à l’intérieur de la classe. Mais la meilleure pratique consiste à utiliser des méthodes d’extension afin de libérer notre classe des lignes de code supplémentaires. Si vous souhaitez savoir comment procéder et en savoir plus sur la configuration du projet d’API Web .NET Core, consultez : Configuration du service .NET Core.

Tout d’abord, nous allons installer le package NuGet dont nous avons besoin pour utiliser JWT dans l’application ASP.NET Core :

Ensuite, nous allons ajouter le code pour configurer JWT juste au-dessus de la ligne :

builder. Services.AddAuthentication(opt => { opt. DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme ; opter. DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme ; }) . AddJwtBearer(options => { options. TokenValidationParameters = new TokenValidationParameters { ValidateIssuer = true, ValidateAudience = true, ValidateLifetime = true, ValidateIssuerSigningKey = true, ValidIssuer = « https://localhost:5001 », ValidAudience = « https://localhost:5001 », IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(« superSecretKey@345 »)) } ; });

Pour que cela fonctionne, nous devons ajouter quelques directives using :

en utilisant Microsoft.AspNetCore.Authentication.JwtBearer ; à l’aide de Microsoft.IdentityModel.Tokens ; à l’aide de System.Text ;

Tout

d’abord, nous enregistrons le middleware d’authentification JWT en appelant la méthode. Ensuite, nous spécifions le schéma d’authentification par défaut ainsi que .

En appelant le AddJwtBearer, nous activons l’authentification JWT à l’aide du schéma par défaut et nous passons un paramètre, que nous utilisons pour configurer les options du porteur JWT :

• L’émetteur est le serveur réel qui a créé le jeton (ValidateIssuer=true)
• Le récepteur du jeton est un destinataire valide (ValidateAudience=true)
• Le jeton n’a pas expiré (ValidateLifetime=true)
• La clé de signature est valide et approuvée par le serveur (ValidateIssuerSigningKey=true)

De plus, nous fournissons des valeurs pour l’émetteur, l’audience et la clé secrète que le serveur utilise pour générer la signature pour JWT.

Nous allons coder en dur le nom d’utilisateur et le mot de passe par souci de simplicité. Toutefois, la meilleure pratique consiste à placer les informations d’identification dans une base de données ou une configuration fichier ou pour stocker la clé secrète dans la variable d’environnement.

Il y a une autre étape que nous devons faire pour rendre notre middleware d’authentification disponible pour l’application :

app. UseHttpsRedirection() ; appli. UseAuthentication() ; appli. UseAuthorization() ; appli. MapControllers() ; appli. exécuter() ;

Et c’est tout ce dont nous avons besoin pour configurer l’authentification JWT dans ASP.NET Core. C’est quelque chose que nous ferions dans la méthode à l’intérieur de la classe si nous utilisions l’application .NET 5.

Nous

disposons déjà d’un point de terminaison d’API pour obtenir des informations météorologiques, par exemple, et ce point de terminaison n’est pas sécurisé. N’importe qui peut envoyer une demande à pour récupérer les valeurs. Ainsi, dans cette section, nous allons ajouter un nouveau point de terminaison api/customers pour servir une liste des clients. Ce point de terminaison sera protégé contre les utilisateurs anonymes et les Seuls les utilisateurs connectés pourront l’utiliser.

Maintenant, ajoutons un vide dans les dossiers. À l’intérieur du contrôleur, nous allons ajouter une méthode d’action qui va renvoyer un tableau de clients. Plus important encore, nous allons ajouter une couche de sécurité supplémentaire en décorant la méthode d’action avec l’attribut afin que seuls les utilisateurs connectés puissent accéder à la route :

[Route(« api/[controller] »)] [ApiController] public class CustomersController : ControllerBase { [HttpGet, Authorize] public IEnumerable<string> Get() { return new string[] { « John Doe », « Jane Doe » } ; } }

Pour pouvoir utiliser l’attribut Autoris, nous devons ajouter une nouvelle directive using à l’intérieur du fichier :

l’attribut au-dessus de la méthode GET restreint l’accès aux seuls utilisateurs autorisés. Seuls les utilisateurs connectés peuvent récupérer la liste des clients. Par conséquent, cette fois-ci, si nous faisons une demande à partir de l’adresse du navigateur bar, au lieu d’obtenir une liste de clients, nous allons obtenir une réponse :

Pour

authentifier les utilisateurs anonymes, nous devons fournir un point de terminaison de connexion afin que les utilisateurs puissent se connecter et accéder aux ressources protégées. Un utilisateur va fournir un nom d’utilisateur et un mot de passe, et si les informations d’identification sont valides, nous allons émettre un jeton Web JSON pour le client demandeur.

De plus, avant de commencer à implémenter le contrôleur d’authentification, nous devons ajouter un pour conserver les informations d’identification de l’utilisateur sur le serveur.  est une classe simple qui contient deux propriétés : et .  Nous allons créer un dossier dans le répertoire racine et à l’intérieur de celui-ci une classe :

public class LoginModel { public string ? Nom d’utilisateur { get ; set ; } chaîne publique ? Mot de passe { get ; set ; } }

Aussi, créons une autre classe dans le même dossier Models :

public class AuthenticatedResponse { public string ? Jeton { get ; set ; } }

Nous verrons dans une minute pourquoi nous avons besoin de ce cours.

Créons maintenant le à l’intérieur du dossier.

À l’intérieur de la, nous allons ajouter l’action pour valider les informations d’identification de l’utilisateur. Si les informations d’identification sont valides, nous allons émettre un jeton Web JSON. Pour cette démo, nous allons coder en dur le nom d’utilisateur et le mot de passe pour implémenter un faux utilisateur. Après avoir validé les informations d’identification de l’utilisateur, nous allons générer un JWT avec une clé secrète. JWT utilise la clé secrète pour générer la signature.

Alors, implémentons le :

[Route(« api/[controller] »)] [ApiController] public class AuthController : ControllerBase { [HttpPost(« login »)] public IActionResult Login([FromBody] LoginModel user) { if (user is null) { return BadRequest(« Demande client non valide ») ; } if (utilisateur. UserName == « johndoe » & utilisateur. Password == « def@123 ») { var secretKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(« superSecretKey@345 »)) ; var signinCredentials = new SigningCredentials(secretKey, SecurityAlgorithms.HmacSha256) ; var tokeOptions = new JwtSecurityToken( issuer : « https://localhost:5001 », audience : « https://localhost:5001 », claims : new List<Claim>(), expire : DateTime.Now.AddMinutes(5), signingCredentials : signinCredentials ) ; var tokenString = new JwtSecurityTokenHandler(). WriteToken(tokeOptions) ; return Ok(new AuthenticatedResponse { Token = tokenString }) ; } retour Non autorisé() ; } }

Connexion Action Explication

Nous décorons notre action avec l’attribut. À l’intérieur de la méthode de connexion, nous créons le avec la valeur de clé secrète superSecretKey@345.  Ensuite, nous créons l’objet et en guise d’arguments, nous fournissons un secret clé et le nom de l’algorithme que nous allons utiliser pour coder le jeton.

Voici la partie intéressante.

Les deux premières étapes sont les étapes standard dont nous n’avons pas à nous soucier. La troisième étape est celle qui nous intéresse. Dans la troisième étape, nous créons l’objet avec quelques paramètres importants :

• Émetteur : Le premier paramètre est un simple représentant le nom du serveur web qui émet le jeton
• Audience : Le deuxième paramètre est une valeur représentant les destinataires
• valides Revendications : Le troisième argument est une liste de rôles d’utilisateur, par exemple, l’utilisateur peut être un administrateur, un gestionnaire ou un auteur (nous allons ajouter des rôles dans le prochain post)
• Expire : Le quatrième argument est l’objet qui représente la date et l’heure après lesquelles le jeton expire

Ensuite, nous créons une représentation sous forme de chaîne de JWT en appelant la méthode sur . Enfin, nous retournons JWT dans une réponse. En réponse, nous créons l’objet qui contient uniquement la propriété.

Tester l’authentification JWT

Maintenant, commençons notre application. De plus, nous allons utiliser Postman pour envoyer des demandes.

Cela dit, envoyons une requête POST à et fournissons un corps de requête :

{ « UserName » :"johndoe », « Password » : « def@123 » }

Dans la section réponse, nous allons voir une réponse avec la chaîne JWT dans le corps de la réponse :

Dans les articles à venir, nous allons apprendre comment utiliser ce token dans une application Angular et en plus comment Actualiser un jeton dans une application web.

Conclusion

Dans cet article, nous en avons appris davantage sur la sécurité et sur son rôle crucial dans le développement d’applications Web. Nous avons parlé de ce qu’est JWT et de sa place dans la mise en œuvre de la sécurité Web. De plus, nous avons vu comment utiliser l’attribut pour protéger notre action et comment implémenter une action de connexion qui émet un nouveau JWT si une connexion réussit.

Dans la partie suivante, nous allons implémenter un côté front-end de notre application avec Angular.Nous allons implémenter la connexion, la déconnexion, l’autorisation, sécuriser les routes, et bien plus encore.