> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-feat-init-gt-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/#).

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

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/docs-dev-feat-init-gt-translations/pK24zKWLhA0dvqKX/docs/images/cdy7uua7fh8z/4kIH4BQc4vDel2zhJ6lwCE/094cff6e8e1788c39796eb28ab1925ca/2024-06-27_14-50-24.png?fit=max&auto=format&n=pK24zKWLhA0dvqKX&q=85&s=4968608aefe923f3a60730559eb2f676" 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**.

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

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/docs-dev-feat-init-gt-translations/4n7yQNDlmu-4xlCI/docs/images/cdy7uua7fh8z/xxMOKezob6gNHJ0CcKhcg/ccbb9bbab29576a96ed8425329ecffb4/dashboard-apis-edit_view-permissions.png?fit=max&auto=format&n=4n7yQNDlmu-4xlCI&q=85&s=9111d1e394a5f49b3e3692141c6c7432" alt="Dashboard - Applications - APIs - Permissions" width="1260" height="784" data-path="docs/images/cdy7uua7fh8z/xxMOKezob6gNHJ0CcKhcg/ccbb9bbab29576a96ed8425329ecffb4/dashboard-apis-edit_view-permissions.png" />
</Frame>

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

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.

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

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.

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

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/docs-dev-feat-init-gt-translations/ga3rC1_4s-OF6Vr-/docs/images/cdy7uua7fh8z/6G4X14X3A73IDRwOrkmttq/e0c20c44a32e0b39a6d8fb72731ffbaf/create-permission.png?fit=max&auto=format&n=ga3rC1_4s-OF6Vr-&q=85&s=244208d8b8ad73b3b79706c35e64fb9a" 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 :

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

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.

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

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é.

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

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**.

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

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.