>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
LoginComponentdamienbod/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 WatmoreAngular 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 :
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 :
Mais tout de suite vous êtes redirigé un ailleurs, vers plus de sécurité, Ici :
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.
Comme le chapitre suivant :
Router tutorial overview |
et de poursuivre un peu plus loin avec le tutorial :
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!