Maison >interface Web >js tutoriel >Configurer l'authentification angulaire à l'aide d'OpenId Connect et d'Okta dans votre application
Configurer l'authentification angulaire à l'aide d'OpenId Connect et d'Okta dans votre application
- Joseph Gordon-Levittoriginal
- 2025-02-16 11:09:10452parcourir
Cet article a été initialement publié sur Okta Developer Blog. Merci de soutenir les partenaires qui rendent le point de point possible.
Angular (anciennement appelé Angular 2.0) devient rapidement l'un des moyens les plus puissants de construire une application moderne à une seule page. Une force de base est l'accent mis par Angular sur la construction de composants réutilisables, qui vous aident à découpler les diverses préoccupations de votre application. Prenez l'authentification, par exemple: il peut être douloureux à construire, mais une fois que vous l'avez enveloppé dans un composant, la logique d'authentification peut être réutilisée tout au long de votre application.
La CLI angulaire facilite l'échafaudage de nouveaux composants, et même des projets entiers. Si vous n'avez pas utilisé la CLI angulaire pour générer rapidement du code angulaire, vous êtes pour un régal!
Dans cet exemple, vous construirez une application Web simple avec Angular CLI, un outil de développement angulaire. Vous allez créer une application avec des fonctionnalités de recherche et de modification, puis ajouter l'authentification.
Les plats clés
- échafaudage rapidement et exécutez une nouvelle application angulaire en utilisant une CLI angulaire, améliorant l'efficacité du développement.
- Intégrer l'authentification de manière transparente en configurant une application OpenID Connect avec OKTA, assurant une gestion sécurisée des utilisateurs.
- Améliorer l'expérience utilisateur en ajoutant des fonctionnalités de recherche et modifiez, en utilisant le puissant système de composants d'Angular.
- Utiliser le routage pour gérer la navigation au sein de l'application, permettant un flux d'utilisateur plus lisse et une meilleure gestion de l'État.
- Mettre en œuvre la validation du formulaire pour assurer l'intégrité des données et fournir des commentaires, améliorant la convivialité globale.
- Secure Application Routes utilisant Authguard d'Angular pour protéger les informations sensibles et appliquer l'authentification.
Créer une application angulaire
CONSEIL: Si vous souhaitez sauter la construction de l'application angulaire et aller à l'ajustement de l'authentification, vous pouvez cloner mon projet NG-Demo, puis passer à l'application Créer une OpenId Connect dans la section Okta.
<span>git clone https://github.com/mraible/ng-demo.git </span>
ce dont vous aurez besoin
- environ 20 minutes
- un éditeur de texte préféré ou IDE. Je recommande Intellij Idea
- Node.js et NPM installés. Je recommande d'utiliser NVM
- CLI angulaire installé. Si vous n'avez pas installé CLI angulaire, installez-le à l'aide de NPM Install -g @ Angular / CLI
Créez un nouveau projet en utilisant la nouvelle commande NG:
ng new ng-demo
Cela créera un projet NG-Demo et exécutera l'installation de NPM. Cela devrait prendre environ une minute pour terminer, mais cela pourrait varier en fonction de votre vitesse de connexion.
<span>[mraible:~/dev] $ ng new ng-demo </span>installing ng create .editorconfig create README.md create src/app/app.component.css create src/app/app.component.html create src/app/app.component.spec.ts create src/app/app.component.ts create src/app/app.module.ts create src/assets/.gitkeep create src/environments/environment.prod.ts create src/environments/environment.ts create src/favicon.ico create src/index.html create src/main.ts create src/polyfills.ts create src/styles.css create src/test.ts create src/tsconfig.app.json create src/tsconfig.spec.json create src/typings.d.ts create .angular-cli.json create e2e/app.e2e-spec.ts create e2e/app.po.ts create e2e/tsconfig.e2e.json create .gitignore create karma.conf.js create package.json create protractor.conf.js create tsconfig.json create tslint.json Successfully initialized git. Installing packages <span>for tooling via npm. </span>Installed packages <span>for tooling via npm. </span>You can <span><span>`ng set --global packageManager=yarn`</span>. </span>Project <span>'ng-demo' successfully created. </span><span>[mraible:~] 46s $ </span>
Vous pouvez voir quelle version de la CLI angulaire que vous utilisez avec ng --version.
$ ng <span>--version </span> _ _ ____ _ ___ / <span>\ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| </span> / △ <span>\ | '_ \ / _` | | | | |/ _` | '__| | | | | | | </span> / ___ <span>\| | | | (_| | |_| | | (_| | | | |___| |___ | | </span>/_/ <span>\_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| </span> <span>|___/ </span>@angular/cli: <span>1.3.2 </span>node: <span>8.4.0 </span>os: darwin x64
Exécutez votre application angulaire
Le projet est configuré avec WebPack Dev Server. Pour le démarrer, assurez-vous que vous êtes dans le répertoire NG-Demo, puis exécutez:
<span>git clone https://github.com/mraible/ng-demo.git </span>
Vous devriez voir un écran comme celui ci-dessous sur http: // localhost: 4200.
Vous pouvez vous assurer que les tests de votre nouveau projet réussissent, exécutez NG Test:
ng new ng-demo
Ajouter une fonction de recherche
Pour ajouter une fonction de recherche, ouvrez le projet dans un IDE ou votre éditeur de texte préféré. Pour Intellij Idea, utilisez un fichier> nouveau projet> Web statique et pointez le répertoire NG-Demo.
Dans une fenêtre de terminal, CD dans le répertoire de votre projet et exécutez la commande suivante. Cela créera un composant de recherche.
<span>[mraible:~/dev] $ ng new ng-demo </span>installing ng create .editorconfig create README.md create src/app/app.component.css create src/app/app.component.html create src/app/app.component.spec.ts create src/app/app.component.ts create src/app/app.module.ts create src/assets/.gitkeep create src/environments/environment.prod.ts create src/environments/environment.ts create src/favicon.ico create src/index.html create src/main.ts create src/polyfills.ts create src/styles.css create src/test.ts create src/tsconfig.app.json create src/tsconfig.spec.json create src/typings.d.ts create .angular-cli.json create e2e/app.e2e-spec.ts create e2e/app.po.ts create e2e/tsconfig.e2e.json create .gitignore create karma.conf.js create package.json create protractor.conf.js create tsconfig.json create tslint.json Successfully initialized git. Installing packages <span>for tooling via npm. </span>Installed packages <span>for tooling via npm. </span>You can <span><span>`ng set --global packageManager=yarn`</span>. </span>Project <span>'ng-demo' successfully created. </span><span>[mraible:~] 46s $ </span>
Ouvrir Src / App / Search / Search.Component.html et remplacer son HTML par défaut par ce qui suit:
$ ng <span>--version </span> _ _ ____ _ ___ / <span>\ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| </span> / △ <span>\ | '_ \ / _` | | | | |/ _` | '__| | | | | | | </span> / ___ <span>\| | | | (_| | |_| | | (_| | | | |___| |___ | | </span>/_/ <span>\_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| </span> <span>|___/ </span>@angular/cli: <span>1.3.2 </span>node: <span>8.4.0 </span>os: darwin x64
La documentation du routeur pour Angular fournit les informations dont vous avez besoin pour configurer un itinéraire vers la recherche de recherche que vous venez de générer. Voici un résumé rapide:
dans src / app / app.module.ts, ajoutez une constante d'approutes et importez-la dans @ngmodule:
ng serve
dans src / app / app ....html, ajustez le contenu d'espace réservé et ajoutez une balise
$ ng <span>test </span><span>... </span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs) </span>
Maintenant que vous avez la configuration de routage, vous pouvez continuer à écrire la fonction de recherche.
Si vous avez encore NG Service en cours d'exécution, votre navigateur doit actualiser automatiquement. Sinon, accédez à http: // localhost: 4200. Vous verrez probablement un écran vierge. Ouvrez votre console JavaScript et vous verrez le problème.
Pour résoudre ce problème, ouvrez Src / App / App.Module.ts et ajouter FormsModule comme importation dans @ngmodule:
$ ng g component search installing component create src/app/search/search.component.css create src/app/search/search.component.html create src/app/search/search.component.spec.ts create src/app/search/search.component.ts update src/app/app.module.ts
Maintenant, vous devriez voir le formulaire de recherche.
Si vous souhaitez ajouter CSS pour ces composants, ouvrez SRC / App / Search / Search.Component.css et ajoutez des CS. Par exemple:
<span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span> <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span> <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>
Cette section vous a montré comment générer un nouveau composant sur une application angulaire de base avec une CLI angulaire. La section suivante vous montrera comment créer et utiliser un fichier JSON et localStorage pour créer une fausse API.
Pour obtenir des résultats de recherche, créez un service de recherche qui fait des demandes HTTP à un fichier JSON. Commencez par générer un nouveau service.
<span>import { Routes, RouterModule } from '@angular/router';
</span>
<span>const appRoutes: Routes = [
</span> <span>{path: 'search', component: SearchComponent},
</span> <span>{path: '', redirectTo: '/search', pathMatch: 'full'}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span> <span>...
</span> imports<span>: [
</span> <span>...
</span> RouterModule<span>.forRoot(appRoutes)
</span> <span>]
</span> <span>...
</span><span>})
</span><span>export class AppModule { }
</span>
Déplacez la recherche générée.service.ts et son test vers l'application / partager / search. Vous devrez créer ce répertoire.
<span><span><span><h1</span>></span>Welcome to {{title}}!<span><span></h1</span>></span>
</span><span><!-- Routed views go here -->
</span><span><span><span><router-outlet</span>></span><span><span></router-outlet</span>></span>
</span>
Créer Src / Assets / Data / People.json pour tenir vos données.
<span>import { FormsModule } from '@angular/forms';
</span>
<span><span>@NgModule</span>({
</span> <span>...
</span> imports<span>: [
</span> <span>...
</span> FormsModule
<span>]
</span> <span>...
</span><span>})
</span><span>export class AppModule { }
</span>
Modifier SRC / App / Shared / Search / Search.Service.ts et fournir HTTP comme dépendance dans son constructeur. Dans ce même fichier, créez une méthode getall () pour rassembler toutes les personnes. Définissez également les classes d'adresse et de personne à laquelle JSON sera rassemblée.
<span><span>:host</span> {
</span> <span>display: block;
</span> <span>padding: 0 20px;
</span><span>}
</span>
Pour rendre ces classes disponibles pour la consommation par vos composants, modifiez Src / App / Shared / Index.ts et ajoutez ce qui suit:
<span>git clone https://github.com/mraible/ng-demo.git </span>
La raison de la création de ce fichier est que vous pouvez importer plusieurs classes sur une seule ligne plutôt que d'avoir à importer chaque classe individuelle sur des lignes séparées.
Dans SRC / App / Search / Search.Component.ts, ajoutez des importations pour ces classes.
ng new ng-demo
Vous pouvez désormais ajouter des variables de requête et de recherche. Pendant que vous y êtes, modifiez le constructeur pour injecter le service de recherche.
<span>[mraible:~/dev] $ ng new ng-demo </span>installing ng create .editorconfig create README.md create src/app/app.component.css create src/app/app.component.html create src/app/app.component.spec.ts create src/app/app.component.ts create src/app/app.module.ts create src/assets/.gitkeep create src/environments/environment.prod.ts create src/environments/environment.ts create src/favicon.ico create src/index.html create src/main.ts create src/polyfills.ts create src/styles.css create src/test.ts create src/tsconfig.app.json create src/tsconfig.spec.json create src/typings.d.ts create .angular-cli.json create e2e/app.e2e-spec.ts create e2e/app.po.ts create e2e/tsconfig.e2e.json create .gitignore create karma.conf.js create package.json create protractor.conf.js create tsconfig.json create tslint.json Successfully initialized git. Installing packages <span>for tooling via npm. </span>Installed packages <span>for tooling via npm. </span>You can <span><span>`ng set --global packageManager=yarn`</span>. </span>Project <span>'ng-demo' successfully created. </span><span>[mraible:~] 46s $ </span>
Implémentez ensuite une méthode Search () pour appeler la méthode getall () du service.
$ ng <span>--version </span> _ _ ____ _ ___ / <span>\ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| </span> / △ <span>\ | '_ \ / _` | | | | |/ _` | '__| | | | | | | </span> / ___ <span>\| | | | (_| | |_| | | (_| | | | |___| |___ | | </span>/_/ <span>\_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| </span> <span>|___/ </span>@angular/cli: <span>1.3.2 </span>node: <span>8.4.0 </span>os: darwin x64
À ce stade, vous verrez probablement le message suivant dans la console de votre navigateur.
ng serve
Pour corriger l'erreur «No Provider» d'en haut, mettez à jour app.module.ts pour importer le service de recherche et ajouter le service à la liste des fournisseurs. Étant donné que SearchService dépend de HTTP, vous devrez également importer du httpmodule.
$ ng <span>test </span><span>... </span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs) </span>
Cliquez maintenant sur le bouton de recherche devrait fonctionner. Pour rendre les résultats plus beaux, supprimez la balise
et remplacez-la par un
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript