> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Ajout d’une connexion avec le Flux de code d’autorisation

> Apprenez à ajouter une connexion à votre application Web classique en utilisant le Flux de code d’autorisation.

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

Vous pouvez ajouter une connexion à votre application Web classique à l’aide du Flux de code d’autorisation. Pour savoir comment fonctionne le flux et pourquoi vous devriez l’utiliser, lisez [Flux du code d’autorisation](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow). Pour appeler votre API à partir d’une application Web ordinaire, lisez [Appeler votre API à l’aide du flux de code d’autorisation](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow/call-your-api-using-the-authorization-code-flow).

Pour implémenter le Flux de code d’autorisation, Auth0 fournit les ressources suivantes :

* [Guides de démarrage rapide pour applications Web classiques](/docs/fr-ca/quickstart/webapp) : la manière la plus simple d’implémenter le flux.
* [Authentication API](/docs/fr-ca/api/authentication) : Si vous préférez créer votre propre solution, continuez à lire pour savoir comment appeler notre API directement.

Après une connexion réussie, votre application aura accès au jeton d’ID et au jeton d’accès de l’utilisateur. Le jeton d’ID contient des informations de base sur le profil utilisateur et le jeton d’accès peut être utilisé pour appeler le point de terminaison Auth0 `/userinfo` ou vos propres API protégées. Pour en savoir plus sur les jetons d’ID, consultez [Jetons d’ID](/docs/fr-ca/secure/tokens/id-tokens). Pour en savoir plus sur les jetons d’accès, lisez [Jetons d’accès](/docs/fr-ca/secure/tokens/access-tokens).

Vous demanderez l’autorisation de l’utilisateur et le redirigerez vers votre application avec un `authorization_code`. Vous échangerez ensuite le code contre des jetons.

## Prérequis

Enregistrez votre application auprès d’Auth0. Pour en savoir plus, lisez [Enregistrer des applications Web classiques](/docs/fr-ca/get-started/auth0-overview/create-applications/regular-web-apps).

* Sélectionnez **Application Web ordinaire** comme **Type d’application**.
* Ajoutez une **URL de rappel autorisée** de `{https://yourApp/callback}`.
* Assurez-vous que les **Grant Types (Types d’autorisation)** de votre application comprennent le **code d’autorisation**. Pour en savoir plus, lisez [Mettre à jour les types d’autorisation](/docs/fr-ca/get-started/applications/update-grant-types).

## Autoriser l’utilisateur

Pour lancer le flux, vous aurez besoin l’autorisation de l’utilisateur. Cette étape peut comprendre un ou plusieurs des procédés suivant :

* Authentifier l’utilisateur
* Redirection de l’utilisateur vers un fournisseur d’identité pour gérer l’authentification
* Obtenir le consentement de l’utilisateur pour le niveau de permission demandé, sauf si obtenu précédemment

