 |
| Authentification dans les application ASP.NET Core & Angular |
Je crois que quasiment tout le travaille est déjà fait ...
Microsoft - Ajouter, télécharger et supprimer des données utilisateur personnalisées pour l’identité dans un projet ASP.NET Core
En continuant mes recherches, je trouve ce projet et cet auteur qui me semble bien avancé :
Mark Macneil - User Authentication and Identity with Angular, Asp.Net Core and IdentityServer
Ce qui est un petit peu ennuyeux pour ne pas dire plus, c'est la disparité de tous ces projets. Je clone
https://github.com/mmacneil/AngularASPNETCoreOAuth
et je m'intéresse précisément au projet suivant :
https://github.com/mmacneil/AngularASPNETCoreOAuth/tree/master/src/AuthServer
Car je souhaite également déployer une application d'Authentification pour authentifier des utilisateurs dans mes applications Angular.
Je lance la solution dans mon Visual Studio, jusque là tout vas bien, mais quand je souhaite créer la base de données, je vais dans la console Package Management Console :
PM> update-database
Et là ce sont des insultes jusqu' à ce que je comprenne que le package :
Microsoft.EntityFrameworkCore.Tools
N'est pas installé et pourtant cette commande en dépend, allons y installons ce package pour ce projet:
PM> Install-Package Microsoft.EntityFrameworkCore.Tools
Mais là pareil, un flot d'injures le tout en rouge dans ma PMC, jusqu'à ce que je mette à jour la version des packages ...
Microsoft - Ajouter, télécharger et supprimer des données utilisateur personnalisées pour l’identité dans un projet ASP.NET Core
En continuant mes recherches, je trouve ce projet et cet auteur qui me semble bien avancé :
Mark Macneil - User Authentication and Identity with Angular, Asp.Net Core and IdentityServer
Ce qui est un petit peu ennuyeux pour ne pas dire plus, c'est la disparité de tous ces projets. Je clone
https://github.com/mmacneil/AngularASPNETCoreOAuth
et je m'intéresse précisément au projet suivant :
https://github.com/mmacneil/AngularASPNETCoreOAuth/tree/master/src/AuthServer
Car je souhaite également déployer une application d'Authentification pour authentifier des utilisateurs dans mes applications Angular.
Je lance la solution dans mon Visual Studio, jusque là tout vas bien, mais quand je souhaite créer la base de données, je vais dans la console Package Management Console :
PM> update-database
Et là ce sont des insultes jusqu' à ce que je comprenne que le package :
Microsoft.EntityFrameworkCore.Tools
N'est pas installé et pourtant cette commande en dépend, allons y installons ce package pour ce projet:
PM> Install-Package Microsoft.EntityFrameworkCore.Tools
Mais là pareil, un flot d'injures le tout en rouge dans ma PMC, jusqu'à ce que je mette à jour la version des packages ...
 |
| Mise à jour des packages autour d'EntityFrameworkCore pour installer EntityFrameworkCore.Tools |
Cette fois, je vais enfin pouvoir exécuter la fameuse commande :
PM> update-database
Et bien non rien à faire ...
PM> update-database
Et bien non rien à faire ...
 |
| Update-database |
Your startup project 'AuthServer' doesn't reference Microsoft.EntityFrameworkCore.Design. This package is required for the Entity Framework Core Tools to work. Ensure your startup project is correct, install the package, and try again.
Cette fois j'en ai ras le bol, je pars, je reviendrai demain ...
Le lendemain ... Reprenons calmement ...
J'installe le package Microsoft.EntityFrameworkCore.Design pour le projet principal AuthServer
Cette fois j'en ai ras le bol, je pars, je reviendrai demain ...
Le lendemain ... Reprenons calmement ...
J'installe le package Microsoft.EntityFrameworkCore.Design pour le projet principal AuthServer
 |
