> ## 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 2 du tutoriel sur Amazon API Gateway

# Tutoriel AWS API Gateway : étape 2

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

<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 informés à l’avance 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; par conséquent, toute fonctionnalité qui en dépend pourrait ne pas être entièrement fonctionnelle avec un domaine personnalisé.
</Warning>

<div id="step-2-secure-and-deploy-the-amazon-api-gateway">
  ## Étape 2 - Sécuriser et déployer Amazon API Gateway
</div>

Maintenant que votre API fonctionne, vous devez la sécuriser. À cette étape, vous allez :

* Sécuriser l’API de mise à jour afin de limiter l’accès aux utilisateurs authentifiés ayant un rôle AWS IAM précis ;
* Configurer la délégation Auth0 pour utiliser les capacités de fédération d’AWS IAM ;
* Obtenir un <Tooltip tip="Jeton d’accès : justificatif d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisé pour accéder à une API." cta="Consulter le glossaire" href="/fr-CA/docs/glossary?term=Access+Token">Jeton d’accès</Tooltip> AWS associé au rôle AWS IAM.

Une fois votre API sécurisée, vous créerez une application monopage (SPA) sans serveur. La SPA s’appuiera sur la fédération d’identité pour déterminer quels utilisateurs sont autorisés à y accéder. En combinant l’intégration AWS IAM pour API Gateway d’AWS, la fédération d’identité AWS IAM pour <Tooltip tip="Security Assertion Markup Language (SAML) : protocole normalisé permettant à deux parties d’échanger des renseignements d’authentification sans mot de passe." cta="Consulter le glossaire" href="/fr-CA/docs/glossary?term=SAML">SAML</Tooltip>, et la délégation Auth0 pour AWS, vous pouvez permettre à des utilisateurs provenant de nombreuses sources différentes, y compris des fournisseurs sociaux ou des connexions d’entreprise, d’accéder à vos API. Le diagramme suivant illustre un exemple de flux utilisant un <Tooltip tip="fournisseur d’identité (IdP) : service qui stocke et gère les identités numériques." cta="Consulter le glossaire" href="/fr-CA/docs/glossary?term=Identity+Provider">fournisseur d’identité</Tooltip> basé sur SAML, ainsi que la fédération SAML et la délégation Auth0 pour AWS.

Vous verrez deux façons d’implémenter ce flux :

1. Utiliser la délégation Auth0 avec AWS IAM ;
2. Ajouter un jeton d’identité afin de transmettre l’identité à la fonction Lambda.

La délégation vous permet d’obtenir facilement des jetons AWS pour accéder aux services AWS dans votre application.

<div id="ways-to-secure-the-amazon-api-gateway">
  ### Méthodes pour sécuriser Amazon API Gateway
</div>

AWS API Gateway offre plusieurs méthodes pour sécuriser vos API :

1. des clés API ;
2. IAM ;
3. [Amazon Cognito](/fr-CA/docs/customize/integrations/aws/aws-api-gateway-cognito).

L’utilisation de clés API convient généralement aux interactions de service à service, comme illustré ci-dessous. Cependant, cette approche présente plusieurs inconvénients :

* Stocker un secret de longue durée dans l’application est risqué (les applications sont plus faciles à compromettre) ;
* La mise en place d’un mécanisme pour émettre et gérer des clés API exige une implémentation sécurisée, qui peut être complexe à développer.

