lundi 25 mai 2020

Migration angular 7 vers angular 8

A votre avis est-ce facile de migrer de Angular 7 vers Angular 8, je vais m'atteler à cette tâche pour découvrir toutes les subtilités d'Angular et migrer mon application en Angular 8, allant de l'avant vers la modernité.

Angular
Angular
Bien sûr tout le monde connait le guide de migration qui soit disant permet de migrer n'importe quelle application d'une version d'Angular vers un autre. Je vous présente, roulements de tambours le guide de migration de toutes les versions d'angular vers toutes les autres ...


https://update.angular.io/
Guide de migration Angular

Encore qu'après quelques manipulation et un peu de lecture, on comprend que cela ne va pas être si facile.

Tout dépend de votre application actuelle en Angular 7 est-elle au goût du jour ou avez vous attendu trop longtemps.

jeudi 21 mai 2020

Refused to frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

Alors j'ai lu tellement de bêtises sur cette erreur et c'est normal car il faut la recontextualiser. Il s'agit de l'exécution d'une application cliente Angular qui essaye de connecter à un serveur StsIdentity et au moment d'initier la procédure de Login, votre Visual Studio Code vous crache cette erreur en rouge.

Refused to frame 'https://localhost:xxxxx/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

La solution se trouve dans le fichier Startup.cs de votre exemplaire de l'IdentityServer, il faut ajouter les quelques lignes suivantes :

app.UseCsp( opts => opts
                .BlockAllMixedContent()
                .StyleSources( s => s.Self() )
                .StyleSources( s => s.UnsafeInline() )
                .FontSources( s => s.Self() )
                // BRY_20200519 .FrameAncestors( s => s.Self() )
                .FrameAncestors( s => s.CustomSources(
                        angularClientUrl, "https://localhost:4200"
                    )
                )
                .ImageSources( imageSrc => imageSrc.Self() )
                .ImageSources( imageSrc => imageSrc.CustomSources( "data:" ) )
                .ScriptSources( s => s.Self() )
                .ScriptSources( s => s.UnsafeInline() )
            );

Si cette solution vous est utile, n'hésitez pas cliquer partout sur les sponsors, c'est comme cela que nous existons.
That's All Folks!

mardi 19 mai 2020

Migration ASP.NET Core 2.2 vers ASP.NET Core 3.1

Authentification avec les Applications ASP.NET Core 2.2 Impossible ... étonnant non ? Lors de la création d'un nouveau projet ASP.NET Core avec Visual Studio 2019 je constate que si je choisi le .NET Core 2.2 je ne peux pas faire d'authentification.

Je trouve ce quelque chose assez incroyable, si je choisie 2.2 je peux pas faire d'authentification.

Authentification avec ASP.NET Core 2.2 Impossible

Alors que si je choisie le ASP.NET Core 3.1 je peux :

Authentification avec ASP.NET Core 3.1
Bon du coup, voici le manuel de migration mais est possible de l'appliquer ?

Microsoft - Migrate from ASP.NET Core 2.2 to 3.0

Et à votre avis la Migration de ASP.NET Core 3.0 à ASP.NET Core 3.1 c'est diffcile ?

Microsoft - Migrate from ASP.NET Core 3.0 to 3.1

Aaaahhh non, de tous petits détails. Car vous avez remarqué que l'on ne peut pas créer des applications ASP.NET Core 3.0 ! :

Authentification avec ASP.NET Core 3.1
Ca parait bien sombre tout cela on dirait que les développement ayant opté pour ASP.NET Core 2.2 ne peuvent pas facilement passer à ASP.NET Core 3.1.

En tous cas, il faut le faire en deux étapes ...

A méditer !

mercredi 22 avril 2020

Can't access to localhost - localhost sent an invalid response.

Vous ne pouvez plus accéder à localhost ! J'ai lu tellement de mauvaises réponses avec des histoires de proxy, de configuration, des gens qui lancent même la commande : "netstat -a" pour savoir quels sont les ports ouverts sur leur machine.

J'ai encore ce problème aujourd'hui, alors je me sens un peu obligé de vous donner la réponse ici car c'est un problème du navigateur de Chrome en particulier de cookies précisément et aucunement de configuration de votre réseau.  Vous souriez mais on peut perdre un maximum de temps avec ces bêtises.

