> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Auth0 Configuration pour le scénario d’architecture SPAs + API

# Auth0 Configuration (SPAs + API)

Dans cette section, nous passerons en revue toute la configuration à appliquer dans l’[Auth0 Dashboard](https://manage.auth0.com/#).

<div id="create-the-api">
  ## Créer l’API
</div>

Accédez à la [section APIs](https://manage.auth0.com/#/apis) du tableau de bord, puis cliquez sur le bouton **Créer une API**.

Vous devrez fournir les renseignements suivants pour votre API :

* **Nom** : un nom descriptif pour l’API. Cela n’a aucune incidence sur son fonctionnement.
* **Identifiant** : un identifiant unique pour l’API. Nous vous recommandons d’utiliser une URL, mais notez qu’elle n’a pas à être accessible publiquement ; Auth0 n’enverra aucune requête à votre API. Cette valeur ne peut pas être modifiée par la suite.
* **<Tooltip tip="Algorithme de signature : algorithme utilisé pour signer numériquement des jetons afin de garantir que le jeton n’a pas été altéré." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Signing+Algorithm">Algorithme de signature</Tooltip>** : l’algorithme utilisé pour signer les jetons. Les valeurs possibles sont `HS256` et `RS256`. Si vous sélectionnez RS256, le jeton sera signé à l’aide de la clé privée du tenant. Pour en savoir plus sur les algorithmes de signature, consultez [Algorithmes de signature](/docs/fr-ca/get-started/applications/signing-algorithms).

<Frame>
  <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4kIH4BQc4vDel2zhJ6lwCE/094cff6e8e1788c39796eb28ab1925ca/2024-06-27_14-50-24.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=ba2b5abee5018b4b55bd3e136e6673ac" alt="Tableau de bord - Applications - APIs - Créer une API - Fenêtre contextuelle" width="624" height="736" data-path="docs/images/cdy7uua7fh8z/4kIH4BQc4vDel2zhJ6lwCE/094cff6e8e1788c39796eb28ab1925ca/2024-06-27_14-50-24.png" />
</Frame>

Remplissez les renseignements requis, puis cliquez sur le bouton **Créer**.

<div id="configure-the-scopes">
  ## Configurer les scopes
</div>

Une fois l’application créée, vous devrez configurer les scopes que les applications peuvent demander lors de l’autorisation.

Dans les paramètres de votre API, accédez à l’onglet Permissions. Dans cette section, vous pouvez ajouter les scopes pour notre cas d’utilisation : `read:timesheets`, `create:timesheets`, `delete:timesheets` et `approve:timesheets`.

<Frame>
  <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/cdy7uua7fh8z/xxMOKezob6gNHJ0CcKhcg/ccbb9bbab29576a96ed8425329ecffb4/dashboard-apis-edit_view-permissions.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=b9f2abf9032519ff3382e45a2f73596b" alt="Dashboard - Applications - APIs - Permissions" width="1260" height="784" data-path="docs/images/cdy7uua7fh8z/xxMOKezob6gNHJ0CcKhcg/ccbb9bbab29576a96ed8425329ecffb4/dashboard-apis-edit_view-permissions.png" />
</Frame>

<div id="create-the-application">
  ## Créer l’Application
</div>

Il existe quatre types d’application dans Auth0 :

* **Application native** (utilisée par les applis mobiles ou de bureau),
* **Application Web monopage**,
* **Application Web traditionnelle** et
* **Application Machine to Machine** (utilisée par les CLI, les démons ou les services exécutés sur votre backend).

Dans ce scénario, nous voulons créer une nouvelle Application pour notre SPA; nous utiliserons donc **Single-Page Application** comme type d’application.

Pour créer une nouvelle Application, accédez au [dashboard](https://manage.auth0.com/#) et cliquez sur l’option du menu [Applications](https://manage.auth0.com/#/applications) à gauche. Cliquez sur le bouton **+ Create Application**.

Attribuez un nom à votre Application (nous utiliserons `Timesheets SPA`) et sélectionnez `Application Web monopage` comme type.

Cliquez sur **Create**.

C’est tout pour l’instant. Lorsque nous aurons terminé la mise en œuvre de la SPA, nous reviendrons au dashboard et aux paramètres de cette Application pour apporter quelques modifications à sa configuration.

<div id="configure-the-authorization-extension">
  ## Configurer l’Authorization Extension
</div>

Vous devrez vous assurer que l’Authorization Extension est installée dans votre tenant. Vous pouvez consulter la [documentation de l’Authorization Extension](/docs/fr-ca/customize/extensions/authorization-extension) pour savoir comment procéder.

<div id="define-permissions">
  ### Définir les Permissions
</div>

Vous allez maintenant définir les Permissions requises en fonction des scopes que vous avez déjà définis : `read:timesheets`, `create:timesheets`, `delete:timesheets` et `approve:timesheets`.

Dans l’Authorization Extension, cliquez sur l’onglet **Permissions**, puis sur le bouton **Create Permission**.

Dans la boîte de dialogue, saisissez les détails de chaque permission.

Assurez-vous que le nom de la permission correspond exactement au scope associé :

<Frame>
  <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6G4X14X3A73IDRwOrkmttq/e0c20c44a32e0b39a6d8fb72731ffbaf/create-permission.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=8d4494794edc7f100262161e743f40a5" alt="Dashboard - Extensions - Authorization Extension - Create Permission" width="1264" height="794" data-path="docs/images/cdy7uua7fh8z/6G4X14X3A73IDRwOrkmttq/e0c20c44a32e0b39a6d8fb72731ffbaf/create-permission.png" />
</Frame>

Créez ensuite les permissions pour tous les autres scopes restants :

<div id="define-roles">
  ### Définir les rôles
</div>

Ensuite, configurons les deux **Roles** : `Employee` et `Manager`.

Accédez à l’onglet **Roles**, cliquez sur le bouton **Create Role**, puis sélectionnez l’application **Timesheets SPA**.

Définissez **Name** et **Description** sur `Employee`, puis sélectionnez les autorisations `delete:timesheets`, `create:timesheets` et `read:timesheets`. Cliquez sur **Save**.

Ensuite, suivez le même processus pour créer un rôle `Manager`, et assurez-vous d’avoir sélectionné toutes les autorisations.

<div id="assign-users-to-roles">
  ### Attribuer des rôles aux utilisateurs
</div>

Vous devez attribuer à tous les utilisateurs soit le rôle `Manager`, soit le rôle `Employee`.

Pour ce faire, accédez à l’onglet **Users** dans l’Authorization Extension et sélectionnez un utilisateur.

Dans l’écran d’information de l’utilisateur, accédez à l’onglet **Roles**. Cliquez sur **Add Role to User**, puis sélectionnez le rôle approprié.

<div id="configuring-the-authorization-extension">
  ### Configurer l’Authorization Extension
</div>

Vous devrez aussi vous assurer que la Rule de l’Authorization Extension est publiée.

Pour ce faire, cliquez sur votre avatar dans le coin supérieur droit de l’Authorization Extension, puis sélectionnez **Configuration**.

Assurez-vous que **Permissions** est activé, puis cliquez sur **Publish Rule**.

<div id="create-a-rule-to-validate-token-scopes">
  ### Créer une Rule pour valider les scopes du token
</div>

La dernière étape de ce processus consiste à créer une Rule afin de vérifier si les scopes contenus dans un <Tooltip tip="jeton d’accès : identifiant d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisé pour accéder à une API." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Access+Token">jeton d’accès</Tooltip> sont valides selon les permissions attribuées à l’utilisateur. Tout scope qui n’est pas valide pour un utilisateur doit être supprimé du jeton d’accès.

Dans votre <Tooltip tip="Auth0 Dashboard : principal produit d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>, accédez à l’onglet **Rules**. Vous devriez voir la Rule créée par l’Authorization Extension. Cliquez sur le bouton **Create Rule** et sélectionnez le template **Empty Rule**. Vous pouvez donner un nom à la Rule, par exemple **Access Token Scopes**, puis ajouter le code suivant à la Rule :

```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 garantit que tous les jetons d’accès ne contiendront que des scopes au format approprié (p. ex., `action:area` ou `delete:timesheets`) qui sont valides en fonction des autorisations d’un utilisateur. Une fois terminé, vous pouvez cliquer sur le bouton **Enregistrer**.

Les Rules s’exécutent dans l’ordre où elles sont affichées sur la page Rules. Assurez-vous donc que la nouvelle règle que vous avez créée est placée sous la règle de l’Authorization Extension, afin qu’elle s’exécute après la règle Authorization Extension.