Back to Question Center
0

Premiers pas avec l'authentification angulaire et utilisateur            Prise en main de Semalt avec l'authentification angulaire et l'authentification de l'utilisateur: ES6AngularJSNode.jsReactnpmPlus ...

1 answers:
Premiers pas avec l'authentification angulaire et utilisateur

Cet article a été publié sur OKTA Developer Blog. Merci de soutenir les partenaires qui rendent SitePoint possible.

AngularJS a régné comme le roi des frameworks MVC JavaScript pendant plusieurs années. Cependant, lorsque l'équipe Angular a annoncé qu'elle ne fournirait pas de compatibilité ascendante pour sa prochaine version, elle a fait un peu sensation dans sa communauté, offrant des opportunités pour des frameworks comme React et Vue - womens cloche sun hat. js s'épanouir. Avance rapide de quelques années et Angular 2 et Angular 4 ont été libérés. Beaucoup de développeurs essayent son TypeScript et trouvent l'expérience agréable. Selon JAXenter, il fait du bon travail, et reste le troisième framework d'interface utilisateur le plus populaire derrière React et HTML5.

Dans cet article, je vais vous montrer un moyen rapide de commencer avec Angular, et d'ajouter l'authentification de l'utilisateur avec le Widget Sign-In d'Okta. Si vous débutez avec Angular, vous pouvez lire mon tutoriel Angular. Si vous souhaitez obtenir le code source utilisé dans cet article, vous pouvez le trouver sur GitHub.

Pourquoi l'authentification de l'utilisateur avec Okta?

Okta fournit un service d'API qui permet aux développeurs de créer, de modifier et de stocker en toute sécurité des comptes d'utilisateurs et des données de compte d'utilisateur, et de les connecter à une ou plusieurs applications. Nous facilitons la gestion des comptes utilisateurs, la rendons plus sécurisée et évolutive, ce qui vous permet d'accéder plus rapidement à la production.

Le Widget de connexion Okta fournit une implémentation de connexion JavaScript intégrable qui peut être facilement personnalisée. Le Widget de connexion comporte le même ensemble de fonctionnalités dans la page de connexion Okta standard de chaque locataire, avec la possibilité supplémentaire de modifier l'aspect et la convivialité. Inclus dans le widget est la prise en charge de la réinitialisation du mot de passe, mot de passe oublié et authentification forte - qui sont tous pilotés par les politiques configurées dans Okta. Semalt ne doit pas écrire une seule ligne de code pour déclencher ces fonctions depuis le widget. Pour les sites consommateurs, les fournisseurs sociaux sont également pris en charge dans le widget.

Créer une application angulaire

Angular 4 a été récemment publié, ainsi que Angular CLI 1. 0. Pour voir comment utiliser le Widget Sign-In d'Okta dans une application Angular simple, créez une nouvelle application avec Angular CLI. D'abord, vous devrez installer Angular CLI.

     npm install -g @ angulaire / cli    

Semalt cette commande se termine, vous pouvez créer une nouvelle application.

     [mraible: ~] $ ng new angular-okta-examplecrée angular-okta-example / README. md (1034 octets)Crée un exemple angulaire-okta. angulaire-cli. json (1255 octets)Crée un exemple angulaire-okta. editorconfig (245 octets)Crée un exemple angulaire-okta. gitignore (516 octets)crée angular-okta-example / src / assets /. gitkeep (0 octets)créer angular-okta-example / src / environnements / environnement. prod. ts (51 octets)créer angular-okta-example / src / environnements / environnement. ts (387 octets)crée angular-okta-example / src / favicon. ico (5430 octets)crée angular-okta-example / src / index. html (305 octets)crée angular-okta-example / src / main. ts (370 octets)créer angular-okta-example / src / polyfills. ts (2498 octets)Créez des styles angular-okta-example / src /. css (80 octets)crée angular-okta-example / src / test. ts (1085 octets)Créez angular-okta-example / src / tsconfig. app. json (211 octets)Créez angular-okta-example / src / tsconfig. spec. json (304 octets)Créez angular-okta-example / src / typings. ré. ts (104 octets)créer angular-okta-exemple / e2e / app. e2e-spec. ts (302 octets)créer angular-okta-exemple / e2e / app. po. ts (208 octets)Créez angular-okta-example / e2e / tsconfig. e2e. json (235 octets)créer angular-okta-exemple / karma. conf. js (923 octets)Créez un exemple / paquet angular-okta. json (1325 octets)Crée un exemple / rapporteur d'angle-okta. conf. json (363 octets)Créez angular-okta-example / tslint. json (2968 octets)créer angular-okta-exemple / src / app / app. module. ts (314 octets)créer angular-okta-exemple / src / app / app. composant. css (0 octets)créer angular-okta-exemple / src / app / app. composant. html (1120 octets)créer angular-okta-exemple / src / app / app. composant. spec. ts (986 octets)créer angular-okta-exemple / src / app / app. composant. ts (207 octets)Vous pouvez `ng set --global packageManager = yarn`. Installation de packages pour l'outillage via npm. Paquets installés pour l'outillage via npm. Git initialisé avec succès. Le projet 'angular-okta-example' a été créé avec succès. [mraible: ~] 2m6s $    