Can't access to localhost - localhost ne répond plus !
Can't access to localhost - localhost ne répond plus !

C'est moi qui ai installé une application web derrière localhost donc je sais pertinemment qu'elle devrait me réponse autre chose que "localhost sent invalid response". Je ne vous parle pas du lien  "Try running Windows Network Diagnostic" qui vous fait tomber tout au fond d'un trou noir !

Quand on est développeur, c'est tellement bête de perdre du temps avec ça ! Surtout que de développement d'application web est devenu encore plus tuchy avec l'avènement de Framework Front comme React, Vue ou Angular.

Je cherche à développer une application ASP.NET Core d'authentification des utilisateurs et quand mon processus d'authentification ne réussi pas, je ne peux plus relancer mon client Angular ! Grrr !

Oui, vous avez déjà deviné c'est un problème de cookies un truc parfaitement foireux comme aime bien nous les jeter en pâture Chrome.

Alors comme cela change tout le temps, aujourd'hui dans le Chrome d'aujourd'hui, comment je supprime les cookies liés à ma navigation pour accéder à nouveau à mon application web qui en développement est derrière l'adresse IP 127.0.0.1 ou localhost ?

C'est Ici :

Can't access to localhost - Supprimer les cookies du Navigateur
Can't access to localhost - Supprimer les cookies du Navigateur

Et puis on continue par ici, inutile de modifier les règles de proxy d'autant que cela pourrait être définitif pour votre machine placée dans le Cloud.


Can't access to localhost - Supprimer les cookies du Navigateur
Can't access to localhost - Supprimer les cookies du Navigateur

Et je continue par ici pour atteindre enfin ce que je cherche, supprimer les cookies.


Can't access to localhost - Supprimer les cookies du Navigateur
 
Je vois au passage que je peux supprimer trois type de données, l'historique de navigation, les cookies et les données de site, et les images et fichiers en cache.

Je suis en développement, je peux tout supprimer. Sur votre ordinateur personnel de maison, je ne vous conseille pas de le faire la même chose, vous devriez alors vous "reconnecter" à tous les sites que vous utilisez.

Voilà, c'est sûr que je ne vais pas faire cela à chaque fois que je rate ma connexion à localhost, il va falloir que mon code le fasse correctement, le plus rapidement possible.

J'ai pris une petite note pour le futur, je vous fiche mon billet que tout aura changé dans quelques mois, à savoir même si on aura encore le droit de supprimer nos "données de navigation".

Pour être complet je dois ajouter quelque chose : ATTENTION TIME RANGE

Je viens de commettre un erreur, j'ai planté le processus d'authentification de mon utilisateur et puis je suis parti déjeuner. Quand je reprends, impossible : localhost sent invalid response ! Même en supprimant les données de navigation.

Attention cela faisait plus d'une heure que j'étais parti du coup il en faut pas oublier le Time Range :
localhost sent invalid response - Time Range peut jouer des tours

Voilà cette fois j'espère que je n'aurais plus jamais à y revenir.

