Créez une application angulaire avec le widget de connexion d'Okta en 15 minutes

Faits saillants de la clé:

• Malgré un manque de compatibilité vers l'arrière, Angular 2 et 4 restent très populaires, sécurisant la troisième place parmi les cadres d'interface utilisateur (après React et HTML5).
• OKTA propose une API conviviale pour la gestion des comptes d'utilisateurs rationalisés, intégrant de manière transparente aux applications angulaires. Son widget de connexion fournit une solution JavaScript personnalisable englobant la réinitialisation du mot de passe, la récupération de mot de passe oubliée et les fonctionnalités d'authentification robustes.
• L'intégration du widget de connexion d'Okta dans un projet angulaire est simple à l'aide de NPM et de code minimal, permettant à la personnalisation de faire correspondre l'esthétique de l'application.
• Les tests approfondis dans l'application angulaire sont facilitées par Okta, avec tous les problèmes facilement résolus en définissant Okta en tant que fournisseur. L'application complète est accessible sur github.

Alors qu'AngularJS a autrefois dominé les cadres MVC JavaScript, l'annonce de la compatibilité sans frappe pour les versions ultérieures a provoqué certains bouleversements communautaires, bénéficiant aux concurrents comme React et Vue.js. Cependant, Angular 2 et 4, en tirant parti de dactylographie, se sont révélés remarquablement résistants, en maintenant une position forte en tant que troisième cadre d'interface utilisateur le plus populaire.

Cet article démontre une intégration rapide du widget de connexion d'Okta pour l'authentification des utilisateurs dans une application angulaire de base. Pour les débutants angulaires, un tutoriel angulaire supplémentaire est recommandé. Le code source est disponible sur github.

Pourquoi choisir Okta pour l'authentification des utilisateurs?

OKTA fournit une API complète pour gérer les comptes d'utilisateurs, stocker en toute sécurité les données et se connecter à plusieurs applications. Cela simplifie la gestion des comptes, améliore la sécurité et accélère le déploiement. Le widget de connexion OKTA propose une solution de connexion JavaScript facilement personnalisable et intégrée reflétant les fonctionnalités de la page de connexion standard d'Okta, y compris la réinitialisation du mot de passe, les fonctionnalités de mot de passe oubliées et l'authentification forte - toutes gérées via les stratégies d'Okta, ne nécessitant aucun code personnalisé. Les connexions sociales sont également prises en charge pour les applications orientées consommateurs.

Construire une application angulaire

Avec Angular 4 et Angular CLI 1.0, la création d'une nouvelle application est simple:

1. Installez Angular CLI: npm install -g @angular/cli
2. Créez une nouvelle application: ng new angular-okta-example

Vérifiez la fonctionnalité avec ng e2e.

Intégration du widget de connexion d'Okta

1. Installez le widget: npm install --save @okta/okta-signin-widget
2. Ajouter CSS à 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-theme.css';

3. Créer src/app/shared/okta/okta.service.ts pour gérer le widget:

import { Injectable } from '@angular/core';
import * as OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js';

@Injectable()
export class Okta {
  widget;

  constructor() {
    this.widget = new OktaSignIn({
      baseUrl: 'https://{yourOktaDomain}.com',
      clientId: '{clientId}',
      redirectUri: 'http://localhost:4200'
    });
  }

  getWidget() {
    return this.widget;
  }
}

4. Ajouter Okta en tant que fournisseur dans app.module.ts.

5. Créez une application OpenID Connect dans votre compte Okta, en remplaçant les espaces réservés dans okta.service.ts par votre ClientId et Okta Domain.

6. Implémentez la fonctionnalité de connexion / déconnexion dans app.component.ts et ajustez app.component.html pour afficher le widget et les informations utilisateur.

Test et personnalisation

Exécutez ng serve pour tester l'application. Adressez les défaillances de test potentielles en ajoutant Okta en tant que fournisseur dans src/app/app.component.spec.ts. Personnalisez l'apparence du widget en créant des CSS personnalisés. La demande terminée est disponible sur github.

Questions fréquemment posées (FAQ) (Celles-ci sont résumées par la concision; se référer à l'original pour les réponses complètes.)

• Intégration OKTA avec Angular: Installez le SDK Okta Angular, configurez-le avec votre domaine OKTA et votre ID client et utilisez ses méthodes d'authentification, de gestion de session et de sécurité de l'itinéraire.
• OktaAuthService: gère l'authentification des utilisateurs, y compris la connexion, la déconnexion, les vérifications d'authentification et la manipulation de session.
• Sécurisation des itinéraires: Utiliser OktaAuthGuard pour restreindre l'accès aux utilisateurs authentifiés.
• Composant de rappel OKTA: gère le rappel d'authentification d'Okta.
• Personnalisation de la page de connexion: Personnaliser via le tableau de bord d'administration OKTA ou avec HTML / CSS personnalisé.
• Gestion de session: Utilisez les méthodes d'Okta pour créer, vérifier, renouveler et clôturer les séances.
• Okta Token Manager: gère les jetons en toute sécurité.
• Gestion des erreurs: Le SDK fournit des capacités de traitement des erreurs.
• Tests: Utilisez des tests unitaires avec des services simulés.
• Mise à jour du SDK: Utiliser npm update.

Okta simplifie l'authentification, permettant aux développeurs de se concentrer sur les fonctionnalités d'application. Un compte de développeur gratuit est disponible pour l'expérimentation. Pour les questions, reportez-vous à Stack Overflow, Twitter ou GitHub.

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!