> ## 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 ajouter la connexion à votre application Web traditionnelle au moyen du flux de code d’autorisation. # Ajouter la connexion au moyen du 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 {processedChildren}; }; 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
{displayText}
; }; Vous pouvez ajouter la connexion à votre application Web traditionnelle à l’aide du flux de code d’autorisation. Pour savoir comment ce flux fonctionne et pourquoi vous devriez l’utiliser, consultez [Authorization Code Flow](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow). Pour appeler votre API à partir d’une application Web traditionnelle, consultez [Call Your API Using the Authorization Code Flow](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow/call-your-api-using-the-authorization-code-flow). Pour mettre en œuvre le flux de code d’autorisation, Auth0 fournit les ressources suivantes : * [Regular Web App Quickstarts](/docs/fr-ca/quickstart/webapp) : la façon la plus simple de mettre en œuvre ce flux. * [Authentication API](https://auth0.com/docs/api/authentication) : si vous préférez créer votre propre solution, poursuivez votre lecture pour apprendre à appeler directement notre API. Après une connexion réussie, votre application aura accès au jeton d’identité de l’utilisateur et à son jeton d’accès. Le jeton d’identité contient les renseignements de base du profil utilisateur, et le jeton d’accès peut servir à appeler le point de terminaison Auth0 `/userinfo` ou vos propres API protégées. Pour en savoir plus sur les jetons d’identité, consultez [Jetons d’identité](/docs/fr-ca/secure/tokens/id-tokens). Pour en savoir plus sur les jetons d’accès, consultez [Access Tokens](/docs/fr-ca/secure/tokens/access-tokens). Vous demanderez l’autorisation de l’utilisateur, puis vous serez redirigé vers votre application avec un `authorization_code`. Vous échangerez ensuite le code contre des jetons.
## Prérequis
Enregistrez votre application dans Auth0. Pour en savoir plus, consultez [Enregistrer des applications Web classiques](/docs/fr-ca/get-started/auth0-overview/create-applications/regular-web-apps). * Sélectionnez **Application Web classique** comme **Type d’application**. * Ajoutez une **URL de rappel autorisée** : `{https://yourApp/callback}`. * Assurez-vous que les **Types d’octroi** de votre application incluent le **code d’autorisation**. Pour en savoir plus, consultez [Mettre à jour les type d’octroi](/docs/fr-ca/get-started/applications/update-grant-types).
## Autoriser l’utilisateur
Pour lancer le flux, vous devrez obtenir l’autorisation de l’utilisateur. Cette étape peut inclure un ou plusieurs des processus suivants : * Authentifier l’utilisateur; * Rediriger l’utilisateur vers un fournisseur d’identité afin de procéder à l’authentification; * Obtenir le consentement de l’utilisateur pour le niveau de permission demandé, à moins que ce consentement n’ait déjà été accordé. Pour autoriser l’utilisateur, votre application doit rediriger l’utilisateur vers l’[URL d’autorisation](https://auth0.com/docs/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}`;
### Paramètres
| Nom du paramètre | Description | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `response_type` | Indique le type de donnée d’authentification qu’Auth0 retournera (`code` ou `token`). Pour ce flux, la valeur doit être `code`. | | `client_id` | L’ID client de votre application. Vous trouverez cette valeur dans les [Paramètres de l’application](https://manage.auth0.com/#/Applications/\{yourClientId}/settings). | | `redirect_uri` | L’URL vers laquelle Auth0 redirigera le navigateur une fois que l’utilisateur aura accordé l’autorisation. Le code d’autorisation sera disponible dans le paramètre d’URL `code`. Vous devez indiquer cette URL comme URL de rappel valide dans les [Paramètres de l’application](https://manage.auth0.com/#/Applications/\{yourClientId}/settings).

**Avertissement :** Conformément à la [spécification OAuth 2.0](https://tools.ietf.org/html/rfc6749#section-3.1.2), Auth0 supprime tout ce qui se trouve après le hash et ne tient *pas* compte des fragments. | | `scope` | Précise les [scope](/docs/fr-ca/get-started/apis/scopes) pour lesquelles vous souhaitez demander une autorisation, ce qui détermine les claims (ou attributs utilisateur) à renvoyer. Elles doivent être séparées par un espace. Pour obtenir un ID Token dans la réponse, vous devez préciser au minimum la portée `openid`. Si vous souhaitez renvoyer le profil complet de l’utilisateur, vous pouvez demander `openid profile`. Vous pouvez demander n’importe laquelle des [scope OpenID Connect (OIDC) standard](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims) concernant les utilisateurs, comme `email`, ou des [claims personnalisés](/docs/fr-ca/secure/tokens/json-web-tokens/json-web-token-claims#custom-claims) conformes à un [format avec espace de noms](/docs/fr-ca/secure/tokens/json-web-tokens/create-custom-claims). Incluez `offline_access` pour obtenir un [Refresh Token](/docs/fr-ca/glossary?term=Refresh+Token) (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 opaque arbitraire que votre application ajoute à la requête initiale et qu’Auth0 inclut lors de la redirection vers votre application. Pour voir comment utiliser cette valeur afin de prévenir les attaques de falsification de requêtes intersites (CSRF), consultez [Mitigate CSRF Attacks With State Parameters](/docs/fr-ca/secure/attack-protection/state-parameters). | | `connection` | (facultatif) Force l’utilisateur à se connecter avec une connexion précise. Par exemple, vous pouvez transmettre la valeur `github` pour envoyer l’utilisateur directement vers GitHub afin qu’il se connecte avec son compte GitHub. Lorsqu’elle n’est pas précisée, l’utilisateur voit l’écran Auth0 Lock avec toutes les connexions configurées. Vous pouvez consulter la liste de vos connexions configurées dans l’onglet **Connections** de votre application. | | `organization` | (facultatif) ID de l’organisation à utiliser lors de l’authentification d’un utilisateur. Lorsqu’il n’est pas fourni, si votre application est configurée pour **Display Organization Prompt**, l’utilisateur pourra saisir le nom de l’organisation au moment de s’authentifier. | | `invitation` | (facultatif) ID du ticket d’invitation de l’organisation. Lorsque vous [invitez un membre dans une Organization](/docs/fr-ca/manage-users/organizations/configure-organizations/invite-members), votre application doit gérer 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 nom d’utilisateur/courriel sur la page de login ou d’inscription lors de la redirection vers Auth0. Pris en charge par l’expérience Universal Login. | Par exemple, votre extrait HTML pour votre URL d’autorisation lorsque vous ajoutez le login à votre application pourrait ressembler à ceci : export const codeExample2 = ` Ouvrir une session `;
### Réponse
Si tout se passe bien, vous recevrez une réponse `HTTP 302`. Le code d’autorisation figure à la fin de l’URL : ```http lines theme={null} HTTP/1.1 302 Found Location: {https://yourApp/callback}?code={authorizationCode}&state=xyzABC123 ```
## Obtenir des jetons
Maintenant que vous avez un code d’autorisation, vous devez l’échanger contre des jetons. À l’aide du code d’autorisation extrait (`code`) à l’étape précédente, vous devrez envoyer une requête `POST` à l’[URL du jeton](https://auth0.com/docs/api/authentication#authorization-code).
### Exemple de requête POST à l’URL du jeton
```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); }); ``` ```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_PEER 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 ```
### Paramètres
| Nom du paramètre | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `grant_type` | Définissez ce paramètre sur `authorization_code`. | | `code` | Le `authorization_code` récupéré à l’étape précédente de ce tutoriel. | | `client_id` | Le ID client de votre application. Vous trouverez cette valeur dans les [Paramètres de l’application](https://manage.auth0.com/#/Applications/\{yourClientId}/settings). | | `client_secret` | Le Client Secret de votre application. Vous trouverez cette valeur dans les [Paramètres de l’application](https://manage.auth0.com/#/Applications/\{yourClientId}/settings). Pour en savoir plus sur les méthodes d’authentification d’application disponibles, consultez [Identifiants de l’application](/docs/fr-ca/secure/application-credentials). | | `redirect_uri` | L’URL de rappel valide définie dans les paramètres de votre application. Elle doit correspondre exactement au `redirect_uri` transmis à l’URL d’autorisation à l’étape précédente de ce tutoriel. Notez qu’elle doit être encodée dans l’URL. |
### Réponse
Si tout se passe bien, vous recevrez une réponse HTTP 200 dont le corps contient les valeurs `access_token`, `refresh_token`, `id_token` et `token_type` : ```json lines theme={null} { "access_token": "eyJz93a...k4laUWw", "refresh_token": "GEbRxBN...edjnXbL", "id_token": "eyJ0XAi...4faeEoQ", "token_type": "Bearer" } ``` Validez vos jetons avant de les enregistrer. Pour savoir comment faire, consultez [Valider les jetons d’identité](/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). [Les jetons d’identité](/docs/fr-ca/secure/tokens/id-tokens) contiennent des renseignements sur l’utilisateur qu’il faut décoder et extraire. [Les jetons d’accès](/docs/fr-ca/secure/tokens/access-tokens) servent à envoyer une requête au [point de terminaison /userinfo de l’API d’authentification Auth0](https://auth0.com/docs/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’identité après l’expiration du précédent. Le `refresh_token` ne sera présent dans la réponse que si vous avez inclus le scope `offline_access` et activé **Allow Offline Access** pour votre API dans le Dashboard. Les jetons d’actualisation doivent être stockés de façon sécuritaire, puisqu’ils permettent à un utilisateur de rester authentifié pratiquement indéfiniment.
## Cas d’utilisation
### Requête d’authentification de base
Cet exemple montre la requête la plus simple que vous pouvez effectuer pour autoriser l’utilisateur à l’étape 1. Il affiche l’écran de connexion Auth0 et permet à l’utilisateur de se connecter avec n’importe laquelle de vos connexions configurées : export const codeExample13 = `https://{yourDomain}/authorize? response_type=code& client_id={yourClientId}& redirect_uri={https://yourApp/callback}& scope=openid`; Maintenant, lorsque vous demandez des jetons, votre jeton d’identité contiendra les claims les plus élémentaires. Lorsque vous décoderez le jeton d’identité, il ressemblera à ceci : ```json lines theme={null} { "iss": "https://auth0pnp.auth0.com/", "sub": "auth0|581...", "aud": "xvt9...", "exp": 1478112929, "iat": 1478076929 } ```
### Demander le nom de l’utilisateur et sa photo de profil
En plus de l’authentification habituelle de l’utilisateur, cet exemple montre comment demander des renseignements supplémentaires sur l’utilisateur, comme son nom et sa photo de profil. Pour demander le nom et la photo de profil de l’utilisateur, vous devez ajouter les `scopes` appropriés au moment d’autoriser 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}`; Maintenant, lorsque vous demandez des jetons, votre jeton d’identité contiendra les claims name et picture demandés. Une fois le jeton d’identité décodé, il ressemblera à ceci : ```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 } ```
### Demander à l’utilisateur de se connecter avec GitHub
En plus du processus habituel d’authentification des utilisateurs, cet exemple montre comment rediriger les utilisateurs directement vers un fournisseur d’identité social, comme GitHub. Vous devez d’abord configurer la connexion appropriée dans [Auth0 Dashboard > Authentication > Social](https://manage.auth0.com/#/connections/social) et récupérer le nom de la connexion dans l’onglet **Settings**. Pour envoyer les utilisateurs directement à l’écran de connexion à GitHub, vous devez transmettre le paramètre `connection` et lui attribuer comme valeur le nom de la connexion (dans ce cas-ci, `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`; Maintenant, lorsque vous demandez des jetons, votre jeton d’identité contiendra un champ `sub` avec l’ID unique de l’utilisateur renvoyé par GitHub. Lorsque vous décodez le jeton d’identité, il ressemblera à ceci : ```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’autorisation 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’octroi](/docs/fr-ca/get-started/applications/update-grant-types)