Have fun! (Ah non merde y'a confinement Grrr)

vendredi 3 avril 2020

ASP.NET DB for ASP.NET Core Indentity

Pour gérer ma communauté d'utilisateurs, c'est  à dire gérer les données des utilisateurs qui vont venir s'identifier au sein de mon application Web ASP.NET Core, j'ai besoin de mieux connaitre l'Identity Data Management.

Le Scaffolding et les Projects Template m'ont déjà appris un tas de choses mais maintenant je souhaite aller plus loin. Afin d'avoir un vrai système de gestion des utilisateurs.

Structure de la Base de Données AspNet

Voici les tables qui sont créés par défaut :


AspNetDB - Tables créés par défaut
AspNetDB - Tables créés par défaut
Dans la table AspNetUsers à quoi sert le champ LockoutEnable ?

Docs  .NET API Browser  Microsoft.AspNetCore.Identity  IdentityUser

C'est tout un bordel cela ne vous est jamais arrivé de devoir vous connecter sur site Microsoft un peu tuchy si vous ratez votre connexion le site vous répondez que vous ne pouvez plus vous connecter et qu'il faudra recommencer dans 30 minutes et si vous ratez encore il vous faudra attendre une heure et bien c'est la gestion de tout cela.

En fait cela sert à protéger votre site des robots ou de certains qui voudrait attaquer votre site par déni de service.

User IsEnable False

Si je souhaite pouvoir disabler mon utilisateur, c'est arrivé parois. Un utilisateur que ne veut plus payer son abonnement mais qui continue d'utiliser la plateforme.

Et bien c'est assez différent du MemberShip Provider où tout ceci était déjà prévu. Avec ASP.NET Core vous pouvez l'ajouter "à la main" dans

public class ApplicationUser : IdentityUser
{

    public bool? IsEnabled { get; set; } 

Dans : \Areas\Identity\Pages\Account\Register.cshtml.cs

var user = new ApplicationUser
{
    ...
    IsEnabled = true
};


Et dans \Areas\Identity\Pages\Account\Login.cshtml.cs

public async Task<IActionResult> OnPostAsync( string returnUrl = null )
{
    returnUrl = returnUrl ?? Url.Content( "~/" );

    if ( ModelState.IsValid )
    {
         // Manage User IsEnable
         var user = _userManager.FindByEmailAsync( Input.Email ).Result;
     if ( user.IsEnabled.HasValue && user.IsEnabled == false )
     {
           _logger.LogWarning( "User account has been disabled by admin." );
          return RedirectToPage( "./Lockout" );
     }


Si l'utilisateur est Disablé, il sera redirigé vers la page Lockout le message ne sera pas très explicite pour lui mais il faudrait scaffolder la page Lockout pour délivrer un message plus explicite ... si vous avez le temps ...

Mais du coup, si je disable mon utilisateur, il ne pourra plus venir dans la plateforme et donc ne pourra plus supprimer ses données personnelles ce qui est quelque peu en désaccord avec les nouvelles dispositions sur la gestion des données personnelles.

Et je pense que c'est la raison pour laquelle ce mécanisme qui était intégré ne l'est plus.

To Be Continued!

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




jeudi 20 février 2020

ASP.NET Core & Angular StarterKit

Le Template de projet instancié à partir de Visual Studio Community 2019 est assez évolué, l'objet de ce post est d'expliquer comment ajouter rapidement "un module", une page qui permettent de faire des tests simples et de créer une "étape d'intégration" afin d'intégrer un module un ensemble de fonctionnalités à un projet plus vaste.

C'est ainsi que l'on doit procéder pour garder une trace des interdépendances des différents modules de votre logiciel afin de garantir une traçabilité des étapes d'intégration.


Respecter les étapes d'intégration - Editeur de logiciels
Respecter les étapes d'intégration - Editeur de logiciels

Créer un projet étape d'intégration un StarterKit

J'ai donc instancié un projet ASP.NET Core & Angular :

ASP.NET Core & Angular StarterKit
ASP.NET Core & Angular StarterKit
Et je souhaite ajouter rapidement une nouvelle page.

Ajouter un nouveau component Angular

Je me souvenais de la commande :

>ng generate component builder-dnd

Je souhaite appeler mon composant "builder-dnd" ... je lance la commande mais rien d'y fait :

More than one module matches. Use skip-import option to skip importing the component into the closest module.

On me répond que la commande c'est :

>ng g c new-component --module app

Ah ben ça a du changer alors ! JE suis dans le répre

>ng generate component builder-dnd --module app

CREATE src/builder-dnd/builder-dnd.component.html (26 bytes)
CREATE src/builder-dnd/builder-dnd.component.spec.ts (657 bytes)
CREATE src/builder-dnd/builder-dnd.component.ts (288 bytes)
CREATE src/builder-dnd/builder-dnd.component.css (0 bytes)
UPDATE src/app/app.module.ts (1665 bytes)

bon ... passons. Finalement component module il faudra chercher la différence. Finalement ce n'est pas ça que je veux. Je me retrouve à supprimer ce module "à la main". GRrrr, ARrrrGGG, Au secours.

Angular - CLI Overview and Command Reference

Finalement on en revient toujours là. Finalement, je me suis placé dans le répertoire app et j'ai balancer la même commande :

>ng generate component builder-dnd --module app

En croisant les doigts très fort pour qu'il me fasse ce que je souhaitais.

CREATE src/app/builder-dnd/builder-dnd.component.html (26 bytes)
CREATE src/app/builder-dnd/builder-dnd.component.spec.ts (657 bytes)
CREATE src/app/builder-dnd/builder-dnd.component.ts (288 bytes)
CREATE src/app/builder-dnd/builder-dnd.component.css (0 bytes)
UPDATE src/app/app.module.ts (1664 bytes)

Cette fois, ce fut la bonne, c'est bête non.

Connecter mon nouveau composant

Je vais dans :

\ClientApp\src\app\nav-menu\nav-menu.component.html

Ajouter :

<li class="nav-item" [routerLinkActive]="['link-active']">
  <a class="nav-link text-dark" [routerLink]="['/builder-dnd']">Builder</a>
</li>

Dans :

\ClientApp\src\app\app.module.ts

J'ajoute :

RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },{ path: 'builder-dnd', component: BuilderDndComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthorizeGuard] }, ])
 
