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

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

# Configuration d’Auth0 (SPA + API)

Dans cette section, nous passerons en revue toutes les configurations à 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) de l’Auth0 Dashboard, puis cliquez sur le bouton **Create API**.

Vous devrez fournir les renseignements suivants pour votre API :

* **Nom** : un nom convivial pour l’API. Cela n’affecte aucune fonctionnalité.
* **Identifiant** : un identifiant unique pour l’API. Nous vous recommandons d’utiliser une URL, mais notez qu’elle n’a pas besoin d’être accessible publiquement, car Auth0 n’appellera jamais votre API. Cette valeur ne peut pas être modifiée par la suite.
* **<Tooltip tip="Algorithme de signature : algorithme utilisé pour signer numériquement les jetons afin de garantir que le jeton n’a pas été altéré." cta="Voir le glossaire" href="/fr-CA/docs/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 locataire. Pour en savoir plus sur les algorithmes de signature, consultez [Signing Algorithms](/fr-CA/docs/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="Dashboard - Applications - APIs - Create API - Popup" 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 **Create**.

<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 permission. 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="Auth0 Dashboard - Applications - APIs - permission" 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’applications dans Auth0 :

* **Application native** (utilisée par les applications mobiles ou de bureau),
* **Application Web monopage**,
* **Application Web classique** et
* **Application machine à machine** (utilisée par les CLI, les démons ou les services qui s’exécutent sur votre backend).

Dans ce scénario, nous voulons créer une nouvelle application pour notre SPA; nous utiliserons donc le type d’application `Single-Page Web App`.

Pour créer une nouvelle application, accédez à l’[Auth0 Dashboard](https://manage.auth0.com/#), puis cliquez sur l’option de 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 `Single-Page Web App` comme type.

Cliquez sur **Create**.

C’est tout pour le moment. Une fois l’implémentation de la SPA terminée, nous reviendrons dans l’Auth0 Dashboard et dans les paramètres de cette application pour apporter quelques modifications à sa configuration.

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

Vous devez vous assurer qu’Authorization Extension est installée pour votre locataire. Consultez la [documentation d’Authorization Extension](/fr-CA/docs/customize/extensions/authorization-extension) pour savoir comment faire.

<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 **permission**, puis sur le bouton **Create Permission**.

Dans la boîte de dialogue, saisissez les renseignements pour chaque permission.

Assurez-vous que le nom de la permission est exactement le même que le scope correspondant :

<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 :

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

Ensuite, configurons les deux rôles : employee et manager.

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

Définissez le **Nom** et la **Description** à `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`, en vous assurant d’avoir sélectionné toutes les autorisations.

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

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

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

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

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

Vous devez également 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 les **permissions** sont activées, puis cliquez sur **Publish Rule**.

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

La dernière étape de ce processus consiste à créer une Rule pour vérifier si les scopes contenus dans un <Tooltip tip="Jeton d’accès : justificatif d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, servant à accéder à une API." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Access+Token">Jeton d’accès</Tooltip> sont valides en fonction des autorisations attribuées à l’utilisateur. Les scopes qui ne sont pas valides pour un utilisateur doivent être retirés du Jeton d’accès.

Dans votre <Tooltip tip="Auth0 Dashboard : principal produit d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/fr-CA/docs/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 modèle **Empty Rule**. Vous pouvez donner un nom à la Rule, par exemple **Scopes du jeton d’accès**, puis indiquer le code suivant pour 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 fera en sorte que tous les jetons d’accès ne contiennent que des scopes correctement formatés (p. ex., `action:area` ou `delete:timesheets`) qui sont valides selon les permissions de l’utilisateur. Une fois cela fait, 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 Rule que vous avez créée est placée sous la Rule de l’Authorization Extension, afin qu’elle s’exécute après la Rule de l’Authorization Extension.