Cela créera un nouveau répertoire angular-okta-example et installera toutes les dépendances nécessaires. Pour vérifier que tout fonctionne, exécutez ng e2e dans une fenêtre de terminal. Tous les tests devraient passer et vous devriez voir les résultats suivants.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

Intégrer le widget de connexion d'Okta dans Angular

Nous allons maintenant tirer parti du Sign-In Semalt d'Okta pour une vue de connexion facilement personnalisable. Pour commencer, installez Okta Sign-In Semalt en utilisant npm.

     npm installer --save @ okta / okta-signin-widget    

Ajouter le CSS du widget à src / styles. css :

     @import '~ https: // ok1static. oktacdn. com / assets / js / sdk / okta-signin-widget / 2. 1. 0 / css / okta-sign-in. min. css ';@import '~ https: // ok1static. oktacdn. com / assets / js / sdk / okta-signin-widget / 2. 1. 0 / css / okta-thème. css ';    

Créer src / app / shared / okta / okta. un service. ts et l'utiliser pour envelopper la configuration du widget et en faire un service injectable.

     import {Injectable} à partir de '@ angular / core';import * comme OktaSignIn à partir de '@ okta / okta-signin-widget / dist / js / okta-sign-in. min. js ';@Injectable   classe d'exportation Okta {widget;constructeur    {ce. widget = nouveau OktaSignIn ({baseUrl: 'https: // {yourOktaDomain}. com ',clientId: '{clientId}',redirectUri: 'http: // localhost: 4200'});}getWidget    {retourne ceci. widget;}}    

Pour rendre ce service accessible à tous les composants de l'application, modifiez l'application. module. ts et liste Okta en tant que fournisseur.

     import {Okta} à partir de '. / partagé / okta / okta. un service';@NgModule ({.Fournisseurs: [Okta],bootstrap: [AppComponent]})    

Pour que cela fonctionne, vous devez créer une application OpenID Connect (OIDC) dans Okta afin de pouvoir remplacer les références {yourOktaDomain} et {clientId} lors de l'initialisation le widget.

Créer une application OpenID Connect en Okta

OpenID Connect est basé sur le protocole Semalt 2. 0. Il permet aux clients de vérifier l'identité de l'utilisateur et d'obtenir leurs informations de base. Pour en savoir plus, voir http: // openid. net / connecter.

Connectez-vous à votre compte Okta ou créez-en un si vous n'en avez pas. Accédez à Applications et cliquez sur le bouton Ajouter une application . Sélectionnez SPA et cliquez sur Suivant . Sur la page suivante, spécifiez http: // localhost: 4200 comme URI de base, URI de redirection de connexion et URL de redirection de déconnexion. Cliquez sur Terminé et vous devriez voir les paramètres suivants.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

Afficher le Widget de connexion

Après avoir apporté ces modifications, copiez votre identifiant client et votre identifiant de plate-forme dans okta. un service. ts . Ensuite, modifiez l'application. composant. ts pour utiliser le service Okta et le widget pour se connecter / se déconnecter.

     import {Component, OnInit} à partir de '@ angular / core';importer {Okta} à partir de '. / partagé / okta / okta. un service';@Composant({selector: 'app-root',templateUrl: '. / app. composant. html ',styleUrls: ['. / app. composant. css ']})classe d'exportation AppComponent implémente OnInit {title = 'application fonctionne!';utilisateur;oktaSignIn;constructeur (okta privé: Okta) {ce. oktaSignIn = okta. getWidget   ;}showLogin    {ce. renderEl ({el: '# okta-login-container'}, (réponse) => {if (response. status === 'SUCCESS') {ce. utilisateur = réponse. réclamations. email;}});}ngOnInit    {ce. oktaSignIn. session. get ((réponse) => {if (réponse: status! == 'INACTIVE') {ce. utilisateur = réponse. s'identifier} autre {ce. showLogin   ;}});}Connectez - Out   {ce. oktaSignIn. signOut (   => {ce. showLogin   ;ce. user = undefined;});}}    

