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

# Configurer le partage des ressources cross-origin

> Décrit comment configurer le partage de ressources cross-origin (CORS) pour une application enregistrée auprès d’Auth0 à l’aide d’Auth0 Dashboard.

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>;
};

<Card title="Avant de commencer">
  * Pour des raisons de sécurité, l’URL d’origine de votre application doit faire partie de la liste des URL approuvées. Si vous ne l’avez pas déjà ajouté aux **URL de rappel autorisées** pour votre application, vous devrez l’ajouter à la liste **Allowed Origins (CORS) (Origines autorisées)**.
  * Assurez-vous que **Origines Web autorisées** dans l’affichage des \*\*Settings (Paramètres)\*\*de votre application est définie sur le domaine effectuant la requête. Les URL peuvent contenir des caractères génériques pour les sous-domaines, mais pas de chemins relatifs après l’URL du domaine. Pour en savoir plus, lisez [Espaces réservés pour les sous-domaines](https://auth0.com/docs/get-started/applications/wildcards-for-subdomains).
  * Si vous n’activez pas [Domaines personnalisés](https://auth0.com/docs/customize/custom-domains), vous devrez créer une page de vérification qui utilise Auth0.js comme solution de secours pour l’authentification interorigine.
</Card>

Auth0 recommande fortement que les transactions d’authentification soient gérées à partir de la [Connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login). Il s’agit de la manière la plus simple et la plus sûre d’authentifier les utilisateurs. Cependant, certaines situations peuvent nécessiter que la connexion soit directement intégrée dans une application. Lorsqu’une connexion intégrée est requise, une application doit être configurée pour le partage de ressources cross-origin (CORS).

Vous pouvez configurer CORS pour une application à l’aide d’Auth0 Dashboard.

## Configurer l’authentification cross-origin

1. Rendez-vous à [Dashboard > Applications > Applications](https://manage.auth0.com/#/applications) et sélectionnez le nom de l’application que vous souhaitez afficher.
2. Sous **Authentification cross-origin**, activez le bouton bascule **Autoriser l’authentification cross-origin**.
3. Rendez-vous à **Origines autorisées (CORS)** et saisissez l‘URL d’origine de votre application. Pour en savoir plus sur les Origines, veuillez consulter [Origines sur Mozilla MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin).
4. Cliquez sur **Enregistrer les modifications**.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Si vous n’avez pas besoin d’utiliser CORS pour votre application, assurez-vous que l’option **Permettre l’authentification cross-origin** est désactivée.
</Callout>

## Créer une page de vérification cross-origin

Dans certains cas, les témoins de tiers ne sont pas pris en charge. Certaines versions de navigateur ne prennent pas en charge les témoins de tiers et, si elles le font, elles peuvent être désactivées dans les paramètres de l’utilisateur.

Pour les [navigateurs pris en charge](#browser-testing-support), vous pouvez utiliser la méthode `crossOriginVerification` de la [trousse SDK Auth0.js](/docs/fr-ca/libraries/auth0js) dans votre application sur une page dédiée pour gérer les cas où les témoins de tiers sont désactivés.

Pour les navigateurs qui ne sont pas pris en charge, tels que Chrome, Opera et Safari, l’authentification cross-origin ne fonctionnera pas lorsque les témoins de tiers sont désactivés, sauf si vous active les [domaines personnalisés](/docs/fr-ca/customize/custom-domains).

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  La configuration de **Safari** est intitulée « Empêcher le suivi multidomaine » et utilise [Prévention intelligente du suivi](https://webkit.org/blog/7675/intelligent-tracking-prevention/). Malheureusement, cela empêche également les témoins tiers d’être utiles dans les scénarios d’authentification. Voici un exemple de l’impact sur le [renouvellement des jetons](https://auth0.com/docs/api-auth/token-renewal-in-safari).
</Callout>

1. Créez une page dans votre application qui instancie `WebAuth` depuis [Auth0.js](/docs/fr-ca/libraries/auth0js). Appelez immédiatement `crossOriginVerification`. Le titre de la page est à votre discrétion.

export const codeExample = `   <!-- callback-cross-auth.html -->

<head>
  <script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
  <script type="text/javascript">
    var auth0Client = new auth0.WebAuth({
      clientID: '{yourClientId}',
      domain: '{yourDomain}'
    });
    auth0Client.crossOriginVerification();
  </script>
</head>
`;

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

Lorsque les témoins de tiers ne sont pas pris en charge, Auth0.js génère un iframe pour appeler un flux de vérification cross-origin différent.
2\. Rendez-vous à [Dashboard > Applications > Applications](https://manage.auth0.com/#/applications), et sélectionnez le nom de l’application que vous souhaitez afficher.
3\. Sous **Authentification cross-origin**, ajoutez la page de rappel que vous avez créée au champ **URL Vérification cross-origin de secours**.

<Warning>
  Pour les environnements de production, vérifiez que l’URL de la page ne pointe pas vers `localhost`. La page doit se trouver dans le même domaine que celui où est hébergé le formulaire de connexion intégré et doit comporter un schéma `https`.
</Warning>

4. Cliquez sur **Enregistrer les modifications**.

Pour plus de détails, veuillez consulter [Exemple d’authentification cross-origin sur GitHub](https://github.com/auth0/lock/blob/master/support/callback-cross-auth.html).

## Codes d’erreur et descriptions

<Warning>
  Les descriptions d’erreurs sont destinées à être lues par un être humain. Elles sont sujettes à modification à tout moment et ne doivent être analysées par aucun code.
</Warning>

Lorsqu’Auth0.js v9 (et Lock) est utilisé pour une connexion intégrée, il appelle le point de terminaison `/co/authenticate`, qui comporte les erreurs suivantes :

| État  | Code                          | Description                                                                                                                                                                                                       |
| ----- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `400` | `invalid_request`             | Corps de requête non valide. Tous les paramètres uniquement du type client\_id, credential\_type, username, OTP et realm sont requis.                                                                             |
| `400` | `unsupported_credential_type` | Paramètre de type d’identifiant inconnu.                                                                                                                                                                          |
| `400` | `invalid_request`             | Domaine inconnu, connexion-inexistante.                                                                                                                                                                           |
| `401` | `unauthorized_client`         | Connexion d’origine croisée non autorisée.                                                                                                                                                                        |
| `401` | `password_leaked`             | Cette tentative de connexion a été bloquée car le mot de passe que vous utilisez a été précédemment divulgué suite à une violation de données (pas dans cette application).                                       |
| `403` | `access_denied`               | Courriel ou mot de passe incorrect.                                                                                                                                                                               |
| `403` | `access_denied`               | Erreur d’authentification                                                                                                                                                                                         |
| `403` | `blocked_user`                | Utilisateur bloqué                                                                                                                                                                                                |
| `429` | `too_many_attempts`           | Votre compte a été bloqué après plusieurs tentatives de connexion consécutives. Nous vous avons envoyé une notification par votre méthode de contact préférée avec des instructions sur la façon de le débloquer. |
| `429` | `too_many_attempts`           | Nous avons détecté un comportement de connexion suspect et les prochaines tentatives seront bloquées. Veuillez communiquer avec l’administrateur.                                                                 |

De plus, vous pouvez également obtenir un code d’erreur `403` générique sans propriété `error` ou `error_description` Le corps de la réponse n’incluerait que quelque chose de similaire à ce qui suit :

`Origine https://test.app non permise.`

## Prise en charge des tests de navigateur

Les navigateurs suivants peuvent utiliser l’authentification cross-origin lorsque les témoins de tiers sont désactivés :

* Microsoft Internet Explorer

<Card title="Attributs des témoins samesite">
  Précédemment, les options des [attributs de témoins](https://auth0.com/docs/sessions/concepts/cookie-attributes)[`samesite`](https://auth0.com/docs/sessions/concepts/cookie-attributes)étaient `true`, `false`, `strict` ou `lax`. Si vous n’aviez pas défini l’attribut manuellement, Auth0 utilisait la valeur par défaut `false`.

  Depuis en février 2020, Google Chrome v80 a modifié la manière de gérer les témoins, et Auth0 a implémenté les modifications suivantes :

  * La valeur des témoins dont l’attribut `samesite` n’a pas été défini sera `lax`.
  * Les témoins `sameSite=none` doivent être sécurisés, sinon ils ne peuvent pas être enregistrés dans le groupe de témoins du navigateur.

  L’objectif de ces modifications est d’améliorer la sécurité et d’éviter les attaques CSRF.
</Card>

## En savoir plus

* [Connexion intégrée](/docs/fr-ca/authenticate/login/embedded-login)
* [Authentification inter-origine](/docs/fr-ca/authenticate/login/cross-origin-authentication)
* [Paramètres d’application](/docs/fr-ca/get-started/applications/application-settings)
* [Modifications des attributs du témoin SameSite](/docs/fr-ca/manage-users/cookies/samesite-cookie-attribute-changes)