lundi 30 mars 2020

ASP.NET Core & EF & IdentityServer & Angular

Voici la stack que je souhaite intégrer dans mon projet. L'important c'est d'aller directement au but nous avons sur ces sujets pléthore de documentation alors comment trouver les bonnes pages pour implémenter directement la solution.

Voici certainement la page la plus importante, ici on vous parle directement d'IdentityServer :

MSDN - ASP.NET Core -  Authentification et autorisation pour SPAs

Et je vous donne également les deux pages de la documentation d'IdentityServer :

IdentityServer4 - Using EntityFramework Core for configuration and operational data

Il faut exécuter le l'IdentityServer avant le client MvcClient, une petite astuce dont je viens de me rappeler : Bouton Droit sur la Solution -> Properties et là on utilise les possibilités de Multiple startup projects pour lancer tous ces projets d'un seul clique.


Visual Studio with IdentitytServer - Start multiples projects
Visual Studio with IdentitytServer - Start multiples projects

IdentityServer4 - Using ASP.NET Core Identity

Je vous rappelle que notre objectif est d'ajouter à tout ça un peu de données utilisateur, comme son adresse, son âge (avec son consentement bien sûr). Aussi je pense qu'il est utile de regarder par ici :

Deblokt - 05. IdentityServer4 Adding custom properties to User .NET Core 3.1

Et là nous avons tout ce qu'il faut pour faire une bonne intégration des Technologies ASP.NET Core & EntityFramework & IndentityServer avec Identity (de base) & une application cliente Angular.

Configuration du Template ASP.NET Core EF Angular

A partir de la base de données Identity qui nous est donnée dans le Template que faut-il pour aller authentifier une application Angular.


ASPNETDB - Core Identity DataBase

Il faut obtenir la structure suivante pour travailler avec IdentityServer4 :

ASPNETDB - Core IdentityServer DataBase

CQFD !







mardi 24 mars 2020

ASP.NET Core comparaison des structures des Bases de données avec IdentityServer

Sur quoi doit-on baser l'authentification d'une application web ASP.NET Core ? Quelle structure pour la base de données AspNet ? C'est un vieux sujet, remis au gout du jour par le développement des nouvelles applications ASP.NET Core. Ce sujet est vieux comme les applications web mais nous devons adapter les anciennes structures aux nouvelles possibilités de connexions.

Quand j'instancie une Application Templates ASP.NET Core Authentification :

ASP.NET Core MVC Authentification by Individual User Accounts
ASP.NET Core MVC Authentification by Individual User Accounts 

Qu'est ce que j'ai en définitive ?


ASP.NET Core MVC Authentification by Individual User Accounts
ASP.NET Core MVC Authentification by Individual User Accounts 
Je trouve curieux, j'exécute l'application, je cherche à me m'enregistrer on me dit Register mais je ne trouve pas cette page, ni cette vue :


ASP.NET Core Individual Authenification
ASP.NET Core Individual Authenification
Après je m'attèle à un peu de lecture ici :

INFINITES BLOGS - Implémenter IdentityServer 4 dans une application ASP.NET Core 2.2

Et de mon côté, je vous donne la structure de la BD que j'ai trouvé sur un exemple probant d'implémentation d'IdentityServer :

https://github.com/Deblokt/IdentityServer4Demos.NETCore31


Structure de la Base de Données pour une Application IdentityServer

Manifestement ce projet est issu de IdentityServer

IdentityServer - The Identity and Access Control solution that works for you

Plutôt complet, non ? Trop peut être comment faire que choisir quelle structure pour ce que je veux faire ...

Je poursuis la découverte de mon exemple Template de base car j'aime bien connaitre déjà ce que l'on nous propose comme standard.

Je déroule le processus d'enregistrement car je sais que c'est à ce moment que la Base de Données d'Indentification est créée et cette BD n'est pas encore créée sur ma machine de développement.

Apply Migrations

L'application me propose un bouton Apply Migrations qui avec un peu de code, va tout faire ...


