> ## 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.

> Comment connecter des applications hébergées par un fournisseur à SharePoint Online.

# Connecter des applications hébergées par un fournisseur à SharePoint Online

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

Auth0 peut grandement simplifier le processus d’authentification pour les applications SharePoint. Auth0 obtiendra un <Tooltip tip="Jeton d’accès : informations d’identification d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisées pour accéder à une API." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Access+Token">Jeton d’accès</Tooltip> que vous pourrez ensuite utiliser pour appeler les API SharePoint.

Vous n’aurez besoin d’aucune bibliothèque spéciale. Vous pouvez utiliser n’importe lequel des SDK pris en charge par Auth0.

<div id="step-1-register-your-application-in-auth0">
  ## Étape 1. Enregistrez votre application dans Auth0
</div>

Enregistrez simplement une nouvelle application dans Auth0 comme vous le feriez normalement : **Applications > NEW**. Consultez l’un des SDK disponibles pour obtenir des instructions détaillées. Gardez le `client_id` à portée de main, car vous en aurez besoin à l’étape suivante.

<div id="step-2-create-a-package-for-your-application">
  ## Étape 2. Créez un package pour votre application
</div>

Vous devez obtenir un **<Tooltip tip="ID client : Valeur d’identification attribuée à votre ressource enregistrée par Auth0." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Client+ID">ID client</Tooltip>** et un **<Tooltip tip="ID client : Valeur d’identification attribuée à votre ressource enregistrée par Auth0." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Client+Secret">Secret client</Tooltip>** pour votre application. Il existe plusieurs façons d’enregistrer votre application selon l’usage prévu.

[Enregistrer des compléments SharePoint (Microsoft Docs)](https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/register-sharepoint-add-ins) explique les différentes façons d’enregistrer votre application dans SharePoint. Dans cette étape du didacticiel, vous utiliserez la méthode la plus simple : l’auto-enregistrement dans un locataire précis (le vôtre).

<div id="open-sharepoint-online">
  ### Ouvrez SharePoint Online
</div>

L’URL du tableau de bord est la suivante : `https://{your Office365 tenant}.sharepoint.com/_layouts/15/appregnew.aspx`

<div id="generate-a-client_id-and-clientsecret">
  ### Générez un ID client et un secret client :
</div>

<Frame>
  <img src="https://mintcdn.com/translations/Dcx0M11uuptU53TX/docs/images/cdy7uua7fh8z/2BLGIJdnfbknayoyF4U5wP/70e66c7d10a001e0eb7ffa7aaebfb035/90SvG.png?fit=max&auto=format&n=Dcx0M11uuptU53TX&q=85&s=8a4f7c80843439b4837be55621ff1b3e" alt="SharePoint - générer l’ID client - générer le secret client" width="750" height="671" data-path="docs/images/cdy7uua7fh8z/2BLGIJdnfbknayoyF4U5wP/70e66c7d10a001e0eb7ffa7aaebfb035/90SvG.png" />
</Frame>

<div id="complete-the-information-in-the-form">
  ### Remplissez les informations dans le formulaire :
</div>

Puisqu’Auth0 se trouve entre votre application et l’infrastructure d’Office 365, vous devez utiliser cette URL pour l’application :

**Domaine de l’application** :

export const codeExample1 = `{yourDomain}`;

<AuthCodeBlock children={codeExample1} language="http" />

**URI de redirection**:

export const codeExample2 = `https://{yourDomain}/login/callback?SP_APP_TOKEN&connection=CONNECTION&client_id={yourClientId}&redirect_uri={https://yourApp/callback}`;

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

* `connection` est simplement le nom que vous utiliserez pour la connexion dans Auth0 (par exemple, "sharepoint").
* `client_id` identifie votre application dans Auth0 (créée à l’étape 1).
* `redirect_uri` correspond à l’emplacement dans votre application où vos utilisateurs seront redirigés une fois le processus terminé. Si vous ne le précisez pas, ce sera toujours l’URL de rappel de l’application définie dans Auth0 (il peut s’agir de localhost)

<div id="package-the-app-and-upload-to-sharepoint">
  ### Empaquetez l’application et téléversez-la dans SharePoint :
</div>

Remplissez les informations dans le manifeste de votre application dans Visual Studio :

<Frame>
  <img src="https://mintcdn.com/translations/3nS3prIggmJG9TUI/docs/images/cdy7uua7fh8z/36dscLHlLHZjJx1rLgrQ7N/8d64ec7a51f4e053627ecb5dfd3c7707/90SEc.png?fit=max&auto=format&n=3nS3prIggmJG9TUI&q=85&s=4572cd87467055c361d418d216ea6108" alt="SharePoint - Visual Studio - Manifeste de l’application" width="750" height="587" data-path="docs/images/cdy7uua7fh8z/36dscLHlLHZjJx1rLgrQ7N/8d64ec7a51f4e053627ecb5dfd3c7707/90SEc.png" />
</Frame>

Notez que le `Query string` sera exactement le même que le `URI de redirection` que vous avez saisi précédemment. Cliquez ensuite avec le bouton droit sur le projet, puis sélectionnez `Publish` :

Créez un **profil de publication** (vous devrez saisir le même **ID client** et le même **Secret client** obtenus dans le tableau de bord SharePoint).

Cliquez sur **Package** et téléversez le fichier obtenu dans SharePoint.

<div id="step-3-create-the-connection-in-auth0">
  ## Étape 3. Créez la connexion dans Auth0
</div>

La dernière étape de l’intégration consiste à ajouter une connexion SharePoint dans Auth0.

Vous aurez besoin de :

* `Connection Name`. Il s’agit d’un nom arbitraire. Il doit correspondre à ce que vous avez saisi à l’étape 2.
* `ID client` & `Secret client`. Ils doivent aussi correspondre à ce que vous avez saisi à l’étape 2.
* `Test SharePoint Site Url`. Il s’agit de l’URL du site SharePoint utilisée pour tester la connexion (par exemple, lorsque vous cliquez sur le bouton « Try » dans le tableau de bord). Elle n’est jamais utilisée à l’exécution, car les utilisateurs suivront toujours le lien vers votre site depuis SharePoint.

Les utilisateurs installeront votre application à partir de l’Office Marketplace. Lorsqu’ils cliqueront sur le lien, ils seront redirigés vers Auth0, qui négociera le jeton d’accès pour vous, puis vers votre application. Votre application recevra un `User Profile` qui ressemblera à ceci :

<Frame>
  <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4piqwmx1ONWMd3kjTFMq4I/714545f5cda3ab1d1dd5c620bc96b083/8Xp6x.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=175a5c991bb319e22af334db82e66ff9" alt="Office Marketplace - Redirect -  User Profile Example" width="705" height="750" data-path="docs/images/cdy7uua7fh8z/4piqwmx1ONWMd3kjTFMq4I/714545f5cda3ab1d1dd5c620bc96b083/8Xp6x.png" />
</Frame>

Les propriétés suivantes seront incluses : `cacheKey`, `refresh_token`, `host` et `site`. Elles vous permettront d’appeler les API SharePoint (comme les listes).