Cette section du tutoriel utilise des rôles et des politiques IAM pour sécuriser votre API dans API Gateway, mais vous pouvez aussi choisir de le faire à l’aide des User Pools d’Amazon Cognito. Pour consulter des instructions détaillées sur la sécurisation de votre API AWS, lisez [Secure AWS API Gateway Using Cognito](/fr-CA/docs/customize/integrations/aws/aws-api-gateway-cognito). Pour en savoir plus sur l’utilisation des rôles et des politiques IAM, consultez l’article d’Amazon, [Control access to an API with IAM permissions](http://docs.aws.amazon.com/apigateway/latest/developerguide/permissions.html). Pour en savoir plus sur les User Pools dans Cognito, consultez [Amazon Cognit user pool](http://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools.html).

<div id="step-1-configure-iam-and-auth0-for-saml-integration-with-the-api-gateway">
  ### Étape 1. Configurer IAM et Auth0 pour l’intégration SAML avec API Gateway
</div>

Vous pouvez spécifier un rôle AWS IAM pour le jeton SAML que vous échangez contre un jeton AWS. Selon les autorisations accordées à ce rôle AWS IAM (définies à l’aide de votre fournisseur d’identité), le jeton reçu dispose de ces mêmes autorisations. En émettant différents jetons SAML, chacun associé à son propre rôle AWS IAM, vous pouvez contrôler les niveaux d’accès de vos utilisateurs.

Par exemple, le fournisseur d’identité (IdP) peut spécifier le rôle IAM en fonction de l’appartenance à un groupe (par exemple, un administrateur d’Active Directory) ou de la source d’authentification (par exemple, une connexion de base de données ou un fournisseur d’identité social comme Facebook). Cette approche vous permet de différencier l’accès de vos utilisateurs à vos méthodes Amazon API Gateway lorsqu’elles sont sécurisées à l’aide d’AWS IAM.

<div id="configure-auth0">
  #### Configurer Auth0
</div>

Ouvrez une session dans votre compte Auth0. Vous serez redirigé vers l’Auth0 Dashboard de gestion. Cliquez sur **+ New Application**, situé dans le coin supérieur droit de la page.

Donnez à votre nouvelle application le nom AWS API Gateway, puis indiquez qu’il s’agit d’une application monopage. Cliquez sur **Create**.

Accédez à l’onglet Addons de votre application nouvellement créée. À l’aide du curseur approprié, activez Amazon Web Services. Cela active la délégation AWS.

<div id="configure-aws">
  #### Configurer AWS
</div>

Suivez le tutoriel [How to Set Up AWS for Delegated Authentication](/fr-CA/docs/customize/integrations/aws/how-to-set-up-aws-for-delegated-authentication) pour configurer AWS pour l’accès délégué, qui utilise SAML. Quelques points à noter :

* Suivez les [instructions ci-dessous](#setting-the-permissions-policy-on-your-iws-iam-role) pour associer la stratégie d’autorisations à votre rôle, plutôt que celles indiquées dans le tutoriel lié ;
* Nommez le fournisseur SAML que vous créez `auth0` ;
* Nommez le rôle AWS IAM `auth0-api-role`.

<div id="set-the-permissions-policy-on-your-iws-iam-role">
  ##### Définissez la stratégie d’autorisations pour votre rôle IAM IWS
</div>

Une fois que vous avez configuré le rôle IAM AWS, ajoutez une stratégie à `auth0-api-role` qui vous autorise à exécuter les méthodes de votre API Gateway. Pour en savoir plus sur ce processus, consultez [Autorisations d’accès utilisateur pour Amazon API Gateway](http://docs.aws.amazon.com/apigateway/latest/developerguide/permissions.html).

<div id="getting-the-gateway-api-arn">
  #### Obtenir l’ARN de l’API Gateway
</div>

Avant de commencer, vous aurez besoin de l’ARN de votre API Gateway :

1. Accédez à la [console Amazon API Gateway](https://console.aws.amazon.com/apigateway) et ouvrez une session.
2. Sélectionnez l’API appropriée.
3. Cliquez sur l’une des méthodes associées à l’API pour afficher la page Method Execution.
4. Sur la page Method Execution, la zone Method Request, dans le coin supérieur gauche, affiche l’**ARN** de l’API, mais celui-ci inclut le nom de la méthode :

`arn:aws:execute-api:us-east-2:484857107747:97i1dwv0j4/*/POST/`

Supprimez le nom de la méthode pour obtenir l’ARN de base de l’API :

`arn:aws:execute-api:us-east-2:484857107747:97i1dwv0j4/*`

Le caractère générique (`*`) dans l’ARN ci-dessus permet d’accorder des autorisations à votre API pour toutes les étapes, mais vous pouvez déployer différentes étapes individuellement (par exemple, développement, puis test, puis production).

Sélectionnez le rôle `auth0-api-role` que vous venez de créer pour ouvrir sa page résumé.

Développez **Inline Policies**, puis cliquez sur **click here**.

Sélectionnez **Custom Policy**, puis cliquez sur **Select**.

Modifiez votre document de stratégie. Vous pouvez définir le **nom de la stratégie** comme vous le souhaitez, mais nous vous suggérons quelque chose comme `api-gateway-policy`. Pour activer l’accès aux méthodes de l’API pour ce rôle, appliquez la stratégie suivante après avoir remplacé l’ARN par celui de votre API.

```json lines theme={null}
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "execute-api:*"
            ],
            "Resource": [
                "arn:[{yourArn}]"
            ]
        }
    ]
}
```

Cliquez sur **Appliquer la stratégie**.

Puisque l’API Gateway assumera ce rôle au nom de l’utilisateur, la stratégie de confiance doit autoriser cette action. Pour ce faire, modifiez les Trust Relationships du rôle en accédant à cet onglet sur la page Résumé du rôle.

La relation d’approbation finale devrait ressembler à ceci :

export const codeExample = `{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "auth0",
      "Effect": "Allow",
      "Principal": {
        "Federated": "arn:aws:iam::012345670:saml-provider/auth0-api"
      },
      "Action": "sts:AssumeRoleWithSAML",
      "Condition": {
        "StringEquals": {
          "SAML:iss": "urn:{yourDomain}"
        }
      }
    },
    {
      "Sid": "gateway",
      "Effect": "Allow",
      "Principal": {
        "Service": "apigateway.amazonaws.com"
      },
      "Action": "sts:AssumeRole"
    }
  ]
}`;

<AuthCodeBlock children={codeExample} language="json" />

À cette étape, vous devrez configurer les paramètres d’autorisation dans [API Gateway](https://console.aws.amazon.com/apigateway).

Dans la vue **Resources**, sélectionnez la méthode POST sous `/pets`.

Cliquez sur le lien **Method Request**.

Cliquez sur l’icône de modification à côté de **Authorization Type**, puis sélectionnez AWS\_IAM. Cliquez ensuite sur le **Check Button** à côté du champ pour enregistrer ce paramètre.

<div id="step-2-set-up-cors-and-deploy-the-api">
  ### Étape 2. Configurer CORS et déployer l’API
</div>

Notre application monopage (SPA) accédera aux méthodes de l’API Web à partir d’un domaine différent de celui de la page. Le paramètre Cross-Origin Resource Sharing doit explicitement autoriser cette action pour que le navigateur permette l’accès à AWS API Gateway. En règle générale, le navigateur envoie d’abord une requête `OPTIONS` pour vérifier quelles actions le site autorise.

Sélectionnez `/pets` sous Resources, puis cliquez sur **Create Method**. Dans la liste déroulante, sélectionnez **OPTIONS**, puis cliquez sur la **coche** pour enregistrer le paramètre.

La méthode Options est utilisée par le navigateur pour obtenir les en-têtes HTTP nécessaires, mais la fonction doit aussi recevoir des instructions supplémentaires sur ce qu’elle doit faire. Dans l’écran de configuration `OPTIONS`, définissez les variables/paramètres suivants :

* **Integration Type** : Lambda Function;
* **Use Lambda Proxy Integration** : laissez cette option décochée;
* **Lambda Region** : sélectionnez votre région;
* **Lambda Function** : NoOp.

Cliquez sur **Save**. Dans la fenêtre contextuelle suivante, accordez à votre fonction Lambda les autorisations dont elle a besoin.

Vous serez ensuite automatiquement redirigé vers la page d’exécution de la méthode `OPTIONS`. Ouvrez la page Method Response.

Développez la section **200** située sous la barre HTTP Status et ajoutez les en-têtes de réponse suivants :

* Access-Control-Allow-Headers;
* Access-Control-Allow-Methods;
* Access-Control-Allow-Origin.

Ensuite, associez les valeurs appropriées à chacun des en-têtes de réponse. Une fois de retour sur la page Method Execution, cliquez sur **Integration Response**. Après avoir développé la ligne associée à l’état de réponse de méthode **200**, développez **Header Mappings**, puis appliquez les mappages suivants :

* Access-Control-Allow-Headers: `'Content-Type,X-Amz-Date,Authorization,x-api-key,x-amz-security-token'`;
* Access-Control-Allow-Origin: `'*'`
* Access-Control-Allow-Methods: `'POST, GET, OPTIONS'`

Enfin, répétez les étapes ci-dessus pour activer CORS pour les méthodes POST et GET. Toutefois, pour ces deux méthodes, vous n’ajouterez qu’un seul en-tête, Access-Control-Allow-Origin, et sa valeur devra être définie sur `'*'`.

<div id="deploy-the-api">
  ### Déployer l’API
</div>

Retournez à la vue **Resources** de votre API. Cliquez sur **Actions**, puis sélectionnez **DEPLOY API**.

Sélectionnez **New Stage** pour le champ Deploy State, puis donnez à l’étape le nom `Test`. Cliquez sur le bouton **Deploy**.

Sur la page des résultats, accédez à **SDK Generation**. Sélectionnez JavaScript comme **Platform**. Cliquez sur le bouton **Generate SDK**.

Enregistrez le fichier ZIP téléchargé pour l’utiliser plus tard.