Migration Applied
Migration Applied
Et ensuite, je suis Welcome dans l'application avec la possibilité de confirmer mon compte.

Confirmer mon enregistrement
Je prends note de tout ça car c'est drôlement bien fait ! Presque fascinant pour une dev comme moi qui est vécu les premières version d'ASP.NET et quand je pense au boulot et au code qu'il fallait mettre en œuvre à l'époque.

Alors que là, tout est à portée de clique.


Welcome Home sweet home
Welcome Home sweet home

Voilà la structure de la base qui a été créée :

ASP.NET Core Identity
Et nous n'avons pas encore intégré IndentityServer dans ce projet. Pour poursuivre je propose de regarder du côté du Scaffolding mais qu'est ce que c'est que ça ?

Et bien avec mon Visual Studio je fais bouton droit au niveau du projet :

Projet->bouton droit->Add->New Scaffolded Item ...


Projet->bouton droit->Add->New Scaffolded Item ...
Projet->bouton droit->Add->New Scaffolded Item ...
New Scaffolded Item -> Identity


New Scaffolded Item -> Identity
New Scaffolded Item -> Identity
Et là, un monde s'ouvre à vous ...


Scaffolded Identity
Scaffolded Identity
Je choisi simplement Account\Register alors que je pensais que j'étais déjà passé par cette page car je me suis enregistré donc où était le formulaire d'enregistrement dans l'application... Je trouve cela pour le moins Curieux.


Data context class
Data context class
Je fais les choix suivants pour le Data Context et la User Class

Ajouter une légende
Avec tout ça, qu'est ce j'ai ... Avant toute cette opération j'ai eu le bon goût de sauvegarder une version de référence pour voir ce que Visual Studio Template à créé dans ma nouvelle application. C'est une méthode que vous pouvez employer lorsque vous travaillez avec Visual Studio Template de garde une référence.

C'est très enrichissant de pouvoir constater, observer ce que Visual a créé pour nous. Je vous le livre tel quel mais sachez que c'est une bonne façon de travailler. Il faut bien connaitre le Template c'est une façon de se faire une culture des références pour aller regarder ce que les autres ont fait.


Item Sacffolded -> Account\Register
Item Sacffolded -> Account\Register
Alors me direz-vous, que vient faire IdentityServer là dedans et bien ce sera le sujet du prochain post ... Identity vs IndentityServer.

Un peu de lecture sur ce sujet :

StackOverflow - .NET Core IndentityServer4 vs Indentity Authentification
Alors qu'en fait la question n'est pas de les comparer car Identity c'est tout simplement une table de Users alors qu'IdentityServer est un système bien plus large permettant l'authentification et l'autorisation de multiples applications accédant à de multiple APIs.

MSDN - Authentication and authorization for SPAs
Authentication and authorization for SPAs (Single Page Application) ASP.NET Core Identity for authenticating and storing users is combined with IdentityServer for implementing Open ID Connect.

Ici les deux sont combinés.

To Be Co



lundi 16 mars 2020

Authentification dans les Applications ASP.NET Core & Angular

C'est très important pour une Application Web d'intégrer le bon module d'authentification. Toute Application Web est destinée à être installée en ligne et à permettre aux utilisateurs de venir se connecter, créer un profile et gérer ce profile qui leur donnera accès aux différentes partie de l'application auxquelles ils seront autorisés.

C'est l'objectif fonctionnel du LoginModule à l'époque (mais aucune trace du LoginModule mabyre n'a pas souhaité la sauvegarder car c'est obsolète) aujourd'hui je vais actualiser mes connaissances en utilisant ASP.NET Core et Angular. Pour ce faire, facile je pars du Template d'application proposé par Visual Studio et je regarde la partie Authentification.

Microsoft - Facebook, Google, and external provider authentication in ASP.NET Core
Ce didacticiel montre comment créer une application ASP.NET Core 3.0 qui permet aux utilisateurs de se connecter à l'aide d'OAuth 2.0 avec des informations d'identification de fournisseurs d'authentification externes.