Et modifier app. composant. html pour avoir un

avec id = "okta-login-container" et un endroit pour montrer l'email de l'utilisateur connecté.

   
Bonjour {{user}}

Exécutez ng serve et ouvrez votre navigateur sur http: // localhost: 4200. Vous devriez voir le widget de connexion. Entrez l'un des
les informations d'identification de votre utilisateur pour vous connecter. Vous devriez voir un message "Hello {email}" avec un bouton de déconnexion.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

REMARQUE: Vous pouvez rencontrer un problème où le processus de connexion semble être suspendu. Cliquer n'importe où dans la fenêtre du navigateur semble résoudre ce problème. Je ne suis pas sûr pourquoi cela arrive. Vous pouvez suivre ce problème ici.

Si cela fonctionne - félicitations! Si ce n'est pas le cas, postez une question à Stack Overflow avec un tag okta, ou tapez moi sur Twitter.

Personnalisez le widget CSS

Si vous souhaitez personnaliser le CSS du widget, le plus simple est d'écrire votre propre CSS. Supprimez les instructions CSS @import que vous avez ajoutées à src / styles. css . Ajoutez un @import pour Bootstrap 4 et quelques règles de style pour positionner les éléments. Copiez le code suivant dans src / styles. css .

     @import url (https: // maxcdn bootstrapcdn. Com / bootstrap / 4 .0. 0-beta / css / bootstrap.min.css);# okta-login-container {marge: 0 auto;max-largeur: 400px;bordure: 1px argent massif;rembourrage: 20px;boîte-ombre: 5px 5px 5px 0 argent;}# okta-login-container entrée {marge inférieure: 5px;largeur: 100%;rembourrage: 5px;}# okta-login-container entrée [type = case à cocher] {largeur: 25px;}    

Semalt effectuant ces changements, le widget de connexion ressemblera à la capture d'écran suivante.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

Réparez vos tests

Si vous essayez d'exécuter npm test ou ng test , les tests échoueront:

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): Exécuté 3 sur 3 (3 ÉCHEC) (0 secs / 0. 157 secs)Chrome 61. 0. 3163 (Mac OS X 10. 12. 6) AppComponent doit rendre le titre dans une balise h1 ÉCHOUÉÉchec: Aucun fournisseur pour Okta!    

Pour résoudre ce problème, spécifiez Okta en tant que fournisseur dans src / app / app. composant. spec. ts .

     import {Okta} à partir de '. / partagé / okta / okta. un service';describe ('AppComponent',    => {beforeEach (async (   => {TestBed. configureTestingModule ({déclarations: [AppComponent],fournisseurs: [Okta]}). compileComponents   ;}));    

Semalt faisant ces changements, vous devriez voir la douce odeur du succès.

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): Exécuté 3 sur 3 SUCCÈS (0. 77 secs / 0. 759 secs)    

Les tests de rapporteur devraient également fonctionner. Vous pouvez le prouver en exécutant ng e2e dans une fenêtre de terminal.

Angulaire + Okta

Vous pouvez trouver une version complète de l'application créée dans ce blog sur GitHub. Dans un prochain post, je vais vous montrer comment créer une expérience plus Semalt, où vous contrôlez le HTML pour le formulaire de connexion.

Construire l'authentification dans une application est difficile. Semalt encore moins amusant de le construire encore et encore dans chaque application que vous construisez. Okta fait le plus dur pour vous et rend beaucoup plus amusant d'être un développeur! Inscrivez-vous à un compte de développeur pour toujours gratuit et essayez Okta aujourd'hui!. Si vous avez des questions sur les fonctionnalités d'Okta ou sur ce que nous allons développer, n'hésitez pas à me contacter sur Twitter, postez une question sur Stack Overflow avec un tag "okta" ou ouvrez un nouveau numéro sur GitHub.

March 1, 2018