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

> Étape 3 du tutoriel Amazon API Gateway

# Étape 3 du tutoriel AWS API Gateway

<Warning>
  Cette fonctionnalité utilise la délégation. Par défaut, la délégation est désactivée pour les locataires qui n’utilisaient aucun module complémentaire en date du 8 juin 2017. Les anciens locataires qui utilisent actuellement un module complémentaire nécessitant la délégation peuvent continuer à utiliser cette fonctionnalité. Si la fonctionnalité de délégation est modifiée ou retirée du service, les clients qui l’utilisent actuellement en seront avisés au préalable et disposeront de suffisamment de temps pour migrer. De plus, notez que la délégation ne prend pas en charge l’utilisation de domaines personnalisés; toute fonctionnalité qui en dépend pourrait donc ne pas être entièrement fonctionnelle avec un domaine personnalisé.
</Warning>

<div id="step-3-build-the-application">
  ## Étape 3 - Créer l’application
</div>

Dans cette étape, vous créerez une application monopage sans serveur à l’aide du framework AngularJS, que vous hébergerez dans un compartiment AWS S3 configuré comme site Web statique.

<div id="step-1-set-up-your-sample-application">
  ### Étape 1. Configurez votre application d’exemple
</div>

Pour partir d’une application simple, [téléchargez un projet d’exemple](https://github.com/auth0/auth0-aws/tree/master/examples/api-gateway/client) adapté à ce tutoriel. Connectez-vous pour que vos identifiants Auth0 soient préconfigurés.

Copiez le contenu de ce projet de démarrage dans un dossier local nommé `pets`, que vous utiliserez pour le reste de ce tutoriel. Dans ce dossier, mettez à jour `auth0-variables.js` avec les valeurs `AUTH0_CLIENT_ID` et `AUTH0_CLIENT_ID` de votre application Auth0 (ces renseignements sont accessibles dans le [Auth0 Dashboard](https://manage.auth0.com/#/applications) pour l’application en question).

<div id="aws-s3-bucket">
  #### Compartiment AWS S3
</div>

Assurez-vous d’avoir [créé le compartiment AWS S3 configuré pour servir de site Web statique](http://docs.aws.amazon.com/gettingstarted/latest/swh/website-hosting-intro.html). Pendant la configuration, copiez le contenu du dossier `pets` dans votre compartiment S3 pour fournir le contenu du site Web.

Si vous utilisez un compartiment existant, vous pouvez déplacer les fichiers avec l’AWS CLI à l’aide de la commande suivante.

```bash lines theme={null}
aws s3 cp --recursive --acl "public-read" ./ s3://{yourBucket}/
```

Avant de poursuivre, assurez-vous d’avoir au moins un utilisateur associé à votre connexion Username-Password-Authentication (ou à la connexion de base de données associée à l’application que vous utilisez). Pour profiter pleinement des fonctionnalités de votre application exemple et de son intégration avec AWS, vous aurez besoin de cet utilisateur pour tester l’authentification et y accéder.

Enfin, assurez-vous qu’Auth0 autorise l’authentification à partir de votre site Web en indiquant l’URL dans le champ **Allowed Origins** de la page Settings de votre application. L’URL de votre site Web devrait ressembler à ceci :

`http://your-bucket.s3-website-us-east-1.amazonaws.com`

Si vous ne connaissez pas votre URL, vous pouvez la trouver sous l’onglet **Properties** de votre compartiment S3.

Avant d’aller plus loin, testez l’ouverture de session dans votre application. Ouvrez `http://your-bucket-domain/index.html` dans votre navigateur. Après vous être connecté, vous devriez voir une boîte d’alerte s’afficher indiquant "getPets not implemented" :

Vous devriez aussi voir la page permettant de consulter les animaux de compagnie.

<div id="use-delegation-to-get-an-aws-token">
  ### Utiliser la délégation pour obtenir un jeton AWS
</div>

À ce stade, l’authentification est configurée avec Auth0, et vous disposez d’un <Tooltip tip="OpenID : norme ouverte d’authentification qui permet aux applications de vérifier l’identité des utilisateurs sans recueillir ni stocker les renseignements de connexion." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=OpenID">OpenID</Tooltip> <Tooltip tip="OpenID : norme ouverte d’authentification qui permet aux applications de vérifier l’identité des utilisateurs sans recueillir ni stocker les renseignements de connexion." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=JWT">JWT</Tooltip>. Voici la structure des répertoires du code généré :

<Frame>
  <img src="https://mintcdn.com/translations/MV7tE-x71x8RWRES/docs/images/cdy7uua7fh8z/5fYL14NE1L9WuzUyA0xTky/35e78ca14e6d0c5b36582b5b74a6fc55/aws-api-gateway-project.png?fit=max&auto=format&n=MV7tE-x71x8RWRES&q=85&s=19516d4cbc0347a1caf24023d06807f9" alt="AWS API Gateway - répertoire du projet" width="288" height="269" data-path="docs/images/cdy7uua7fh8z/5fYL14NE1L9WuzUyA0xTky/35e78ca14e6d0c5b36582b5b74a6fc55/aws-api-gateway-project.png" />
</Frame>

Vous pouvez utiliser la fonction de délégation d’Auth0 pour obtenir un jeton AWS <Tooltip tip="Jeton d’accès : information d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisée pour accéder à une API." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Access+Token">Jeton d’accès</Tooltip> fondé sur le <Tooltip tip="ID Token : information d’identification destinée au client lui-même, plutôt qu’à l’accès à une ressource." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=identity+token">jeton d’identité</Tooltip> Auth0. En coulisses, Auth0 authentifie votre jeton d’identité, puis utilise <Tooltip tip="ID Token : information d’identification destinée au client lui-même, plutôt qu’à l’accès à une ressource." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=SAML">SAML</Tooltip> selon le module complémentaire que vous avez configuré.

Mettez à jour `pets/login/login.js` comme suit afin d’obtenir un jeton de délégation AWS à partir du jeton d’identité après une connexion réussie avec `auth.signin`. Notez que vous considérez comme administrateur tout utilisateur qui ne s’est pas connecté au moyen d’une Connexion sociale. Plus tard, nous coderons un deuxième rôle et montrerons de meilleures façons d’imposer la sélection du rôle.

```js lines expandable theme={null}
auth.signin(params, function(profile, token) {
  //Définir l'utilisateur comme administrateur s'il n'a pas utilisé une connexion sociale.
  profile.isAdmin = !profile.identities[0].isSocial;
  store.set('profile', profile);
  store.set('token', token);

  // Obtenir le jeton de délégation à partir du jeton d'identité.
  var options = getOptionsForRole(profile.isAdmin, token);

  // TODO : Étape 3 : Activer cette section une fois la délégation AWS configurée.
  /*
  auth.getToken(options)
    .then(
      function(delegation)  {
        store.set('awstoken', delegation.Credentials);
        $location.path("/");
      },
    function(err) {
       console.log('failed to acquire delegation token', err);
  });
  */
  // TODO : Étape 3 : Supprimer cette redirection après avoir ajouté l'API d'obtention du jeton.
  $location.path("/");

}, function(error) {
  console.log("There was an error logging in", error);
});
```

<div id="modify-the-role-and-principal-strings">
  #### Modifier les chaînes `role` et `principal`
</div>

Pour modifier les chaînes `role` et `principal` (qui correspondent aux deux dernières lignes de l’instruction `if` dans la fonction fournie), indiquez les valeurs appropriées dans [Rules](https://manage.auth0.com/#/rules) :

```javascript lines theme={null}
function (user, context, callback) {
  if (context.clientID === 'CLIENT_ID' &&
      context.protocol === 'delegation') {
    // définir les paramètres AWS
    context.addonConfiguration = context.addonConfiguration || {};
    context.addonConfiguration.aws = context.addonConfiguration.aws || {};
    context.addonConfiguration.aws.principal = 'arn:aws:iam::[omitted]:saml-provider/auth0-provider';
    context.addonConfiguration.aws.role = 'arn:aws:iam::[omitted]:role/auth0-role';
  }

  callback(null, user, context);
}
```

Assurez-vous de remplacer les valeurs ARN `role` et `[principal]` par celles de votre intégration.

Copiez les fichiers mis à jour dans votre compartiment S3 pour votre site Web.

Au besoin, vous pouvez définir un point d’arrêt dans le navigateur à `store.set('awstoken', delegation.Credentials);`. Lorsque vous ouvrez une session de nouveau après vous être déconnecté, examinez `delegation.Credentials` lorsque vous atteignez le point d’arrêt. Vous verrez des valeurs familières comme AccessKeyId et SecretAccessKey :

```js lines theme={null}
{
    AccessKeyId: "ASIAJB...BNQ",
    SecretAccessKey: "vS+b6...2Noav",
    SessionToken: "AQoDYBqsivOV...DdQW0gsKr8rgU=",
    Expiration: "2015-08-27T14:48:32.000Z"
}
```

Si vous ne voyez pas ces valeurs, assurez-vous que le module complémentaire Amazon Web Services est activé dans l’onglet Addons de votre application Auth0.

<div id="display-pets-with-the-aws-api-service">
  ### Afficher les animaux avec le service API d’AWS
</div>

La première étape consiste à afficher les animaux aux utilisateurs finaux.

<div id="add-the-api-code-to-call-your-api">
  #### Ajoutez le code d’API pour appeler votre API
</div>

Pour ajouter le code d’API nécessaire à l’appel de votre service, copiez le contenu de `apiGateway-js-sdk.zip` que vous avez téléchargé précédemment dans le répertoire `pets`. Le contenu devrait inclure :

* `apiClient.js`;
* le dossier `lib`;
* `README.md`.

Pour examiner le téléchargement, consultez [Tutoriel AWS API Gateway, partie 2](/fr-CA/docs/customize/integrations/aws/aws-api-gateway-delegation/aws-api-gateway-delegation-2#deploy-the-api).

Un fichier `README.md` se trouve déjà dans le répertoire `pets`; vous devrez donc renommer l’un des fichiers pour pouvoir les conserver tous les deux dans ce répertoire. Le fichier `README.md` de la passerelle API explique comment utiliser l’application API depuis votre application Auth0.

Ouvrez le fichier `index.html` situé à la racine de votre dossier `pets` pour ajouter à `index.html` tous les scripts indiqués au haut du fichier README de l’API :

```html lines theme={null}
<!-- scripts pour aws api gateway à inclure après avoir créé votre package depuis aws pour api gateway. -->
<script type="text/javascript" src="/lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="/lib/moment/moment.js"></script>
<script type="text/javascript" src="/lib/url-template/url-template.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="/apigClient.js"></script>
```

Si vous ouvrez `apigClient.js`, vous verrez que la bibliothèque téléchargée a créé des fonctions d’enrobage comme `petsPost` et `petsGet` pour les méthodes de votre API. Vous n’avez pas besoin de modifier ce code généré.

<div id="configure-the-getpets-method">
  #### Configurer la méthode getPets
</div>

Ouvrez `home.js` dans le dossier `home`, puis mettez à jour le contenu de `getPets` avec une méthode pour récupérer les données sur les animaux de compagnie (assurez-vous de mettre à jour la région si vous n’utilisez pas `us-east-1`) :

```javascript lines theme={null}
function getPets() {
    // ceci n'est pas authentifié
    var apigClient = apigClientFactory.newClient({
        region: 'us-east-1' // La région où l'API est déployée
    });

    apigClient.petsGet({},{})
      .then(function(response) {
        console.log(response);
        $scope.pets = response.data;
        $scope.$apply();
      }).catch(function (response) {
        alert('pets get failed');
        showError(response);
    });
}
```

Copiez le code mis à jour dans votre compartiment S3. Actualisez la page pour voir deux animaux s’afficher (si vous avez exécuté le test décrit précédemment sur vos API, qui a créé ces animaux de compagnie).

<div id="update-pets-with-the-aws-api-service">
  ### Mettre à jour les animaux avec le service API AWS
</div>

Maintenant que vous disposez d’une application Auth0 fonctionnelle avec API Gateway, vous allez ajouter une méthode pour mettre à jour la table `pets`.

Modifiez la logique de la méthode `putPets` afin de mettre à jour les animaux à l’aide de votre fonction d’API. Cette fonction servira à la fois à ajouter et à supprimer des animaux.

```javascript lines theme={null}
function putPets(updatedPets) {
    var body = {pets: updatedPets};

    var apigClient = apigClientFactory.newClient({
        region: 'us-east-1' // définissez ceci sur la région dans laquelle vous exécutez votre application.
    });

    apigClient.petsPost({},body)
      .then(function(response) {
        console.log(response);
       }).catch(function (response) {
        alert('pets update failed');
        showError(response);
      });
}
```

Copiez le code mis à jour dans votre compartiment S3. Testez la méthode :

1. Déconnectez-vous, puis reconnectez-vous.
2. Saisissez des valeurs pour `Pet Type` et `Pet Price`.
3. Cliquez sur **Enregistrer** pour envoyer vos données.

Vous devriez voir un message indiquant : "Nous avons un `<Pet Type>` à vendre pour `<Pet Price>`", avec un bouton rouge **SUPPRIMER** à gauche.

Pour renforcer la sécurité, ajoutez la fonction `getSecureApiClient` au début de la méthode `putPets` :

```javascript lines theme={null}
function putPets(updatedPets) {
     var apigClient = getSecureApiClient();
}
```

Copiez le code dans votre compartiment S3.

La fonction `getSecureApiClient` fournie récupère, dans le stockage local, le jeton AWS obtenu par délégation à l’API, puis utilise la clé d’accès, la clé secrète et le jeton de session :

```javascript lines theme={null}
function getSecureApiClient() {
    var awstoken = store.get('awstoken');

    return apigClientFactory.newClient({
        accessKey: awstoken.AccessKeyId,
        secretKey: awstoken.SecretAccessKey,
        sessionToken: awstoken.SessionToken,
        region: 'us-east-1' // La région dans laquelle vous travaillez.
    });
  }
```