> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-fix-docs-5528-php-updates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Configuration Auth0 (SPA + API)
> Configuration Auth0 pour le scénario d’architecture SPA + API
Dans cette section, nous passerons en revue toutes les configurations que nous devons appliquer à l’[Auth0 Dashboard](https://manage.auth0.com/#).
## Créer l’API
Accédez à la [section API](https://manage.auth0.com/#/apis) du tableau de bord, puis cliquez sur le bouton **Créer une API**.
On vous demandera de fournir les informations suivantes concernant votre API :
* **Nom** : un nom convivial pour l’API. N’affecte aucune fonctionnalité.
* **Identifiant** : un identifiant unique pour votre API. Nous recommandons d’utiliser une URL, mais il n’est pas nécessaire qu’elle soit une URL accessible au public, Auth0 n’appellera pas votre API. Cette valeur ne peut pas être modifiée par la suite.
* **Algorithme de signature** : l’algorithme utilisé pour signer les jetons. Les valeurs possibles sont `HS256` et `RS256`. Si vous sélectionnez RS256, le jeton sera signé avec la clé privée de votre locataire. Pour en savoir plus sur les algorithmes de signature, veuillez consulter [Algorithmes de signature](/docs/fr-ca/get-started/applications/signing-algorithms).
Remplissez les informations requises et cliquez sur le bouton **Créer**.
## Configurer les permissions
Une fois l’application créée, il vous faudra configurer les permissions que les applications pourront solliciter lors du processus d’autorisation.
Dans les paramètres de votre API, accédez à l’onglet Autorisations. Dans cette section, vous pouvez ajouter les permissions de notre étude de cas : `read:timesheets`, `create:timesheets`, `delete:timesheets`, et `approve:timesheets`.
## Créer l’application
Il existe quatre types d’applications dans Auth0 :
* **Application native**(utilisée par les applications mobiles ou de bureau);
* **Application Web à page unique**;
* **Application Web classique;** et
* **Machine to Machine App (Application de communication entre machines)** (utilisée par les CLI, les démons ou les services exécutés sur votre système dorsal).
Dans ce scénario, nous souhaitons créer une nouvelle application pour notre SPA. Nous opterons donc pour une application à page unique comme type d’application.
Pour créer une nouvelle application, accédez à [Tableau de bord](https://manage.auth0.com/#) et cliquez sur l’option de menu [Applications](https://manage.auth0.com/#/applications) sur la gauche. Cliquez sur le bouton **+ Créer une application**.
Définissez un nom pour votre application (nous utiliserons `Timesheets SPA`) et sélectionnez `Single-Page Web App` pour le type.
Cliquez sur **Créer**.
C’est tout pour l’instant. Une fois la mise en œuvre de la SPA terminée, nous retournerons au tableau de bord ainsi qu’aux paramètres de cette application afin d’y apporter certaines modifications de configuration.
## Configurer l’extension d’autorisation
Vous devrez vous assurer que Authorization Extension est installée pour votre locataire. Vous pouvez consulter la [Documentation d’Authorization Extension](/docs/fr-ca/customize/extensions/authorization-extension) pour obtenir plus de détails sur la façon de procéder.
### Définir les autorisations
Vous allez maintenant définir les autorisations requises, en fonction des permissions que vous avez déjà définies : `read:timesheets`, `create:timesheets`, `delete:timesheets`, et `approve:timesheets`.
Dans Authorization Extension, cliquez sur l’onglet **Permissions (Autorisations)**, puis cliquez sur le bouton **Create Permission (Créer une autorisation)**.
Dans la boîte de dialogue, saisissez les détails de chaque autorisation.
Assurez-vous que le nom de l’autorisation est exactement le même que la permission correspondante :
Procédez à la création des autorisations pour l’ensemble des permissions restantes :
### Définir les rôles
Passons ensuite à la configuration des deux rôles : employé et gestionnaire.
Accédez à l’onglet **Rôles**, cliquez sur le bouton **Créer un rôle** et sélectionnez l’application **SPA Feuilles de temps**.
Réglez le **Nom** et la **Description** sur `Employee`, et sélectionnez les autorisations `delete:timesheets`, `create:timesheets` et `read:timesheets` permissions. Cliquez sur **Enregistrer**.
Ensuite, appliquez le même processus pour créer un rôle de `Manager`, en veillant à sélectionner l’ensemble des autorisations.
### Assigner des utilisateurs à des rôles
Vous devez assigner tous les utilisateurs soit au rôle `Manager` , soit au rôle `Employee`.
Vous pouvez accomplir cela en accédant à l’onglet **Users (Utilisateurs)** dans Authorization Extension et en sélectionnant un utilisateur.
Sur l’écran d’informations utilisateur, accédez à l’onglet **Rôles**. Cliquez sur **Ajouter un rôle à l’utilisateur** et sélectionnez le rôle approprié.
### Configurer Authorization Extension
Vous devrez également vous assurer que la règle relative à Authorization Extension est publiée.
Pour ce faire, cliquez sur votre avatar utilisateur situé en haut à droite d’Authorization Extension, puis sélectionnez **Configuration**.
Assurez-vous que le paramètre **Autorisations** est activé, puis cliquez sur **Publier la règle**.
### Créer une règle pour valider les permissions des jetons
La dernière étape de ce processus consiste à créer une règle permettant de vérifier la validité des permissions contenues dans un jeton d’accès, en fonction des autorisations attribuées à l’utilisateur. Toutes les permissions non valides pour un utilisateur doivent être supprimées du jeton d’accès.
Dans votre tableau de bord Auth0, accédez à l’onglet **Rules (Règles)**. Vous devriez voir la règle créée par Authorization Extension. Cliquez sur le bouton **Create Rule (Créer une règle)** et sélectionnez le modèle **Empty Rule (Règle vide)**. Vous pouvez affecter un nom à la règle, par exemple **Access Token Scopes (Permissions des jetons d’accès)**, puis préciser le code suivant pour la règle :
```javascript lines theme={null}
function (user, context, callback) {
var permissions = user.permissions || [];
var requestedScopes = context.request.body.scope || context.request.query.scope;
var filteredScopes = requestedScopes.split(' ').filter( function(x) {
return x.indexOf(':') < 0;
});
var allScopes = filteredScopes.concat(permissions);
context.accessToken.scope = allScopes.join(' ');
callback(null, user, context);
}
```
Le code ci-dessus garantira que tous les jetons d’accès ne contiendront que les permissions correctement formatées (p. ex., `action:area` ou `delete:timesheets`) qui sont valides en fonction des autorisations d’un utilisateur. Une fois que vous avez terminé, vous pouvez cliquer sur le bouton **Enregistrer**.
Les règles s’exécutent dans l’ordre dans lequel elles figurent sur la page Règles. Veillez donc à ce que la nouvelle règle que vous avez créée soit placée sous la règle d’Authorization Extension, afin qu’elle s’exécute après celle-ci.