Authentification avec Angular et Auth0

Ce didacticiel démontre la création d'une application angulaire («offres quotidiennes») mettant en vedette des offres publiques et privées, avec des offres privées accessibles uniquement aux utilisateurs authentifiés via l'authentification basée sur les jetons avec Auth0. La CLI angulaire rationalise le développement, la gestion du routage, la génération de composants et les constructions. Le module HTTPClient facilite l'interaction API pour la récupération des données. Un serveur Node.js simple sert des données de transaction, avec des itinéraires protégés par le middleware vérifiant les JWT dans les en-têtes d'autorisation. Le tutoriel détaille l'intégration AUTH0, y compris la sécurisation des points de terminaison de l'API, la gestion de l'authentification côté client et la gestion des états d'authentification des utilisateurs dans l'application angulaire.

Améliorations de clés par rapport à AngularJS:

Angular transcende AngularJS 1.x, passant d'un cadre à une plate-forme complète pour le développement d'applications modernes. Les progrès clés incluent le rendu côté serveur et l'intégration officielle de la conception des matériaux.

Présentation de l'application quotidienne:

L'application "Daily Offres" présente des offres publiques et privées. Les offres privées sont exclusives aux utilisateurs enregistrés.

Back-end (node.js) Configuration:

Un serveur Node.js de base sert de source de données. Initialement, les itinéraires publics et privés sont accessibles au public. La structure des données de l'accord est la suivante:

{
  id: 1234,
  name: 'Product Name',
  description: 'Product Description',
  originalPrice: 19.99,
  salePrice: 9.99
}

Configuration frontale (angulaire):

La CLI angulaire (ng new ng2auth --routing --skip-tests) crée la structure d'application. Les commandes suivantes génèrent des composants (ng g c ...), un service (ng g s deal) et une classe pour l'objet Office. Le module HttpClient est ajouté à app.module.ts pour les demandes HTTP. Bootstrap CSS est inclus pour le style.

Composant racine (app.component.ts):

Le composant racine gère le routage et affiche la barre de navigation.

routage (app-routing.module.ts):

Les itinéraires sont définis pour les offres publiques, les offres privées et le rappel AUTH0.

Type d'offre (deal.ts):

a Deal La classe définit la structure des objets de transfert pour la sécurité de type et la maintenabilité améliorée du code.

Composants publics et privés:

Ces composants récupérent et affichent les accords à partir de leurs points de terminaison API respectifs. La gestion des erreurs et une notification d'achat sont implémentées.

Service de l'affaire (deal.service.ts):

Ce service gère les demandes HTTP pour récupérer des offres publiques et privées à partir du serveur Node.js.

Ajout d'authentification Auth0:

Auth0 est intégré pour l'authentification des utilisateurs. Une API est créée dans le tableau de bord Auth0 et le serveur est sécurisé à l'aide de JWT Middleware. L'application angulaire utilise le SDK Auth0 (npm install auth0-js --save). Variables d'environnement dans environment.ts Stocker les détails de la configuration Auth0.

Service d'authentification (auth.service.ts):

Ce service gère la connexion de l'utilisateur, la déconnexion, la gestion des jetons et la récupération de profil utilisateur.

gardien de route (auth.guard.ts):

an AuthGuard protège l'itinéraire des offres privées, redirigeant les utilisateurs non authentifiés vers la page de connexion.

Composant de rappel (callback.component.ts):

Ce composant gère le rappel AUTH0, le traitement de la réponse d'authentification et la définition de la session utilisateur.

Service de transformation mis à jour:

La méthode getPrivateDeals() comprend désormais un en-tête d'autorisation avec le jeton d'accès.

Test de l'application:

Après la configuration de la configuration AUTH0, l'application peut être testée. Enregistrement en redirection vers la page de connexion AUTH0, et après une authentification réussie, les offres privées deviennent accessibles.

Conclusion:

Ce tutoriel complet fournit une base robuste pour construire des applications angulaires sécurisées et authentifiées à l'aide d'Auth0. L'utilisation des meilleures pratiques, y compris les gardes d'itinéraire et la bonne manipulation de jetons, assure une expérience sécurisée et conviviale. La section FAQ aborde les questions courantes concernant la connexion sociale, la gestion des erreurs et les fonctionnalités avancées AUTH0.

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!