Pour autoriser l’utilisateur, votre application doit envoyer l’utilisateur à l’[URL d’autorisation](/docs/fr-ca/api/authentication#authorization-code-flow).

### Exemple d’URL d’autorisation

export const codeExample1 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope={scope}&
    state={state}`;

<AuthCodeBlock children={codeExample1} language="text" lines />

### Paramètres

| Nom du paramètre | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `response_type`  | Indique le type d’identifiant qu'Auth0 renverra (`code` ou `token`). Pour ce flux, la valeur doit être `code`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `client_id`      | L’ID client de votre application. Vous pouvez trouver cette valeur dans vos [paramètres d’application](https://manage.auth0.com/#/Applications/\{yourClientId}/settings).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `redirect_uri`   | L’URL vers laquelle Auth0 redirigera le navigateur une fois l’autorisation accordée par l’utilisateur. Le code d’autorisation sera indiqué dans le paramètre URL `code`. Vous devez spécifier cette URL comme une URL de rappel dans vos [Application Settings (Paramètres d’application)](https://manage.auth0.com/#/Applications/\{yourClientId}/settings).<br /><br />**Avertissement:** Selon la [Spécification OAuth 2.0](https://tools.ietf.org/html/rfc6749#section-3.1.2), Auth0 supprime tout ce qui suit le hachage et *ne* respecte aucun fragment.                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `scope`          | Spécifie les [permissions](/docs/fr-ca/scopes) que vous demandez, qui déterminent les demandes (ou attributs utilisateur) que vous voulez renvoyer. Elles doivent être séparées par un espace. Pour obtenir un jeton d’ID dans la réponse, vous devez préciser une permissions d’au moins `openid`. Si vous souhaitez obtenir le profil complet de l’utilisateur, vous pouvez demander `openid profile`. Vous pouvez demander n’importe laquelle des [permissions standard OpenID Connect (OIDC)](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims) sur les utilisateurs, comme `email`, ou des [demandes personnalisées](/docs/fr-ca/tokens/concepts/jwt-claims#custom-claims) conformes à un [format à espaces de noms](/docs/fr-ca/tokens/guides/create-namespaced-custom-claims). Inclure `offline_access` pour obtenir un <dfn>Jeton d’actualisation</dfn> (assurez-vous que le champ **Allow Offline Access** est activé dans les [paramètres de l’application](https://manage.auth0.com/#/applications)). |
| `state`          | (recommandé) Une chaîne alphanumérique arbitraire opaque que votre application ajoute à la demande initiale qu’Auth0 inclut lors de la redirection vers votre application. Pour savoir comment utiliser cette valeur afin de prévenir les attaques de falsification de requête intersites (CSRF), voir [Atténuer les attaques CSRF avec les paramètres d’état](/docs/fr-ca/protocols/oauth2/mitigate-csrf-attacks).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `connection`     | (facultatif) Oblige l’utilisateur à se connecter avec une connexion spécifique. Par exemple, vous pouvez passer une valeur de `github` pour envoyer l’utilisateur directement à GitHub pour se connecter avec son compte GitHub. Si non spécifié, l’utilisateur voit l’écran Auth0 Lock avec toutes les connexions configurées. Vous pouvez voir une liste de vos connexions configurées sur l’onglet **Connexions** de votre application.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `organization`   | (facultatif) ID de l’organisation à utiliser pour authentifier un utilisateur. Lorsqu’il n’est pas fourni, si votre application est configurée pour **Display Organization Prompt (Afficher l’invite de l’organisation)**, l’utilisateur pourra entrer le nom de l’organisation lors de l’authentification.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `invitation`     | (facultatif) ID du ticket de l’invitation de l’organisation. Lorsque vous [(invitez un membre à une organisation](/docs/fr-ca/organizations/invite-members), votre application doit traiter l’acceptation de l’ invitation en transmettant les paires clé-valeur `invitation` et `organization` lorsque l’utilisateur accepte l’invitation.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `login_hint`     | (facultatif) Remplit le champ d’identification de la page de connexion ou d’inscription lors de la redirection vers Auth0. Pris en charge par l’expérience de connexion universelle.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

Par exemple, votre extrait HTML pour l’URL d’autorisation lors de l’ajout de l’enregistrement à votre application peut avoir l’air de ce qui suit :

export const codeExample2 = `<a href="https://{yourDomain}/authorize?
  response_type=code&
  client_id={yourClientId}&
  redirect_uri={https://yourApp/callback}&
  scope=openid%20profile&
  state=xyzABC123">
  Sign In
</a>`;

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

### Réponse

Si tout se passe bien, vous recevrez une réponse `HTTP 302`. Le code d’autorisation est compris à la fin de cette URL :

```lines theme={null}
HTTP/1.1 302 Found
Location: {https://yourApp/callback}?code={authorizationCode}&state=xyzABC123
```

## Jetons de requête

Maintenant que vous avez un code d’authentification, vous pouvez l’échanger pour des jetons. En utilisant le code d’autorisation (`code`) extrait de l’étape précédente, vous devrez `POST` sur [l’URL du jeton](/docs/fr-ca/api/authentication#authorization-code).

### Exemple d’URL « POST to token »

<AuthCodeGroup>
  ```bash cURL theme={null}
  curl --request POST \
    --url 'https://{yourDomain}/oauth/token' \
    --header 'content-type: application/x-www-form-urlencoded' \
    --data grant_type=authorization_code \
    --data 'client_id={yourClientId}' \
    --data 'client_secret={yourClientSecret}' \
    --data 'code=yourAuthorizationCode}' \
    --data 'redirect_uri={https://yourApp/callback}'
  ```

  ```csharp C# theme={null}
  var client = new RestClient("https://{yourDomain}/oauth/token");
  var request = new RestRequest(Method.POST);
  request.AddHeader("content-type", "application/x-www-form-urlencoded");
  request.AddParameter("application/x-www-form-urlencoded", "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}", ParameterType.RequestBody);
  IRestResponse response = client.Execute(request);
  ```

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

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

  func main() {

  	url := "https://{yourDomain}/oauth/token"

  	payload := strings.NewReader("grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")

  	req, _ := http.NewRequest("POST", url, payload)

  	req.Header.Add("content-type", "application/x-www-form-urlencoded")

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

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

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

  }
  ```

  ```java Java theme={null}
  HttpResponse response = Unirest.post("https://{yourDomain}/oauth/token")
    .header("content-type", "application/x-www-form-urlencoded")
    .body("grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")
    .asString();
  ```

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

  var options = {
    method: 'POST',
    url: 'https://{yourDomain}/oauth/token',
    headers: {'content-type': 'application/x-www-form-urlencoded'},
    data: new URLSearchParams({
      grant_type: 'authorization_code',
      client_id: '{yourClientId}',
      client_secret: '{yourClientSecret}',
      code: 'yourAuthorizationCode}',
      redirect_uri: '{https://yourApp/callback}'
    })
  };

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

  ```objc Obj-C theme={null}
  #import <Foundation/Foundation.h>

  NSDictionary *headers = @{ @"content-type": @"application/x-www-form-urlencoded" };

  NSMutableData *postData = [[NSMutableData alloc] initWithData:[@"grant_type=authorization_code" dataUsingEncoding:NSUTF8StringEncoding]];
  [postData appendData:[@"&client_id={yourClientId}" dataUsingEncoding:NSUTF8StringEncoding]];
  [postData appendData:[@"&client_secret={yourClientSecret}" dataUsingEncoding:NSUTF8StringEncoding]];
  [postData appendData:[@"&code=yourAuthorizationCode}" dataUsingEncoding:NSUTF8StringEncoding]];
  [postData appendData:[@"&redirect_uri={https://yourApp/callback}" dataUsingEncoding:NSUTF8StringEncoding]];

  NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://{yourDomain}/oauth/token"]
                                                         cachePolicy:NSURLRequestUseProtocolCachePolicy
                                                     timeoutInterval:10.0];
  [request setHTTPMethod:@"POST"];
  [request setAllHTTPHeaderFields:headers];
  [request setHTTPBody:postData];

  NSURLSession *session = [NSURLSession sharedSession];
  NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
                                              completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
                                                  if (error) {
                                                      NSLog(@"%@", error);
                                                  } else {
                                                      NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
                                                      NSLog(@"%@", httpResponse);
                                                  }
                                              }];
  [dataTask resume];
  ```

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

  curl_setopt_array($curl, [
    CURLOPT_URL => "https://{yourDomain}/oauth/token",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "POST",
    CURLOPT_POSTFIELDS => "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}",
    CURLOPT_HTTPHEADER => [
      "content-type: application/x-www-form-urlencoded"
    ],
  ]);

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

  curl_close($curl);

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

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

  conn = http.client.HTTPSConnection("")

  payload = "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"

  headers = { 'content-type': "application/x-www-form-urlencoded" }

  conn.request("POST", "/{yourDomain}/oauth/token", payload, headers)

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

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

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

  url = URI("https://{yourDomain}/oauth/token")

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

  request = Net::HTTP::Post.new(url)
  request["content-type"] = 'application/x-www-form-urlencoded'
  request.body = "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"

  response = http.request(request)
  puts response.read_body
  ```

  ```swift Swift theme={null}
  import Foundation

  let headers = ["content-type": "application/x-www-form-urlencoded"]

  let postData = NSMutableData(data: "grant_type=authorization_code".data(using: String.Encoding.utf8)!)
  postData.append("&client_id={yourClientId}".data(using: String.Encoding.utf8)!)
  postData.append("&client_secret={yourClientSecret}".data(using: String.Encoding.utf8)!)
  postData.append("&code=yourAuthorizationCode}".data(using: String.Encoding.utf8)!)
  postData.append("&redirect_uri={https://yourApp/callback}".data(using: String.Encoding.utf8)!)

  let request = NSMutableURLRequest(url: NSURL(string: "https://{yourDomain}/oauth/token")! as URL,
                                          cachePolicy: .useProtocolCachePolicy,
                                      timeoutInterval: 10.0)
  request.httpMethod = "POST"
  request.allHTTPHeaderFields = headers
  request.httpBody = postData as Data

  let session = URLSession.shared
  let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
    if (error != nil) {
      print(error)
    } else {
      let httpResponse = response as? HTTPURLResponse
      print(httpResponse)
    }
  })

  dataTask.resume()
  ```
</AuthCodeGroup>

### Paramètres

| Nom de paramètres | Description                                                                                                                                                                                                                                                                                                                                               |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `grant_type`      | Définir sur `authorization_code`.                                                                                                                                                                                                                                                                                                                         |
| `code`            | `authorization_code` récupéré à l’étape précédente de ce tutoriel.                                                                                                                                                                                                                                                                                        |
| `client_id`       | L’ID client de votre application. Vous pouvez trouver cette valeur dans les [paramètres de votre application](https://manage.auth0.com/#/Applications/\{yourClientId}/settings).                                                                                                                                                                          |
| `client_secret`   | Le secret client de votre application. Vous pouvez trouver cette valeur dans les [paramètres de votre application](https://manage.auth0.com/#/Applications/\{yourClientId}/settings). Pour en savoir plus sur les méthodes d’authentification d’application disponibles, lisez [Identifiants d’applications](/docs/fr-ca/secure/application-credentials). |
| `redirect_uri`    | L’URL de rappel valide définie dans les paramètres de votre Application. Cela doit correspondre exactement à `redirect_uri` passé à l’ URL d’autorisation à l’étape précédente de ce tutoriel. Notez que cela doit être codé URL.                                                                                                                         |

### Réponse

Si tout se passe bien, vous recevrez une réponse HTTP 200 avec une charge utile contenant les valeurs `access_token`, `refresh_token`, `id_token`, et `token_type` :

```javascript lines theme={null}
{
  "access_token": "eyJz93a...k4laUWw",
  "refresh_token": "GEbRxBN...edjnXbL",
  "id_token": "eyJ0XAi...4faeEoQ",
  "token_type": "Bearer"
}
```

<Warning>
  Validez vos jetons avant de les enregistrer. Pour en savoir plus, lisez [Valider les jetons d’ID](/docs/fr-ca/secure/tokens/id-tokens/validate-id-tokens) et [Valider les jetons d’accès](/docs/fr-ca/secure/tokens/access-tokens/validate-access-tokens).
</Warning>

Les [Jetons d’ID](/docs/fr-ca/secure/tokens/id-tokens) contiennent des informations de l’utilisateur qui doivent être décodées et extraites.

Les [jetons d’accès](/docs/fr-ca/secure/tokens/access-tokens) sont utilisés pour appeler le [point de terminaison /userinfo de l’Authentication API Auth0](/docs/fr-ca/api/authentication#get-user-info) ou une autre API. Si vous appelez votre propre API, la première chose que votre API devra faire est de [vérifier le jeton d’accès](/docs/fr-ca/secure/tokens/access-tokens/validate-access-tokens).

Les [jetons d’actualisation](/docs/fr-ca/secure/tokens/refresh-tokens) sont utilisés pour obtenir un nouveau jeton d’accès ou un nouveau jeton d’ID après l’expiration du précédent. Le `refresh_token` ne sera présent dans la réponse que si vous avez inclus la permission `offline_access` et activé **Autoriser l’accès hors ligne** pour votre API dans le Dashboard.

<Warning>
  Les jetons d’actualisation doivent être stockés en toute sécurité car ils permettent aux utilisateurs de rester authentifiés pratiquement indéfiniment.
</Warning>

## Cas d’utilisation

### Demande d’authentification de base

Cet exemple montre la requête la plus basique que vous pouvez faire lorsque vous autorisez l’utilisateur à l’étape 1. L’écran de connexion Auth0 permet à l’utilisateur de se connecter avec l’une des connexions configurées.

export const codeExample13 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid`;

<AuthCodeBlock children={codeExample13} language="text" lines />

Désormais, lorsque vous demanderez des jetons, votre jeton d’ID contiendra les autorisations les plus élémentaires. Lorsque vous décodez le jeton d’ID, il ressemble à ce qui suit :

```json lines theme={null}
{
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt9...",
  "exp": 1478112929,
  "iat": 1478076929
}
```

### Demander le nom et la photo de profil de l’utilisateur

Outre l’authentification habituelle de l’utilisateur, cet exemple montre comment demander des informations supplémentaires sur l’utilisateur, telles que son nom et sa photo.

Pour demander le nom et la photo de l’utilisateur, vous devez ajouter les permissions appropriées lors de l’autorisation de l’utilisateur :

export const codeExample14 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state={state}`;

<AuthCodeBlock children={codeExample14} language="text" lines />

Désormais, lorsque vous demanderez des jetons, votre jeton d’ID contiendra le nom et la photo demandés. Lorsque vous décodez le jeton d’ID, il ressemble à ce qui suit :

```json lines theme={null}
{
  "name": "jerrie@...",
  "picture": "https://s.gravatar.com/avatar/6222081fd7dcea7dfb193788d138c457?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fje.png",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt...",
  "exp": 1478113129,
  "iat": 1478077129
}
```

### Demande de connexion d’un utilisateur avec GitHub

En plus de l’authentification habituelle des utilisateurs, cet exemple montre comment envoyer les utilisateurs directement à un fournisseur d’identité sociale, tel que GitHub. Vous devrez d’abord configurer la connexion appropriée dans [Auth0 Dashboard > Authentication (Authentification) > Social](https://manage.auth0.com/#/connections/social) et obtenir le nom de la connexion à partir de l’onglet **Settings (Paramètres)**.

Pour envoyer les utilisateurs directement à l’écran de connexion GitHub, vous devez passer le paramètre `connection` et définir sa valeur sur le nom de la connexion (dans ce cas, `github`) lors de l’autorisation de l’utilisateur à l’étape 1 :

export const codeExample15 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state={state}&
    connection=github`;

<AuthCodeBlock children={codeExample15} language="text" lines />

Désormais, lorsque vous demanderez des jetons, votre jeton d’ID contiendra une demande `sub` avec l’ID unique de l’utilisateur renvoyé par GitHub. Lorsque vous décodez le jeton d’ID, il ressemble à ce qui suit :

```json lines theme={null}
{
  "name": "Jerrie Pelser",
  "nickname": "jerriep",
  "picture": "https://avatars.githubusercontent.com/u/1006420?v=3",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "github|100...",
  "aud": "xvt...",
  "exp": 1478114742,
  "iat": 1478078742
}
```

## En savoir plus

* [Cadre d’applications Authorization OAuth 2.0](/docs/fr-ca/authenticate/protocols/oauth)
* [Protocole OpenID Connect](/docs/fr-ca/authenticate/protocols/openid-connect-protocol)
* [Jetons](/docs/fr-ca/secure/tokens)
* [Enregistrer des applications Web classiques](/docs/fr-ca/get-started/auth0-overview/create-applications/regular-web-apps)
* [Mettre à jour les types d’autorisation](/docs/fr-ca/get-started/applications/update-grant-types)