Voilà le mot clef que l'on retrouve asse souvent maintenant c'est OAuth. C'est assez énorme et c'est cela qu'il faut utiliser.

Alors je créé une application Web ASP.NET Core 3.0 & Angular j'exécute et je me retrouve que la page d'enregistrement d'un nouvel utilisateur :


Authentification avec ASP.NET Core & Angular

Tout est là pour m'enregistrer et accéder aux pages réservées de cette application que j'ai appelé WebApplicationAuthen.

Je m'enregistre et j'accède à la prochaine page, celle qui est authorisée aux utilisateurs authentifiés :


Authentification avec ASP.NET Core & Angular - Enregistrement
Je vous livre mes impressions, franchement c'est super bien fait ! Il y a tout et le tout en TypeScript avec Angular. Je vais donc lire la doc pour installer un "server de mail" afin de l'utiliser pour la confirmation d'enregistrement :

Microsoft.NET - Account confirmation and password recovery in ASP.NET Core

Je clique sur la confirmation pour confirmer la création de mon compte et me voici authentifié :

Authentification avec ASP.NET Core & Angular - Authentification

Savoir où est la base de données ?

Je cherche la chaine de connexion dans :

WebApplicationAuthen\WebApplicationAuthen\appsettings.json

"ConnectionStrings": {
 "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-WebApplicationAuthen-53bc9b9d-9d6a-45d4-8429-2a2761773502;Trusted_Connection=True;MultipleActiveResultSets=true"
 },

Pour avoir un vue du mssqllocaldb avec Visual Studio je dois aller dans :


Visual Studio - SQL Server Object Explorer - Où est la base ?
Et puis je fais bouton droit propriété :


Visual Studio - SQL Server Object Explorer - Où est la base ?
Pour me rendre compte que la base est dans le répertoire :

C:\Users\UserName\aspnet-WebApplicationAuthen-53bc9b9d-9d6a-45d4-8429-2a2761773502.mdf

Pour une clef dans le nom de la base ? Pour des raisons de sécurité ainsi son nom est moins facile à deviner.

Que trouve t-on dans cette base ?

Des Tables bien sûr, les suivantes :

AspNetRoleClaims
AspNetRoles
AspNetRoleUserClaims
AspNetRoleUserLogins
AspNetRoleUserRoles
AspNetRoleUsers


SQL Server ASPNET DB Tables
Voilà la bonne surprise est que tout cela n'est que du classique de l'ASP.NET DB de l'époque des premières versions ASPX  ou l'on a toutes les applications pour créer des groupes d'authentification de pouvoir ajouter des Users dans ces groupes ou de les retirer afin d'attribuer des rôles ou de les retirer.

CQFD !

mardi 3 mars 2020

Chart.js vs ngx-charts quelle solution pour quelle utilisation ?

C'est la question que je souhaite me poser ce matin en effet. Je souhaite intégrer dans mon  application les composants les plus facile à utiliser, les plus jolis, les meilleurs, les mieux ... etc.

Je trouve d'abord ce site de comparaison de tous les "packages" npm trends", trend comme trenddy "à la mode"  :


https://www.npmtrends.com/angular-chart.js-vs-ngx-charts
npm trends angular-chart.js vs ngx-charts
Un fantastique effet Whaoooouuuu. Voici un site qui vous donne l'occasion de comparer les téléchargements les différents npm ou packages.

Alors, je peux comparer le nombre de téléchargements :


https://www.npmtrends.com/angular-chart.js-vs-ngx-charts-vs-ng2-charts-vs-chart.js
npm trend angular-chart.js vs ngx-charts vs ng2-charts vs chart.js
Mais le succès d'un package en terme de nombre de téléchargements n'est pas forcément le seul critère de qualité.

Pour l'instant mon choix se fixe sur Chart.js c'est une librairie facile d'accès facile à intégrer. Il me semble que pour aller beaucoup plus loin il y a "d3". Il sera toujours temps d'intégrer cette librairie.

Voici donc Chart.js


https://www.chartjs.org/
Chart.js
To Be Continued