ng update @angular / cli @ angular / core

 "budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

 npm i -g @ angular / cli

 _ _ ____ _ ___
    /  _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ |
   / △  | '_  / _` | | | | | / _` | '__ | | | | | | |
  / ___  | | | | (_ | | | _ | | | (_ | | | | | ___ | | ___ | |
 / _ /  _  _ | | _ |  __, |  __, _ | _ |  __, _ | _ |  ____ | _____ | ___ |
                | ___ /


CLI angulaire: 7.1.0
Node: 11.1.0
OS: darwin x64
Angulaire:
...

Version du package
-------------------------------------------------- ----
@ angular-devkit / architect 0.11.0
@ angular-devkit / core 7.1.0
@ angular-devkit / schematics 7.1.0
@ schematics / angular 7.1.0
@ schematics / update 0.11.0
rxjs 6.3.3
manuscrit 3.1.6

 import {HttpClientModule} de '@ angular / common / http';
importer {OAuthModule} de 'angular-oauth2-oidc';

@NgModule ({
  déclarations: [
    AppComponent
  ],
  importations: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    OAuthModule.forRoot()
  ],
  fournisseurs: [],
  bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

 import {Component} from '@ angular / core';
import {OAuthService, JwksValidationHandler, AuthConfig} de 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  émetteur: 'https: // {yourOktaDomain} / oauth2 / default',
  redirectUri: window.location.origin,
  clientId: '{yourClientId}'
};

@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
classe d'exportation AppComponent {
  title = 'ng-secure';

  constructeur (private oauthService: OAuthService) {
    this.oauthService.configure (authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler ();
    this.oauthService.loadDiscoveryDocumentAndTryLogin ();
  }

  s'identifier() {
    this.oauthService.initImplicitFlow ();
  }

  Connectez - Out() {
    this.oauthService.logOut ();
  }

  obtenir Nommé () {
    const claims = this.oauthService.getIdentityClaims ();
    si (! revendications) {
      return null;
    }
    demandes de retour ['name'];
  }
}

 Bienvenue à {{title}}! [19659048] Bonjour, {{GivenName}}! 
   Déconnexion 

Redémarrez votre application et vous devriez voir un bouton de connexion.

Cliquez sur le bouton de connexion, connectez-vous à votre compte Okta et vous devriez voir votre nom avec un Bouton de déconnexion.

Très chic, hein?

Le SDK angulaire d'Okta

Vous pouvez également utiliser Le SDK angulaire d'Okta pour mettre en œuvre la même fonctionnalité. Vous pouvez commencer par l'installer.

npm i @ okta / okta-angular @ 1.0.7

Modifiez app.module.ts pour configurer vos paramètres Okta et importer le OktaAuthModule .

 import {BrowserModule} depuis '@ angular / platform-browser';
importer {NgModule} de '@ angular / core';
import {AppRoutingModule} depuis './app-routing.module';
importer {AppComponent} depuis './app.component';
import {OktaAuthModule} à partir de '@ okta / okta-angular';

const config = {
  émetteur: 'https: // {yourOktaDomain} / oauth2 / default',
  redirectUri: window.location.origin + '/ implicit / callback',
  clientId: '{yourClientId}'
};

@NgModule ({
  déclarations: [
    AppComponent
  ],
  importations: [
    BrowserModule,
    AppRoutingModule,
    OktaAuthModule.initAuth(config)
  ],
  fournisseurs: [],
  bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

Vous remarquerez peut-être que l'URI de redirection est un peu différent du précédent. Pour que cela fonctionne, vous devez modifier votre application Okta et ajouter http: // localhost: 4200 / implicit / callback en tant qu'URI de redirection de connexion.

Modify src / app / app-routing.ts pour avoir une route pour ce chemin.

 import {OktaCallbackComponent} de '@ okta / okta-angular';

routes const: Routes = [
  {
    path: 'implicit/callback',
    component: OktaCallbackComponent
  }
];

Changement app.component.ts pour utiliser OktaAuthService pour déterminer si l'utilisateur est authentifié.

 import {Component, OnInit} à partir de '@ angular / core';
import {OktaAuthService, UserClaims} de '@ okta / okta-angular';

@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
La classe d'exportation AppComponent implémente OnInit {
  title = 'ng-secure';
  isAuthenticated: booléen;
  email: chaîne;

  constructeur (public oktaAuth: OktaAuthService) {
  }

  async ngOnInit () {
    this.isAuthenticated = attend this.oktaAuth.isAuthenticated ();
    this.user = wait this.oktaAuth.getUser ();
    // Souscrire aux changements d'état d'authentification
    this.oktaAuth. $ authenticationState.subscribe (async (isAuthenticated: boolean) => {
      this.isAuthenticated = isAuthenticated;
      this.user = wait this.oktaAuth.getUser ();
    });
  }
}

Puis mettez à jour app.component.html pour utiliser isAuthenticated et afficher le nom de l'utilisateur.

 Bienvenue à {{title}}! 


  
 Bonjour, {{utilisateur ? .name}}! 
   Déconnexion 



   Connexion 


 

Redémarrez votre application pour pouvoir vous connecter à l'aide du SDK angulaire d'Okta.

Utiliser le flux de code d'autorisation

Un nouveau projet de spécification pour OAuth appelé OAuth 2.0 pour navigateur basé sur le navigateur. Applications . Ceci a été créé par Aaron Parecki d'Okta et contient une clause intéressante .

Le flux d'autorisation d'autorisation implicite OAuth 2.0 (défini à la section 4.2 de OAuth 2.0 [RFC6749]) fonctionne par recevoir un jeton d'accès dans la redirection HTTP (canal avant) immédiatement sans l'étape d'échange de code. Le flux implicite ne peut pas être protégé par PKCE [RFC7636] (obligatoire conformément à la section 6). Par conséquent, les clients et les serveurs d'autorisation NE DOIVENT PAS utiliser le flux implicite pour les applications basées sur un navigateur.

Angular-oauth2-oidc et Okta's Angular Le SDK utilise un flux implicite, pratique acceptée avant la récente discussion dans le projet de spécification d’Aaron. Alors, comment suivez-vous la recommandation d’Aaron et utilisez-vous le flux de code d’autorisation avec PKCE dans votre application Angular? Il y a plusieurs options:

J'ai essayé d'utiliser angular-oauth2-oidc-codeflow avec Okta. J'ai utilisé le code de mon exemple angular-oauth2-oidc ci-dessus et je n'ai trouvé que quelques modifications (après l'avoir installé avec npm i angular-oauth2-oidc-codeflow ):

1. Les importations doivent être de 'angular-oauth2-oidc-codeflow'
2. La méthode login () dans AppComponent doit être modifiée pour utiliser le flux de code d'autorisation.

     login (19659079] ) {
      this.oauthService.initAuthorizationCodeFlow ();
    }

Après avoir apporté ces modifications, j'ai essayé de me connecter à mon application SPA d'origine. L'erreur que j'ai reçue était unsupported_response_type . J'ai essayé de créer une nouvelle application autochtone avec PKCE mais cela a échoué car angular-oauth2-oidc-codeflow n'envoie pas de code code.

Dans mon Création d'une application de bureau avec Electron et authentification j'ai utilisé avec succès AppAuth et PKCE. Cela fonctionne parce qu’il s’agit d’une application de bureau et qu’il n’envoie pas d’en-tête origin . Le point de terminaison de jeton d’Okta n’autorise pas le partage de ressources d’origine croisée (CORS), il ne fonctionnera donc pas dans un client de navigateur.

Nous espérons résoudre ce problème rapidement. Au fur et à mesure que l'industrie évoluera, nous ferons de notre mieux pour tenir nos bibliothèques au courant des meilleures pratiques. En attendant, nous vous recommandons d'utiliser un CSP (politique de sécurité du contenu) pour vous assurer que les scripts tiers n'ont pas accès à votre application Angular.

Voir . Dix excellentes façons de sécuriser votre application Spring Boot . pour voir comment ajouter un CSP avec une botte à ressort.

Vous pouvez également trouver le projet de Micah Silverman PKCE Command Line intéressant.

Limiter l'accès basé sur le groupe pour votre application Angular 7

Si vous souhaitez afficher / masquer les composants de votre application en fonction du groupe d'un utilisateur, vous devez ajouter une revendication «groupes» à votre jeton d'identification. Connectez-vous à votre compte Okta, accédez à API > Authorization Servers cliquez sur l'onglet Authorization Servers et modifiez celui par défaut. Cliquez sur l'onglet Revendications et sur Ajouter revendication . Nommez-le «groupes» et incluez-le dans le jeton d'identification. Définissez le type de valeur sur «Groupes» et définissez le filtre comme une expression rationnelle de . * .

Vous pouvez maintenant créer une directive angulaire pour afficher / masquer des éléments en fonction des groupes de l’utilisateur. Il existe actuellement un numéro ouvert qui montre comment procéder.

Contrôle de l'accès aux routes à l'aide d'un AuthGuard

La documentation de routeur d'Angular comprend un exemple de procédure créez un AuthGuard pour protéger les itinéraires afin qu'ils ne soient accessibles qu'aux utilisateurs authentifiés

Le SDK angulaire d'Okta est livré avec un OktaAuthGuard que vous pouvez utiliser pour protéger vos itinéraires. Il vérifie la présence d'un jeton d'accès valide avant de permettre à l'utilisateur de naviguer vers l'itinéraire. Vous trouverez ci-dessous un exemple de configuration dans app-routing.module.ts .

 import {OktaAuthGuard} à partir de '@ okta / okta-angular';

routes const: Routes = [
  { path: 'secure', component: MySecureComponent, canActivate: [OktaAuthGuard]}
]

Vous pouvez implémenter une protection d'authentification similaire pour angular-oauth2-oidc, comme indiqué dans Authentification angulaire avec OpenID Connect et Okta en 20 minutes .

 import {Injectable} de '@ angular / core'. ;
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} depuis '@ angular / router';
importer {OAuthService} de 'angular-oauth2-oidc';

@Injectable ({
  FourniDans: 'root'
})
La classe d'exportation AuthGuard implémente CanActivate {

  constructeur (private oauthService: OAuthService, routeur privé: Router) {}

  canActivate (route: ActivatedRouteSnapshot, état: RouterStateSnapshot): boolean {
    if (this.oauthService.hasValidIdToken ()) {
      retourne vrai;
    }

    this.router.navigate (['/']);
    retourne faux;
  }
}