Et mon nouveau module est connecté :


ASP.NETCore & Angular StarterKit
ASP.NETCore & Angular StarterKit
C'est un peu laborieux mais ça y est ! J'ai une nouvelle page vierge dans laquelle je vais pouvoir intégrer le package :

npm - @swimlane/ngx-dnd


https://www.npmjs.com/package/@swimlane/ngx-dnd
npm - @swimlane/ngx-dnd

Et obtenir le résultat suivant en intégrant ce package dans mon StarterKit :


ASP.NET Core & Angular StarterKit - swimlane Drag and Drop package.

ASP.NET Core & Angular StarterKit Conclusion

C'est à ça que sert un "Starter Kit" un kit de démarrage dans une techno afin de vérifier la validité d'une intégration. Assurer l'intégrabilité d'un solution, être sûr que l'on va pouvoir ajouter cette fonctionnalité au projet en cours. Pour ça, il faut réaliser des étapes d'intégration. Toutes les méthodologies sont bonnes, dès lors qu'elles permettent le travail organisé, en groupe.

Trop de Développeurs et je ne parle même pas des Product owner, ont oublié d'effectuer le découpage du projet en étapes d'intégration distinctes les unes des autres, afin de bien maitriser ce qui correspond à un ensemble de fonctionnalités et ce qui n'en fait pas partie.

Trop de clients, trop de projets ont perdu leur Starter Kit ou n'ont même pas effectué d'étapes d'intégration ou bien les ont perdues et lorsqu'il s'agit d'intégrer un nouvel ensemble de fonctionnalités, comme un package de DragAndDrop, par exemple, ils intègrent directement dans le projet final. Le développeur se perd alors et mets un temps infini à s'en sortir car tout est mélangé dans un indigeste plat de spaghettis.

C'est aussi ça être un véritable éditeur de logiciels.



Intégrer le module @swimlane/ngx-dnd dans une application ASP.NET Core & Angular

J'ai quelques déboires à intégrer ce module dans un projet plus important. J'ai récupéré les sources depuis le github :  Swimlane/ngx-dnd

J'ai suivi les instructions du site :

Swimlane/ngx-dnd - Instructions
Swimlane/ngx-dnd - Instructions

Le module fonctionne, avec mon Visual Studio Code je suis allé lancer les commandes Angular/CLI qui vont bien.

Swinlane exécution du module ngx-dnd
Je launch mon chrome et j'obtiens l'exécution du module : Je peux construire ma Target en drag and droppant les Sources.


Exécution du module ngx-dnd sur ma machine de développement
Exécution du module ngx-dnd sur ma machine de développement
Mais quand j'essaye d'intégrer ce module dans un autre projet alors c'est la catastrophe ! Je tire les fils des dépendances de ce module et tout vient avec au bout du compte cela ne fonctionne pas.

Le module ngx-dnd n'est pas assez isolé de tout le fatras de code de Swinlane (framework) si je regarde un instant dans le répertoire :

ngx-dnd-master\node_modules\@swimlane

Voici les module installés :
  • docspa-core
  • docspa-remark-preset
  • dragula
  • ngx-dnd
  • prettier-config-swimlane
docspa-core est un module intéressant qui permet de transformer du "MarkDown" en html ... mais c'est à la sauce Swinlane, moi je ne veux pas de cela dans mon projet.

