Authentification dans les applications Angular

Tout commence par l'intégration des boutons Signin et Register dans l'application Angular. J'ai créé un template d'application ASP.NET Core Angular par la commande suivante :

>dotnet new angular -o .\AspNetCoreAuthAngular -au Individual

J'étudie deux applications ; mon template et l'application suivante Asp.Net Core & IdentityServer

FullStackMark - User Authentication and Identity with Angular, Asp.Net Core and IdentityServer

Tout commence par le Bouton Login et lui, Mark ne s'embête pas, il le met dans une page tout seul et il s'appelle : Login with IdentityServer

Mais moi, je souhaite utiliser SmartAdmin comme architecture de mon application Angular. Et donc tout là haut, à droite, il y a un bouton SignIn derrière l'icône suivante :

fa-sign-in

C'est là que j'aimerais bien mettre mon code d'authentification. Mais derrière le bouton de Mark, il y a le tag suivant :

<button class="btn btn-lg btn-primary" (click)="login()">Login with IdentityServer</button>

Dans le fichier :

\AngularASPNETCoreOAuth\src\Spa\oauth-client\src\app\account\login\login.component.html

Alors que mon Icône de la SmartAdmin se trouve dans le fichier :

\DataMonitoring\ClientApp\src\app\shared\layout\user\logout\logout.component.html

Pour FullStackMark, j'arrive dans le code TS et je trouve un module 'ngx-spinner' qui est installé dans les node_modules.

Alors c'est quoi le module ngx-spinner ? Juste un module qui permet l'attente, l'attente de la demande d'authentification au Server en assombrissant l'écran.

Authentification dans les applications Angular - SmartAdmin

LoginComponent

damienbod/angular-auth-oidc-client

https://github.com/damienbod/AspNet5IdentityServerAngularImplicitFlow

Et puis il y a un deuxième projet :

IdentityModel/oidc-client-js

Alors c'est lequel le meilleur ?

StsIdentityServer unauthorized_client

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

IdentityServer4 and CORS policy

Partie cliente avec Angular

Le meilleur c'est Jason Watmore

Angular 8 - Tutoriel et exemple sur l'enregistrement et l'authentification des utilisateurs

En fait le FakeBackEnds n'est pas représentatif de la réalité, pas représentatif  de IdentityServer4, par exemple l'authentification se fait en regardant si l'utilisateur et le mot de passe correspondent dans la base de données ... c'est pas super sécur cela ne respecte pas le processus oidc ...

Authentification Guards Angular

Mon sujet est réellement celui là. Avec une présentation complète et bien documentée Ici :

Angular Authentication: Using Route Guards

Mais on va vite vers l'achat du bouquin c'est bien mais je n'ai pas le temps.

• CanActivate
• CanActivateChild
• CanDeactivate
• CanLoad
• Resolve

Et l'article vous redirige vers : Angular Doc ou vous trouverez une définition de tous ces termes. Mais dans la pratique qu'est ce que j'implémente dans mon application angular ?

Alors je poursuis par Ici :

Le Guide Angular Marmicode - Route Guards

Mais tout de suite vous êtes redirigé un ailleurs, vers plus de sécurité, Ici :

Wishtack - API ReST | Bonnes Pratiques et Sécurité

Mais là on s'écarte peut être un peu du sujet en tous cas on élargit avec les API REST. Cet article est une véritable SOMME en matière de présentation de l'authentification dans les réseaux. A lire absolument.

Alors la meilleur façon de faire, c'est de prendre la superbe Documentation Angular et de chercher les bons chapitres.

Router tutorial overview

Comme le chapitre suivant :

Preventing unauthorized access

et de poursuivre un peu plus loin avec le tutorial :

Router tutorial: tour of heroes

et le code source à télécharger

Download source code sample Router

C'est l'exemple parfait extrêmement bien documenté.

Voilà c'est fini, nous savons maintenant comment implémenter les autorisations de navigation au sein de notre application Angular et nous avons trouvé la bonne documentation.

Have fun!