Angular 7, tutoriel sur les CLI et Angular 7 CRUD avec Spring Boot

Ouf, c’est beaucoup d’informations sur l’authentification avec Angular 7! Pour un contenu Angular plus simple, je vous invite à jeter un coup d'œil à quelques tutoriels récemment passés à Angular 7.

J'ai récemment mis à jour quelques-uns de mes tutoriels pour utiliser Angular 7.

En fait, j'ai aimé jouer avec Angular 7 tellement, j'ai transformé le tutoriel de base de l'application CRUD en screencast!

JHipster et Angular 7

Je suis un partisan du projet JHipster . JHipster vous permet de générer une application Spring Boot avec une interface utilisateur angulaire rapidement et facilement. L’équipe de JHipster est passée à Angular 7 dans sa version 5.6.0 . Vous pouvez créer une application JHipster avec Angular à l'aide d'un seul fichier JDL. JDL signifie JHipster Domain Language .

Pour voir JHipster en action, installez-le à l'aide de npm i generator-jhipster et créez un fichier app.jh . l'application JDL

 suivante {
  config {
    blog baseName,
    applicationType monolith,
    packageName com.jhipster.demo.blog,
    prodDatabaseType mysql,
    cacheProvider hazelcast,
    buildTool maven,
    angulaire clientFramework,
    useSass true,
    testFrameworks [protractor]
  }
}