Alors je vais voir si je peux intégrer ce module dans une application "standard" ASP.NET Core & Angular.

To Be Continued !



mardi 18 février 2020

Http failure response for (unknown url): 0 Unknown Error : [object ProgressEvent]

Je cherche à corriger cette erreur : Http failure response for (unknown url): 0 Unknown Error : [object ProgressEvent] dans mon application ASP.NET Core & Angular et je tombe sur Stackoverflow :

stackoverflow - I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular

Alors comme personne n'a la bonne réponse à cette erreur : Http failure response for (unknown url) et bien je m'en vais vous la donner.


Http failure response for (unknown url): 0 Unknown Error
Http failure response for (unknown url): 0 Unknown Error

Alors qu'ai-je fait pour autant de haine et je ne trouve pas de réponse !
Et pourtant c'est tout simple, dans la barre d'URL j'ai mis le port à 8400, je ne sais pas pourquoi j'ai eu envie de modifier cette donnée pour voir et c'est ce qui a généré cette erreur, il n'y a plus de données dans mon application ASP.NET Core & Angular. Entity Framework Core ne peut plus me délivrer de données.


Corrigez l'erreur : Http failure response for (unknown url): 0 Unknown Error
Si je remets par exemple une url avec un port à 65631 et bien mon application fonctionne à nouveau. Grrrrrr !

Je tâcherai de trouver une explication plus rationnelle une autre fois ...

jeudi 16 janvier 2020

ASP.NET Core - Authentification avec Angular

Regardons un peu ce que nous propose le Template de Visual Studio en matière d'authentification pour les applications ASP.NET Core & Angular. Je me souviens qu'avec ASP.NET Core 2.2 il n'y a pas moyen de changer on est obligé de choisir l'option "No Authentification".

Comparons les deux version d'ASP.NET Core :

ASP.NET Core 2.2

Avec ASP.NET Core 2.2 - No Authentification
Avec ASP.NET Core 2.2 - No Authentification
Avec ASP.NET Core 3.0


ASP.NET Core 3.0 - Change Authentification
ASP.NET Core 3.0 - Change Authentification
Je clique sur Change Authentification :

ASP.NET Core 3.0 - Options pour l'Authentification
Learn more about third-party open source authentification

ASP.NET Core & Angular & Authentification

Voici les fichiers créés par le Template :


src/api-athorization
src/api-athorization
Voilà, toute la structure de l'application en TypeScript concernant l'authentification dans les applications ASP.NET Core & Angular est là.

Microsoft - Authentification et autorisation pour SPAs

Le lien plus haut nous donne accès aux parties tierces fournisseurs de services d'authentification.

Exécution de l'application ASP.NET Core 3.0

Je lance l'exécution de mon application :


Template d'application ASP.NET Core 3.0 avec Authentification
Template d'application ASP.NET Core 3.0 avec Authentification
Et ce qui m'intéresse c'est de pouvoir me Logger :

ASP.NET Core 3.0 - Register a new User
ASP.NET Core 3.0 - Register a new User
On ne peut pas dire que le formulaire de "Log in" soit de plus fun mais il y a l'essentiel je note la fonctionnalité "Forgot your password ?". Et je créé un nouvel utilisateur :


ASP.NET Core 3.0 - Create a new User
ASP.NET Core 3.0 - Create a new User
Là non plus c'est pas des plus fun mais il y l'essentiel.


Ah c'est mots de passe quelle chianlie !


Puis finalement, je peux cliquer sur Register pour créer mon nouvel utilisateur :

ASP.NET Core 3.0 - Création de tout un système d'authentification
ASP.NET Core 3.0 - Création de tout un système d'authentification
Avec ASP.NET Core 3.0, c'est drôlement bien fait, tout est là, la base ASP.NET d'authentification a été crée. Les explications de ce qu'il faut faire pour continuer nous sont données.

Je vous laisse poursuivre la découverte de ce nouveau module que j'identifierai par IdentityServer4, cela me rappelle mes premières applications ASP.NET en 2003 avec mon premier projet dans le CodePlex : "Login Module".

Par la suite, il faut savoir comment séparer votre application métier de toute la mécanique d'authentification.

Have fun!