| Install package Microsoft.EntityFrameworkCore.Design |
Je me positionne dans le répertoire de l'Infra :
PM> cd .\AuthServer.Infrastructure
PM> update-database
Build started...
Build succeeded.
More than one DbContext was found. Specify which one to use. Use the '-Context' parameter for PowerShell commands and the '--context' parameter for dotnet commands.
PM>
Là, on retourne chez l'auteur qui nous dit :
AuthServer.Infrastructure> dotnet ef database update --context AppIdentityDbContext
AuthServer.Infrastructure> dotnet ef database update --context PersistedGrantDbContext
et que l'on va traduire par la commande suivante dans la Console Package Management :
PM> update-database -context AppIdentityDbContext
Build started...
Build succeeded.
DesignTimeDbContextFactory.Create(string): Connection string: Server=(localdb)\mssqllocaldb;Database=AuthServer;Trusted_Connection=True;MultipleActiveResultSets=true
Applying migration '20190403041320_initial'.
Done.
PM>
La documentation est Ici :
Microsoft EF Core - Migrations
Aaaahhhh c'est la lutte quand même, encore un machin très microsoftien c'est la multiplication des fenêtres d'exécution (des consoles) entre PowerShell Package Management Console ou même Windows Console avec dotnet ...
Ma Base de donnée d'Authentification des Utilisateurs est enfin crée :
PM> cd .\AuthServer.Infrastructure
PM> update-database
Build started...
Build succeeded.
More than one DbContext was found. Specify which one to use. Use the '-Context' parameter for PowerShell commands and the '--context' parameter for dotnet commands.
PM>
Là, on retourne chez l'auteur qui nous dit :
AuthServer.Infrastructure> dotnet ef database update --context AppIdentityDbContext
AuthServer.Infrastructure> dotnet ef database update --context PersistedGrantDbContext
et que l'on va traduire par la commande suivante dans la Console Package Management :
PM> update-database -context AppIdentityDbContext
Build started...
Build succeeded.
DesignTimeDbContextFactory.Create(string): Connection string: Server=(localdb)\mssqllocaldb;Database=AuthServer;Trusted_Connection=True;MultipleActiveResultSets=true
Applying migration '20190403041320_initial'.
Done.
PM>
La documentation est Ici :
Microsoft EF Core - Migrations
Aaaahhhh c'est la lutte quand même, encore un machin très microsoftien c'est la multiplication des fenêtres d'exécution (des consoles) entre PowerShell Package Management Console ou même Windows Console avec dotnet ...
Ma Base de donnée d'Authentification des Utilisateurs est enfin crée :
 |
