Applications à page unique (SPA) avec API
Dans ce scénario, nous allons créer une API de feuilles de temps pour une entreprise fictive appelée ExampleCo. L’API permettra d’ajouter des entrées de feuilles de temps pour un employé ou un entrepreneur.
Nous construirons également une application à page unique (SPA) qui sera utilisée pour enregistrer les entrées des feuilles de temps et les envoyer à la base de données centralisée des feuilles de temps à l’aide de l’API.
::: Panneau TLDR
- Auth0 fournit l’authentification et l’autorisation API comme moyen de sécuriser l’accès aux points de terminaison API (voir API Authentification and authorisation )
- Pour autoriser un utilisateur d’une SPA, Auth0 recommande l’utilisation du flux de code d’autorisation avec PKCE (voir Authorization Code Flow with PKCE) pour plus d’informations.* L’application à page unique (SPA) et l’API doivent être configurées dans Auth0 Dashboard (voir Auth0 Configuration)
- Les autorisations des utilisateurs peuvent être appliquées à l’aide de l’extension d’autorisation (voir Configure the Authorization Extension)
- L’API sera sécurisée en veillant à ce qu’un jeton d’accès valide soit transmis dans l’en-tête d’autorisation HTTP lors des appels à l’API (voir Implement the API)
- La bibliothèque Auth0.js peut être utilisée pour autoriser l’utilisateur de l’application à page unique (SPA) et obtenir un jeton d’accès valide pouvant être utilisé pour appeler l’API (voir Authorize the User)
- L’application à page unique (SPA) peut transmettre le jeton d’accès dans l’en-tête d’autorisation HTTP lors de l’appel à l’API (voir Call the API)
- L’application à page unique (SPA) peut afficher des éléments d’interface utilisateur de manière conditionnelle en fonction des permissions accordées à l’utilisateur (voir Display UI Elements Conditionally Based on Scope) :::
Bien qu’Auth0 prenne en charge l’utilisation de l’octroi implicite pour les applications basées sur un navigateur ne nécessitant qu’un jeton d’ID, il est conseillé d’utiliser l’octroi de code d’autorisation avec PKCE. Pour des informations détaillées, veuillez consulter Octroi implicite OAuth2 et SPA sur le blog Auth0.
Si vous avez besoin d’un Jeton d’actualisation pour obtenir un nouveau jeton d’accès ou jeton d’ID sans avoir à réauthentifier l’utilisateur, vous devez alors utiliser l’octroi de code d’autorisation.
Le principe
ExampleCo est une société de conseil en démarrage. Elle emploie actuellement une centaine de personnes et sous-traite également plusieurs activités à des sous-traitants externes. Tous les employés et les sous-traitants externes sont tenus de remplir leurs feuilles de temps chaque semaine.
La société à développé une application de feuilles de présence, scénario que nous avons abordé dans Authentification unique pour les applications Web classiques. Les employés internes utilisent cette application web pour remplir leurs feuilles de temps, mais l’entreprise souhaite la remplacer par une SPA. L’application sera utilisée pour enregistrer les entrées des feuilles de temps et envoyer les données à la base de données centralisée des feuilles de temps à l’aide de l’API. L’application permettra également aux responsables d’approuver les entrées de feuilles de temps.
Objectifs et exigences
ExampleCo souhaite mettre en place une solution flexible. Pour l’instant, seule une SPA est nécessaire pour saisir les feuilles de temps, mais à l’avenir, l’entreprise prévoit de lancer d’autres applications, comme une application mobile pour ses équipes de vente. C’est pourquoi l’entreprise a décidé de développer une API de feuilles de temps unique qui sera utilisée pour enregistrer le temps non seulement par ce processus de serveur, mais aussi par toutes les applications futures. L’entreprise souhaite mettre en place une architecture de sécurité suffisamment souple pour s’adapter à cette situation. ExampleCo veut s’assurer qu’une grande partie du code et de la logique commerciale de l’application peut être partagée entre les différentes applications.
Seuls les utilisateurs et les applications autorisés peuvent accéder à l’API de feuilles de temps.
Deux types d’utilisateurs utiliseront cette SPA : les employés et les gestionnaires. Les employés doivent pouvoir lire, créer et supprimer leurs propres entrées de feuilles de temps, tandis que les responsables doivent également pouvoir approuver les feuilles de temps.