JHipster utilise l'authentification JWT par défaut, mais vous pouvez facilement l'utiliser pour l'authentification OIDC (indice: ajoutez simplement authenticationType oauth2 à app.jh ).

Créez un répertoire de blogs et exécutez le jhipster import-jdl app.jh . Dans une minute ou deux, vous aurez une application Spring Boot + Angular + Bootstrap entièrement fonctionnelle (et bien testée)! Si vous souhaitez ajouter des entités à CRUD, voir cet exemple JDL .

L'exemple JDL mentionné utilise React pour son clientFramework . Changez-le en angular pour utiliser Angular 7.

Si vous n’avez jamais entendu parler de JHipster, vous devez télécharger le gratuit JHipster Mini-Book gratuit d’InfoQ! C’est un livre que j’ai écrit pour vous aider à utiliser les technologies de pointe aujourd'hui: Angular, Bootstrap et Spring Boot. La version 5.0 a été publiée récemment .

En savoir plus sur Angular 7, JHipster et OAuth 2.0

J'espère que vous avez aimé apprendre Angular 7 et comment ajouter authn / authz à un angular app. J'ai beaucoup écrit sur Angular sur ce blog. Consultez les articles suivants pour en savoir plus sur ce cadre Web moderne.

Si vous avez aimé cet article, suivez-nous sur les médias sociaux {. Twitter Facebook . LinkedIn YouTube } pour savoir quand nous avons posté un autre super contenu!

Le meilleur outil 2023 pour ta croissance Instagram !

Source link

Partager :

• Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
• Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)