> ## 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 monopage (SPA) à l’aide du flux implicite avec Form Post. # Ajouter la connexion avec le flux implicite avec Form Post 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 monopage (SPA) à l’aide du flux implicite avec Form Post. Pour savoir comment fonctionne ce flux et pourquoi vous devriez l’utiliser, consultez [flux implicite avec Form Post](/docs/fr-ca/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post). Utilisez le flux implicite avec Form Post pour les cas d’utilisation axés uniquement sur la connexion; si vous devez demander des jetons d’accès pendant la connexion de l’utilisateur afin de pouvoir appeler votre API, utilisez le flux du code d’autorisation avec PKCE. Pour en savoir plus, consultez [Authorization Code Flow with Proof Key for Code Exchange (PKCE](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce)). Pour mettre en œuvre le flux implicite avec Form Post, vous pouvez utiliser les ressources suivantes : * [Express OpenID Connect SDK](https://www.npmjs.com/package/express-openid-connect) : La façon la plus simple de mettre en œuvre ce flux; il effectuera la majeure partie du travail pour vous. Si vous utilisez notre SDK Javascript, assurez-vous de mettre en place des mesures d’atténuation adaptées à votre architecture. Pour en savoir plus, consultez [Auth0.js Reference](/docs/fr-ca/libraries/auth0js). * [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. À la suite d’une connexion réussie, votre application aura accès à l’[jeton d’identité](/docs/fr-ca/secure/tokens/id-tokens) de l’utilisateur. Le jeton d’identité contiendra les renseignements de base du profil utilisateur.
## Prérequis
Enregistrez votre application dans Auth0. Pour en savoir plus, consultez [Enregistrer des applications monopages](/docs/fr-ca/get-started/auth0-overview/create-applications/single-page-web-apps). * Sélectionnez **Application monopage** comme **Type d’application**. * Ajoutez `{https://yourApp/callback}` comme **URL de rappel autorisée**. * Assurez-vous que les **types d’octroi** de votre application incluent **Implicit**. Pour en savoir plus, consultez [Mettre à jour les types d’octroi](/docs/fr-ca/get-started/applications/update-grant-types).
## Autoriser l’utilisateur
Demandez l’autorisation de l’utilisateur et redirigez-le vers votre application. Pour lancer le processus, 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é pour prendre en charge l’authentification ; * Vérifier la présence de sessions d’authentification unique (SSO) actives ; * Obtenir le consentement de l’utilisateur pour le niveau de permission demandé, sauf si ce consentement a déjà été donné. Pour autoriser l’utilisateur, votre application doit l’envoyer vers l’URL d’autorisation.
### Exemple d’URL d’autorisation
export const codeExample1 = `https://{yourDomain}/authorize? response_type=YOUR_RESPONSE_TYPE& response_mode=form_post& client_id={yourClientId}& redirect_uri={https://yourApp/callback}& scope=SCOPE& state=STATE& nonce=NONCE`;
### Paramètres
| Nom du paramètre | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `response_type` | Indique le type d’identifiant qu’Auth0 renverra (`code` ou `token`). Pour le flux implicite, la valeur peut être `id_token`, `token` ou `id_token token`. Plus précisément, `id_token` renvoie un jeton d’identité et `token` renvoie un jeton d’accès. | | `response_mode` | Précise la façon dont les paramètres de réponse doivent être renvoyés. Pour des raisons de sécurité, la valeur doit être `form_post`. Dans ce mode, les paramètres de réponse sont encodés comme des valeurs de formulaire HTML, transmises au moyen de la méthode HTTP POST et encodées dans le corps au format `application/x-www-form-urlencoded`. | | `client_id` | Le Client ID de votre application. Vous pouvez trouver cette valeur dans les [paramètres de votre 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. Vous devez indiquer cette URL comme URL de rappel valide dans les [Application Settings](https://manage.auth0.com/#/Applications/\{yourClientId}/settings) de votre application.

**Avertissement :** Conformément à la [spécification OAuth 2.0](https://tools.ietf.org/html/rfc6749#section-3.1.2), Auth0 supprime tout ce qui suit le dièse et ne tient *pas* compte des fragments. | | `scope` | Précise les [scopes](/docs/fr-ca/get-started/apis/scopes) pour lesquels vous souhaitez demander une autorisation, ce qui détermine quelles claims (ou quels attributs utilisateur) seront renvoyés. Ils doivent être séparés par une espace. Vous pouvez demander n’importe lequel des [scopes OpenID Connect (OIDC) standard](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims) concernant les utilisateurs, comme `profile` et `email`, des [claims personnalisées](/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), ou tout scope pris en charge par l’API cible (par exemple, `read:contacts`). | | `state` | (recommandé) Une chaîne alphanumérique arbitraire opaque que votre application ajoute à la requête initiale et 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), consultez [Atténuer les attaques CSRF avec les paramètres d’état](/docs/fr-ca/secure/attack-protection/state-parameters). | | `nonce` | (obligatoire pour `response_type` contenant `id_token token`, sinon recommandé) Une chaîne aléatoire cryptographiquement sûre que votre application ajoute à la requête initiale et qu’Auth0 inclut dans le jeton d’identité, [utilisée pour prévenir les attaques par rejeu de jeton](/docs/fr-ca/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post/mitigate-replay-attacks-when-using-the-implicit-flow). | | `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. S’il n’est pas fourni, et si votre application est configurée pour **Display Organization Prompt**, l’utilisateur pourra saisir le nom de l’organisation pendant l’authentification. | | `invitation` | (facultatif) ID du ticket d’invitation de l’organisation. Lorsque vous [invitez un membre dans une organisation](/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. | À titre d’exemple, votre extrait HTML pour l’URL d’autorisation lors de l’ajout de la connexion à votre application pourrait ressembler à ceci : export const codeExample2 = ` Se connecter `;
### Réponse
Si tout se passe bien, vous recevrez une réponse `HTTP 302`. Les données d’authentification demandées sont encodées dans le corps : ```json lines theme={null} HTTP/1.1 302 Found Content-Type: application/x-www-form-urlencoded id_token=eyJ...acA& state=xyzABC123 ``` Notez que les valeurs renvoyées dépendent du `response_type` que vous avez demandé. | Type de réponse | Composants | | --------------- | ------------------------------------------------------------------------------- | | id\_token | jeton d’identité | | token | jeton d’accès (avec les valeurs `expires_in` et `token_type`) | | id\_token token | jeton d’identité, jeton d’accès (avec les valeurs `expires_in` et `token_type`) | Auth0 renverra aussi toute valeur `state` que vous avez incluse dans votre requête vers l’URL d’autorisation. 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é contiennent des renseignements sur l’utilisateur qui doivent être décodés et extraits.
## Cas d’utilisation
### Requête d’authentification de base
Cet exemple montre la requête la plus simple que vous puissiez faire lors de l’autorisation de l’utilisateur à l’étape 1. Il affiche l’écran de connexion Auth0 et permet à l’utilisateur d’ouvrir une session avec n’importe laquelle de vos connexions configurées : export const codeExample3 = `https://{yourDomain}/authorize? response_type=id_token& response_mode=form_post& client_id={yourClientId}& redirect_uri={https://yourApp/callback}& nonce=NONCE`; Cela renverra un jeton d’identité, que vous pouvez extraire de votre URL de redirection.
### Demander le nom de l’utilisateur et sa photo de profil
En plus du processus habituel d’authentification 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 lors de l’autorisation de l’utilisateur : export const codeExample4 = `https://{yourDomain}/authorize? response_type=id_token token& response_mode=form_post& client_id={yourClientId}& redirect_uri={https://yourApp/callback}& scope=openid%20name%20picture& state=STATE& nonce=NONCE`; Maintenant, votre jeton d’identité contiendra les claims `name` et `picture` demandés. Lorsque vous décoderez le jeton d’identité, 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 de l’authentification utilisateur habituelle, cet exemple montre comment rediriger les utilisateurs directement vers un fournisseur d’identité social, comme GitHub. Pour que cet exemple fonctionne, vous devez aller dans [Auth0 Dashboard > Authentication > Social](https://manage.auth0.com/#/connections/social) et configurer la connexion appropriée. Récupérez 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 définir sa valeur sur le nom de la connexion (dans ce cas, `github`) au moment d’autoriser l’utilisateur : export const codeExample5 = `https://{yourDomain}/authorize? response_type=id_token token& response_mode=form_post& client_id={yourClientId}& redirect_uri={https://yourApp/callback}& scope=openid%20name%20picture& state=STATE& nonce=NONCE& connection=github`; Désormais, votre jeton d’identité contiendra une claim `sub` comprenant l’ID unique de l’utilisateur renvoyé par GitHub. Une fois décodé, le jeton d’identité 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) * [Atténuer les attaques par rejeu lors de l’utilisation du Flux implicite](/docs/fr-ca/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post/mitigate-replay-attacks-when-using-the-implicit-flow) * [Enregistrer des applications Web monopages](/docs/fr-ca/get-started/auth0-overview/create-applications/single-page-web-apps) * [Mettre à jour les type d’octroi](/docs/fr-ca/get-started/applications/update-grant-types)