Authentification Angularjs facile avec Auth0

Cet article a été mis à jour (11.05.2017) pour refléter les modifications de l'API d'Auth0. La sécurisation des applications d'une page (SPAS) peut être difficile. Les spas consistent souvent en une extrémité frontale distincte (par exemple, AngularJS) et une API de données back-end. L'authentification basée sur la session traditionnelle ne convient pas à cette architecture car elle introduit l'état de l'API, violant les principes de repos et entravant l'intégration des applications mobiles.

Avantages clés de cette approche:

• Authentification sans état: Les jetons Web JSON (JWT) permettent une authentification sécurisée et sans état, intégrant de manière transparente aux backends mobiles.
• Gestion simplifiée des utilisateurs: AUTH0 simplifie la gestion de l'authentification des utilisateurs, y compris les connexions sociales et le support à plusieurs profils.
• Intégration rationalisée: les bibliothèques et les modules AngularJS d'Auth0 simplifient le processus d'authentification, l'automatisation de la gestion des jetons et de la gestion de session.
• Sécurité améliorée: JWTS stocké en toute sécurité dans le stockage local améliore la sécurité lors de l'accès aux points de terminaison API protégés.
• Intégration de connexion sociale facile: Activer les connexions sociales populaires avec des bascules de tableau de bord Auth0 simples.
• Points de terminaison API sécurisés: Un serveur NodeJS avec validation JWT protège les points de terminaison de l'API, garantissant que seuls les utilisateurs authentifiés accéder aux données sensibles.

Tokens Web JSON (JWTS): une solution apatride

JWTS surmonte les limites de l'authentification basée sur la session. Cette norme ouverte authentifie les demandes de l'ANGularJS Front-end à l'API back-end. Surtout, les JWT contiennent une charge utile JSON avec des réclamations personnalisées, signée numériquement pour le sabotage.

Implémentation d'authentification AngularJS

Les JWT sont idéaux pour l'authentification AngularJS. Les points de terminaison API sécurisés sont accessibles en stockant le JWT de l'utilisateur dans le stockage local et en l'incluant dans l'en-tête d'autorisation des demandes HTTP. Les JWT invalides ou manquants entraînent un refus d'accès.

Au-delà de l'authentification de base, une implémentation AngularJS robuste nécessite:

• Rendu conditionnel: Afficher / masquer les éléments (boutons de connexion / déconnexion) basés sur la validité JWT.
• Protection des itinéraires: Empêcher les utilisateurs non authentifiés d'accéder à des itinéraires spécifiques.
• Mises à jour de l'interface utilisateur: Mettez à jour l'interface utilisateur lorsque l'état de l'utilisateur change (expiration JWT, déconnexion).

Ce didacticiel démontre une implémentation complète d'authentification AngularJS, y compris un serveur NodeJS pour l'accès aux ressources protégées. Au lieu de construire une base de données d'utilisateurs et une émission JWT, nous tirons partis du niveau gratuit d'Auth0 (jusqu'à 7 000 utilisateurs actifs). L'intégration de la connexion sociale est également montrée.

(image: tableau de bord AUTH0)

Auth0 Configuration

1. Créer un compte Auth0: Inscrivez-vous à un compte Auth0, en choisissant un nom de domaine (par exemple, yourcompany.auth0.com). Cela ne peut pas être modifié plus tard.
2. Configurez l'application par défaut: Dans le tableau de bord Auth0, accédez à la section Clients et accédez à la application par défaut . Configurer Origins autorisés et URL de rappel autorisé (par exemple, http://localhost:8080 pour ce tutoriel).
3. Créez une section API: dans la section API , créez une nouvelle API, notant son identifiant (utilisé comme public dans l'application).
4. Activer les fournisseurs d'identité sociaux (facultatifs): Activer les connexions sociales (par exemple, Google, Facebook) en basculant les options dans les connexions & gt; Social Section.

Installation et configuration

Installez les packages nécessaires (en utilisant bower install si vous avez fourré le repo github):

npm install -g http-server

Démarrez le serveur à l'aide de http-server. Configurez app.js et index.html pour intégrer Auth0. Remplacez les valeurs d'espace réservé par vos informations d'identification AUTH0:

// app.js (snippet)
angularAuth0Provider.init({
  clientID: AUTH0_CLIENT_ID,
  domain: AUTH0_DOMAIN,
  responseType: 'token id_token',
  redirectUri: AUTH0_CALLBACK_URL,
  audience: AUTH0_API_AUDIENCE,
});

le fichier app.run.js gère le hachage après l'authentification:

// app.run.js (snippet)
authService.handleParseHash();

(Image: page de connexion angularjs)

(Image: AngularJS connecté à l'état)

(Image: AngularJS Logout State)

Création de page d'accueil

Le fichier home.html fournit une interface utilisateur simple avec des boutons de connexion / déconnexion et des boutons d'appel API. Le fichier gère les appels d'API à l'aide de home.controller.js: $http

// home.controller.js (snippet)
vm.getSecretMessage = function() {
  $http.get('http://localhost:3001/api/private', {
    headers: { Authorization: 'Bearer ' + localStorage.getItem('access_token') }
  })
  .then(...)
  .catch(...);
};

Service d'authentification () auth.service.js

Ce service gère la connexion, la déconnexion et l'authentification Gestion de l'état:

// auth.service.js (snippet)
function authService($state, angularAuth0, authManager) {
  // ... login, handleParseHash, logout, isAuthenticated functions ...
}

Création de serveur Nodejs

Créez un serveur Nodejs à l'aide d'express,

, express-jwt et jwks-rsa: cors

// server/server.js (snippet)
var authCheck = jwt({
  secret: jwks.expressJwtSecret({
    jwksUri: "https://{YOUR-AUTH0-DOMAIN}.auth0.com/.well-known/jwks.json"
  }),
  audience: '{YOUR-AUTH0-API-AUDIENCE}',
  issuer: "https://{YOUR-AUTH0-DOMAIN}.auth0.com/",
  algorithms: ['RS256']
});

app.get('/api/private', authCheck, function(req, res) { ... });

Démarrez le serveur avec

. L'application AngularJS peut désormais faire des demandes au point de terminaison de l'API protégé. node server.js

Considérations supplémentaires et FAQ

L'article se termine par une section sur des fonctionnalités AUTH0 supplémentaires (SSO, Loginless sans mot de passe, MFA) et d'autres backends pris en charge et SDK mobile. Une section FAQ complète aborde les questions courantes concernant la connexion sociale, la gestion des sessions, la sécurité des itinéraires, le rafraîchissement des jetons, la gestion des erreurs, la personnalisation, l'authentification multi-facteurs, les crochets, les tests et le débogage. N'oubliez pas de remplacer les espaces réservés comme {YOUR-AUTH0-DOMAIN} et {YOUR-AUTH0-API-AUDIENCE} par vos valeurs AUTH0 réelles.

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!