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

> Découvrez comment sécuriser une API Google Cloud Endpoints avec des jetons d’accès Auth0.

# Sécuriser Google Cloud Endpoints avec Auth0

export const AuthCodeGroup = ({children, dropdown}) => {
  const [processedChildren, setProcessedChildren] = useState(children);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      unsubscribe = window.autorun(() => {
        const processChildren = node => {
          if (typeof node === "string") {
            let processedNode = node;
            for (const [key, value] of window.rootStore.variableStore.values.entries()) {
              const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
              processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
            }
            return processedNode;
          } else if (Array.isArray(node)) {
            return node.map(processChildren);
          } else if (node && node.props && node.props.children) {
            return {
              ...node,
              props: {
                ...node.props,
                children: processChildren(node.props.children)
              }
            };
          }
          return node;
        };
        setProcessedChildren(processChildren(children));
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  return <CodeGroup dropdown={dropdown}>{processedChildren}</CodeGroup>;
};

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) + "*****MASQUÉ*****";
          }
          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>;
};

[Google Cloud Endpoints (GCE)](https://cloud.google.com/endpoints/) est un système de gestion d’API qui offre des fonctionnalités pour vous aider à créer, maintenir et sécuriser vos API. GCE utilise [OpenAPI](https://www.openapis.org/) pour définir les points de terminaison de votre API, ses entrées et sorties, ses erreurs et sa configuration de sécurité.

Pour en savoir plus sur la spécification OpenAPI, consultez le dépôt [OpenAPI Specification](https://github.com/OAI/OpenAPI-Specification) sur GitHub.

Ce tutoriel explique comment sécuriser Google Cloud Endpoints avec Auth0.

<div id="prerequisites">
  ## Prérequis
</div>

Avant de commencer, vous aurez besoin d'une API GCE déployée. Si vous n'avez pas encore créé d'API, suivez le [Cloud Endpoints Quickstart](https://cloud.google.com/endpoints/docs/quickstart-endpoints) dans la documentation de Google.

Ce guide de démarrage vous montrera comment créer une API GCE simple avec un seul point de terminaison, `/airportName`, qui renvoie le nom d'un aéroport à partir de son [code IATA](https://en.wikipedia.org/wiki/IATA_airport_code) à trois lettres.

<AuthCodeGroup>
  ```bash cURL lines theme={null}
  curl --request GET \
    --url 'https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO'
  ```

  ```csharp C# lines theme={null}
  var client = new RestClient("https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO");
  var request = new RestRequest(Method.GET);
  IRestResponse response = client.Execute(request);
  ```

  ```go Go lines theme={null}
  package main

  import (
  	"fmt"
  	"net/http"
  	"io/ioutil"
  )

  func main() {

  	url := "https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO"

  	req, _ := http.NewRequest("GET", url, nil)

  	res, _ := http.DefaultClient.Do(req)

  	defer res.Body.Close()
  	body, _ := ioutil.ReadAll(res.Body)

  	fmt.Println(res)
  	fmt.Println(string(body))

  }
  ```

  ```java Java lines theme={null}
  HttpResponse<String> response = Unirest.get("https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO")
    .asString();
  ```

  ```javascript Node.JS lines theme={null}
  var axios = require("axios").default;

  var options = {
    method: 'GET',
    url: 'https://%7ByourGceProject%7D.appspot.com/airportName',
    params: {iataCode: 'SFO'}
  };

  axios.request(options).then(function (response) {
    console.log(response.data);
  }).catch(function (error) {
    console.error(error);
  });
  ```

  ```php PHP lines theme={null}
  $curl = curl_init();

  curl_setopt_array($curl, [
    CURLOPT_URL => "https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET",
  ]);

  $response = curl_exec($curl);
  $err = curl_error($curl);

  curl_close($curl);

  if ($err) {
    echo "cURL Error #:" . $err;
  } else {
    echo $response;
  }
  ```

  ```python Python lines theme={null}
  import http.client

  conn = http.client.HTTPSConnection("")

  conn.request("GET", "%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO")

  res = conn.getresponse()
  data = res.read()

  print(data.decode("utf-8"))
  ```

  ```ruby Ruby lines theme={null}
  require 'uri'
  require 'net/http'
  require 'openssl'

  url = URI("https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO")

  http = Net::HTTP.new(url.host, url.port)
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_PEER

  request = Net::HTTP::Get.new(url)

  response = http.request(request)
  puts response.read_body
  ```
</AuthCodeGroup>

<div id="define-the-api-in-auth0">
  ## Définir l’API dans Auth0
</div>

Accédez à [Auth0 Dashboard > Applications > APIs](https://manage.auth0.com/#/apis), puis créez une nouvelle API.

<Frame>
  <img src="https://mintcdn.com/translations/c0RQ9V0YAcT0-8l5/docs/images/cdy7uua7fh8z/7wUHnYBFp1jnbBurqoThpD/c3a31b64884c3adc2251a225a1ddd1dd/Create_API_-_EN.png?fit=max&auto=format&n=c0RQ9V0YAcT0-8l5&q=85&s=e06ac7e43d4a1203c54472701452352a" alt="Dashboard - Créer des API - intégration -Google Endpoints" width="692" height="832" data-path="docs/images/cdy7uua7fh8z/7wUHnYBFp1jnbBurqoThpD/c3a31b64884c3adc2251a225a1ddd1dd/Create_API_-_EN.png" />
</Frame>

Notez l’identifiant de l’**API <Tooltip tip="Audience : identifiant unique de l’audience d’un token émis. Appelée aud dans un token, sa valeur contient l’ID d’une application (Client ID) pour un ID Token ou d’une API (API Identifier) pour un Access Token." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Audience">Audience</Tooltip>** (`http://google_api` dans la capture d’écran ci-dessus) pour l’utiliser à l’étape suivante.

<div id="update-the-api-configuration">
  ## Mettre à jour la configuration de l’API
</div>

Ensuite, nous allons mettre à jour le fichier de configuration OpenAPI de l’API GCE. Pour l’exemple d’API créé durant le Quickstart, ce fichier est `openapi.yaml`.

<div id="add-security-definitions">
  ### Ajouter des définitions de sécurité
</div>

Ouvrez le fichier de configuration et ajoutez une nouvelle section `securityDefinitions`. Dans cette section, ajoutez une nouvelle définition (`auth0_jwt`) avec les champs suivants :

| Champ                | Description                                                                                                                                                                                                         |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `authorizationUrl`   | L’URL d’autorisation; elle doit être définie à `"https://{yourDomain}/authorize"`                                                                                                                                   |
| `flow`               | Le flux utilisé par le schéma de sécurité OAuth2. Les valeurs valides sont `"implicit"`, `"password"`, `"application"` ou `"accessCode"`.                                                                           |
| `type`               | Le type de schéma de sécurité. Les valeurs valides sont `"basic"`, `"apiKey"` ou `"oauth2"`                                                                                                                         |
| `x-google-issuer`    | L’émetteur d’un justificatif d’identité; il doit être défini à `"https://{yourDomain}/"`                                                                                                                            |
| `x-google-jwks_uri`  | L’URI de l’ensemble de clés publiques servant à valider la signature du [JSON Web Token (JWT)](/docs/fr-ca/glossary?term=JSON+Web+Token+%28JWT%29). Définissez-la à `"https://\{yourDomain}/.well-known/jwks.json"` |
| `x-google-audiences` | L’identifiant de l’API; assurez-vous que cette valeur correspond à celle définie pour l’API dans le Auth0 Dashboard.                                                                                                |

export const codeExample1 = `securityDefinitions:
  auth0_jwt:
    authorizationUrl: "https://{yourDomain}/authorize"
    flow: "implicit"
    type: "oauth2"
    x-google-issuer: "https://{yourDomain}/"
    x-google-jwks_uri: "https://{yourDomain}/.well-known/jwks.json"
    x-google-audiences: "{yourApiIdentifier}"`;

<AuthCodeBlock children={codeExample1} language="yaml" />

<div id="update-the-endpoint">
  ### Mettre à jour le point de terminaison
</div>

Maintenant, mettez à jour le point de terminaison en ajoutant un champ `security` avec le `securityDefinition` que nous avons créé à l’étape précédente.

```yaml lines theme={null}
paths:
  "/airportName":
    get:
      description: "Get the airport name for a given IATA code."
      operationId: "airportName"
      parameters:
        -
          name: iataCode
          in: query
          required: true
          type: string
      responses:
        200:
          description: "Success."
          schema:
            type: string
        400:
          description: "The IATA code is invalid or missing."
      security:
       - auth0_jwt: []
```

Dans l’exemple ci-dessus, le champ `security` indique au proxy GCE que notre chemin `/airportName` doit être protégé par la définition `auth0-jwt`.

Après la mise à jour de la configuration OpenAPI, elle devrait ressembler à ceci :

export const codeExample2 = `---
swagger: "2.0"
info:
  title: "Codes d’aéroport"
  description: "Obtenez le nom d’un aéroport à partir de son code IATA à trois lettres."
  version: "1.0.0"
host: "{yourGceProject}.appspot.com"
schemes:
  - "https"
paths:
  "/airportName":
    get:
      description: "Obtenez le nom d’un aéroport pour un code IATA donné."
      operationId: "airportName"
      parameters:
        -
          name: iataCode
          in: query
          required: true
          type: string
      responses:
        200:
          description: "Succès."
          schema:
            type: string
        400:
          description: "Le code IATA est invalide ou manquant."
      security:
       - auth0_jwt: []
securityDefinitions:
  auth0_jwt:
    authorizationUrl: "https://{yourDomain}/authorize"
    flow: "implicit"
    type: "oauth2"
    x-google-issuer: "https://{yourDomain}/"
    x-google-jwks_uri: "https://{yourDomain}/.well-known/jwks.json"
    x-google-audiences: "{yourApiIdentifier}"`;

<AuthCodeBlock children={codeExample2} language="yaml" />

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

Ensuite, redéployez votre API GCE pour appliquer les modifications de configuration. Si vous avez suivi le [Cloud Endpoints Quickstart](https://cloud.google.com/endpoints/docs/quickstart-endpoints), vous pouvez la redéployer en saisissant ce qui suit dans le Cloud Shell de Google :

```bash lines theme={null}
cd endpoints-quickstart/scripts
./deploy_api.sh
```

<div id="test-the-api">
  ## Tester l’API
</div>

Une fois le redéploiement effectué, envoyez de nouveau une requête à l’API sans sécurité.

<AuthCodeGroup>
  ```bash cURL lines theme={null}
  curl --request GET \
    --url 'https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO'
  ```

  ```csharp C# lines theme={null}
  var client = new RestClient("https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO");
  var request = new RestRequest(Method.GET);
  IRestResponse response = client.Execute(request);
  ```

  ```go Go lines theme={null}
  package main

  import (
  	"fmt"
  	"net/http"
  	"io/ioutil"
  )

  func main() {

  	url := "https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO"

  	req, _ := http.NewRequest("GET", url, nil)

  	res, _ := http.DefaultClient.Do(req)

  	defer res.Body.Close()
  	body, _ := ioutil.ReadAll(res.Body)

  	fmt.Println(res)
  	fmt.Println(string(body))

  }
  ```

  ```java Java lines theme={null}
  HttpResponse<String> response = Unirest.get("https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO")
    .asString();
  ```

  ```javascript Node.JS lines theme={null}
  var axios = require("axios").default;

  var options = {
    method: 'GET',
    url: 'https://%7ByourGceProject%7D.appspot.com/airportName',
    params: {iataCode: 'SFO'}
  };

  axios.request(options).then(function (response) {
    console.log(response.data);
  }).catch(function (error) {
    console.error(error);
  });
  ```

  ```php PHP lines theme={null}
  $curl = curl_init();

  curl_setopt_array($curl, [
    CURLOPT_URL => "https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET",
  ]);

  $response = curl_exec($curl);
  $err = curl_error($curl);

  curl_close($curl);

  if ($err) {
    echo "cURL Error #:" . $err;
  } else {
    echo $response;
  }
  ```

  ```python Python lines theme={null}
  import http.client

  conn = http.client.HTTPSConnection("")

  conn.request("GET", "%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO")

  res = conn.getresponse()
  data = res.read()

  print(data.decode("utf-8"))
  ```

  ```ruby Ruby lines theme={null}
  require 'uri'
  require 'net/http'
  require 'openssl'

  url = URI("https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO")

  http = Net::HTTP.new(url.host, url.port)
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_PEER

  request = Net::HTTP::Get.new(url)

  response = http.request(request)
  puts response.read_body
  ```
</AuthCodeGroup>

Vous obtiendrez la réponse suivante :

```json lines theme={null}
{
 "code": 16,
 "message": "JWT validation failed: Missing or invalid credentials",
 "details": [
  {
   "@type": "type.googleapis.com/google.rpc.DebugInfo",
   "stackEntries": [],
   "detail": "auth"
  }
 ]
}
```

C’est exactement ce que nous voulons !

Accédez maintenant à la page **Test** de la définition de votre API Google Endpoints dans le [Auth0 Dashboard](https://manage.auth0.com/#/apis), puis copiez le <Tooltip tip="Jeton d’accès : information d’identification d’autorisation, sous forme de chaîne opaque ou de JWT, utilisée pour accéder à une API." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Access+Token">jeton d’accès</Tooltip> sous la réponse :

Effectuez une requête `GET` à votre API avec un en-tête Authorization de `Bearer {ACCESS_TOKEN}` pour obtenir l’accès autorisé :

<AuthCodeGroup>
  ```bash cURL lines theme={null}
  curl --request GET \
    --url 'https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO' \
    --header 'authorization: Bearer {accessToken}'
  ```

  ```csharp C# lines theme={null}
  var client = new RestClient("https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO");
  var request = new RestRequest(Method.GET);
  request.AddHeader("authorization", "Bearer {accessToken}");
  IRestResponse response = client.Execute(request);
  ```

  ```go Go lines theme={null}
  package main

  import (
  	"fmt"
  	"net/http"
  	"io/ioutil"
  )

  func main() {

  	url := "https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO"

  	req, _ := http.NewRequest("GET", url, nil)

  	req.Header.Add("authorization", "Bearer {accessToken}")

  	res, _ := http.DefaultClient.Do(req)

  	defer res.Body.Close()
  	body, _ := ioutil.ReadAll(res.Body)

  	fmt.Println(res)
  	fmt.Println(string(body))

  }
  ```

  ```java Java lines theme={null}
  HttpResponse<String> response = Unirest.get("https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO")
    .header("authorization", "Bearer {accessToken}")
    .asString();
  ```

  ```javascript Node.JS lines theme={null}
  var axios = require("axios").default;

  var options = {
    method: 'GET',
    url: 'https://%7ByourGceProject%7D.appspot.com/airportName',
    params: {iataCode: 'SFO'},
    headers: {authorization: 'Bearer {accessToken}'}
  };

  axios.request(options).then(function (response) {
    console.log(response.data);
  }).catch(function (error) {
    console.error(error);
  });
  ```

  ```php PHP lines theme={null}
  $curl = curl_init();

  curl_setopt_array($curl, [
    CURLOPT_URL => "https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET",
    CURLOPT_HTTPHEADER => [
      "authorization: Bearer {accessToken}"
    ],
  ]);

  $response = curl_exec($curl);
  $err = curl_error($curl);

  curl_close($curl);

  if ($err) {
    echo "cURL Error #:" . $err;
  } else {
    echo $response;
  }
  ```

  ```python Python lines theme={null}
  import http.client

  conn = http.client.HTTPSConnection("")

  headers = { 'authorization': "Bearer {accessToken}" }

  conn.request("GET", "%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO", headers=headers)

  res = conn.getresponse()
  data = res.read()

  print(data.decode("utf-8"))
  ```

  ```ruby Ruby lines theme={null}
  require 'uri'
  require 'net/http'
  require 'openssl'

  url = URI("https://%7ByourGceProject%7D.appspot.com/airportName?iataCode=SFO")

  http = Net::HTTP.new(url.host, url.port)
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_PEER

  request = Net::HTTP::Get.new(url)
  request["authorization"] = 'Bearer {accessToken}'

  response = http.request(request)
  puts response.read_body
  ```
</AuthCodeGroup>

Et c’est tout !