| ASP.NET Core DB - Base d'Authentification des utilisateurs |
Il ne faut pas oublier d'exécuter la deuxième commande :
PM> update-database -context PersistedGrantDbContext
Et pour le message :
Method not found: 'Microsoft.EntityFrameworkCore.Metadata.Builders.IndexBuilder Microsoft.EntityFrameworkCore.Metadata.Builders.EntityTypeBuilder`1.HasIndex(System.Linq.Expressions.Expression`1<System.Func`2<!0,System.Object>>)'.
La solution préconisée est Ici.
C'est de bien mettre à jour tous vos projets en vous assurant qu'ils utilisent la même version de IdentityServer ... Sinon, Beug !
PM> update-database -context PersistedGrantDbContext
Build started...
Build succeeded.
Microsoft.EntityFrameworkCore.Infrastructure[10403]
Entity Framework Core 3.1.2 initialized 'PersistedGrantDbContext' using provider 'Microsoft.EntityFrameworkCore.SqlServer' with options: None
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (26ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT 1
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (22ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT OBJECT_ID(N'[__EFMigrationsHistory]');
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (1ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT 1
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (0ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT OBJECT_ID(N'[__EFMigrationsHistory]');
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (2ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT [MigrationId], [ProductVersion]
FROM [__EFMigrationsHistory]
ORDER BY [MigrationId];
Microsoft.EntityFrameworkCore.Migrations[20405]
No migrations were applied. The database is already up to date.
No migrations were applied. The database is already up to date.
Done.
PM>
Voilà pour la partie, Serveur d'Authentification.
\Visual Studio 2019\Samples\AngularASPNETCoreOAuth\src\Spa\oauth-client
Et je viens exécuter la commande dans un Terminal :
PM> update-database -context PersistedGrantDbContext
Et pour le message :
Method not found: 'Microsoft.EntityFrameworkCore.Metadata.Builders.IndexBuilder Microsoft.EntityFrameworkCore.Metadata.Builders.EntityTypeBuilder`1.HasIndex(System.Linq.Expressions.Expression`1<System.Func`2<!0,System.Object>>)'.
La solution préconisée est Ici.
C'est de bien mettre à jour tous vos projets en vous assurant qu'ils utilisent la même version de IdentityServer ... Sinon, Beug !
PM> update-database -context PersistedGrantDbContext
Build started...
Build succeeded.
Microsoft.EntityFrameworkCore.Infrastructure[10403]
Entity Framework Core 3.1.2 initialized 'PersistedGrantDbContext' using provider 'Microsoft.EntityFrameworkCore.SqlServer' with options: None
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (26ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT 1
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (22ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT OBJECT_ID(N'[__EFMigrationsHistory]');
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (1ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT 1
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (0ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT OBJECT_ID(N'[__EFMigrationsHistory]');
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (2ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT [MigrationId], [ProductVersion]
FROM [__EFMigrationsHistory]
ORDER BY [MigrationId];
Microsoft.EntityFrameworkCore.Migrations[20405]
No migrations were applied. The database is already up to date.
No migrations were applied. The database is already up to date.
Done.
PM>
Voilà pour la partie, Serveur d'Authentification.
Authentification - Partie cliente avec Angular
Cette fois, je prends mon Visual Studio Code et je viens ouvrir le répertoire :\Visual Studio 2019\Samples\AngularASPNETCoreOAuth\src\Spa\oauth-client
Et je viens exécuter la commande dans un Terminal :
 |
| Client Angular - Visual Studio Core pour l'install de Angular/CLI |
Je dois installer Angular CLI pour mon application cliente :
PS : \AngularASPNETCoreOAuth\src\Spa\oauth-client> ng install @angular/cli
Pour rappel l'installation d'Angular CLI se distingue par l'existence du répertoire :
\AngularASPNETCoreOAuth\src\Spa\oauth-client\node_modules\@angular
Une fois Angular/CLI installé, je peux lancer la compilation de mon application Angular :
PS : \AngularASPNETCoreOAuth\src\Spa\oauth-client> ng serve
N'oubliez pas de modifier le port de communication proposé par défaut pour une application web : 8080 par le port 4200 pour les applications Web Angular.
PS : \AngularASPNETCoreOAuth\src\Spa\oauth-client> ng install @angular/cli
Pour rappel l'installation d'Angular CLI se distingue par l'existence du répertoire :
\AngularASPNETCoreOAuth\src\Spa\oauth-client\node_modules\@angular
Une fois Angular/CLI installé, je peux lancer la compilation de mon application Angular :
PS : \AngularASPNETCoreOAuth\src\Spa\oauth-client> ng serve
Exécution en mode Debug de la partie Angular
Il me faut créer un fichier de configuration de l'exécution du mode Debug :
 |
| Angular Run en mode Debug |
N'oubliez pas de modifier le port de communication proposé par défaut pour une application web : 8080 par le port 4200 pour les applications Web Angular.
 |
| Angular Run en mode Debug |
Vous pouvez enfin cliquer sur le petit triangle vert et obtenir le résultat suivant en exécutant la partie cliente SPA (Single Page Application) :
Je me "Signup" avec un UserName : "aaa", je me Login et j'obtiens l'accès à la "Top Secret Area" :
 |
| Angular Authentification sur un Serveur ASP.NET Core avec IdentityServer |
Je me "Signup" avec un UserName : "aaa", je me Login et j'obtiens l'accès à la "Top Secret Area" :
 |
| Angular Authentification sur un Serveur ASP.NET Core avec IdentityServer - Top Secret Area |
Voilà, il est vraiment super cet exemple et très complet et mériterait un bisou sauf que nous sommes en période de Corona.
Thank you very much Mark Macneil
Mais vous l'avez vu pour aller au bout de cette application ,il y a plein de pièges que j'ai déjoués pour nous alors n'hésitez pas à cliquer partout, à commenter, à compléter.
La prochaine fois nous verrons comment ajouter des données autour de "MemberIdentity" car moi j'aimerais bien savoir où il habite mon utilisateur ;-)
Let's go to the beach!
Ah non, mince, c'est Corona, Grrrrr.
Je vous propose de poursuivre cette exploration des Bases de Données d'Authentification dans ASP.NET C# car cela concerne plus les applications Web.
ASP.NET Core comparaison des structures des Bases de données IdentityServer
Thank you very much Mark Macneil
Mais vous l'avez vu pour aller au bout de cette application ,il y a plein de pièges que j'ai déjoués pour nous alors n'hésitez pas à cliquer partout, à commenter, à compléter.
La prochaine fois nous verrons comment ajouter des données autour de "MemberIdentity" car moi j'aimerais bien savoir où il habite mon utilisateur ;-)
Let's go to the beach!
Ah non, mince, c'est Corona, Grrrrr.
Je vous propose de poursuivre cette exploration des Bases de Données d'Authentification dans ASP.NET C# car cela concerne plus les applications Web.
ASP.NET Core comparaison des structures des Bases de données IdentityServer
Aucun commentaire:
Enregistrer un commentaire
Pour plus d'interactivité, n'hésitez pas à laisser votre commentaire.