> ## 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 l’authentification à votre application monopage (SPA) à l’aide du flux implicite avec Form Post.
# Ajouter l’authentification à l’aide du 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) + "*****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
{displayText}
;
};
Vous pouvez ajouter la connexion à votre application monopage (SPA) à l’aide du flux implicite avec Form Post. Pour en savoir plus sur le fonctionnement de ce flux et pourquoi vous devriez l’utiliser, consultez [Implicit Flow with Form Post](/fr-CA/docs/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post).
Utilisez le flux implicite avec Form Post pour les cas d’utilisation de connexion uniquement; si vous devez demander des jetons d’accès lors de la connexion de l’utilisateur afin de pouvoir appeler votre API, utilisez le flux de code d’autorisation avec PKCE. Pour en savoir plus, consultez [Authorization Code Flow with Proof Key for Code Exchange (PKCE](/fr-CA/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce)).
Pour implémenter 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 d’implémenter le flux; il prendra en charge la plus grande partie du travail pour vous. Si vous utilisez notre SDK JavaScript, assurez-vous de mettre en œuvre des mesures d’atténuation adaptées à votre architecture. Pour en savoir plus, consultez [Auth0.js Reference](/fr-CA/docs/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.
Après une connexion réussie, votre application aura accès au [jeton d’identité](/fr-CA/docs/secure/tokens/id-tokens) de l’utilisateur. Le ID token contiendra les renseignements de base du profil utilisateur.
## Prérequis
Enregistrez votre application auprès d’Auth0. Pour en savoir plus, consultez [Enregistrer des applications monopage](/fr-CA/docs/get-started/auth0-overview/create-applications/single-page-web-apps).
* Sélectionnez **Application monopage** comme **Type d’application**.
* Ajoutez une **Allowed Callback URL** : `{https://yourApp/callback}`.
* Assurez-vous que les **types d’octroi** de votre application incluent **Implicit**. Pour en savoir plus, consultez [Mettre à jour les types d’octroi](/fr-CA/docs/get-started/applications/update-grant-types).
## Autoriser l’utilisateur
Demandez l’autorisation de l’utilisateur et redirigez-le vers votre application. Pour amorcer 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é pour prendre en charge l’authentification;
* Vérifier s’il existe des sessions d’authentification unique (SSO) actives;
* Obtenir le consentement de l’utilisateur pour le niveau d’autorisation demandé, sauf si ce consentement a déjà été accordé.
Pour autoriser l’utilisateur, votre application doit envoyer l’utilisateur à 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 de justificatif 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 ID Token, et `token` renvoie un Jeton d’accès. |
| `response_mode` | Spécifie 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 à l’aide du format `application/x-www-form-urlencoded`. |
| `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 l’autorisation accordée par l’utilisateur. Vous devez spécifier 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 suit le hash et ne tient *pas* compte des fragments. |
| `scope` | Spécifie les [scopes](/fr-CA/docs/get-started/apis/scopes) pour lesquels vous souhaitez demander une autorisation, et qui déterminent quelles claims (ou quels attributs utilisateur) vous souhaitez obtenir en retour. Ils doivent être séparés par un 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](/fr-CA/docs/secure/tokens/json-web-tokens/json-web-token-claims#custom-claims) conformes à un [format avec espace de noms](/fr-CA/docs/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 et 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 [Mitigate CSRF Attacks With State Parameters](/fr-CA/docs/secure/attack-protection/state-parameters). |
| `nonce` | (obligatoire si `response_type` contient `id_token token`, sinon recommandé) Une chaîne aléatoire générée de façon cryptographiquement sûre que votre application ajoute à la requête initiale et qu’Auth0 inclut dans l’ID Token, [utilisée pour prévenir les attaques par rejeu de jeton](/fr-CA/docs/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 ouvre une session avec son compte GitHub. Lorsqu’elle n’est pas spécifié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 **Connexions** de votre application. |
| `organization` | (facultatif) ID de l’organisation à utiliser lors de l’authentification d’un utilisateur. S’il n’est pas fourni et que votre application est configurée pour **Afficher l’invite d’organisation**, 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 à une organisation](/fr-CA/docs/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, l’extrait HTML de votre URL d’autorisation pour ajouter l’ouverture de session à 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 identifiants demandés sont encodés dans le corps de la réponse :
```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 | ID Token |
| token | Jeton d’accès (plus les valeurs `expires_in` et `token_type`) |
| id\_token token | ID Token, Jeton d’accès (plus les valeurs `expires_in` et `token_type`) |
Auth0 renverra également toute valeur `state` incluse dans votre appel à l’URL d’autorisation.
Validez vos jetons avant de les enregistrer. Pour savoir comment faire, consultez [Valider les ID Tokens](/fr-CA/docs/secure/tokens/id-tokens/validate-id-tokens) et [Valider les jetons d’accès](/fr-CA/docs/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 pouvez effectuer lorsque vous autorisez l’utilisateur à l’étape 1. Elle affiche l’écran de connexion d’Auth0 et permet à l’utilisateur de se connecter avec l’une 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`;
Cette opération renverra un jeton d’identité, que vous pourrez extraire de votre URL de redirection.
### Demander le nom de l’utilisateur et sa photo de profil
En plus de l’authentification habituelle, 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 lorsque vous autorisez 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 à :
```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 d’authentification habituel, cet exemple montre comment rediriger les utilisateurs directement vers un fournisseur d’identité social, comme GitHub. Pour que cet exemple fonctionne, vous devez accéder à [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 rediriger les utilisateurs directement vers 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`) lors de l’autorisation de 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 ID Token contiendra une revendication `sub` avec l’identifiant unique de l’utilisateur renvoyé par GitHub. Lorsque vous décoderez l’ID Token, 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](/fr-CA/docs/authenticate/protocols/oauth)
* [Protocole OpenID Connect](/fr-CA/docs/authenticate/protocols/openid-connect-protocol)
* [Jetons](/fr-CA/docs/secure/tokens)
* [Atténuer les attaques par rejeu lors de l’utilisation du flux implicite](/fr-CA/docs/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post/mitigate-replay-attacks-when-using-the-implicit-flow)
* [Enregistrer des applications Web monopage](/fr-CA/docs/get-started/auth0-overview/create-applications/single-page-web-apps)
* [Mettre à jour les types d’octroi](/fr-CA/docs/get-started/applications/update-grant-types)