Utiliser OAuth avec CORS pour connecter une SPA

Vous pouvez créer une Application à une seule page (SPA) qui utilise JavaScript pour travailler avec les données Microsoft Dataverse à l’aide de l’API web. Pour permettre la création d’applications comme celles-ci, Dataverse a activé Cross-Origin Resource Sharing (CORS) afin que vos SPA puissent contourner les restrictions du navigateur qui empêchent normalement les demandes dépassant les limites du domaine.

Applications à une seule page et stratégie de même origine

Les applications sur une seule page dépendent d’une utilisation fréquente de JavaScript côté client pour créer une page dynamique unique qui n’a pas besoin de charger de nouvelles pages. À la place, elles utilisent des modèles de programmation avec des requêtes réseau, parfois appelées « Ajax », pour récupérer des données et d’autres ressources du serveur. Les applications à une seule page fonctionnent correctement lorsque les données et les ressources se trouvent dans le même domaine que l’application. Mais pour protéger l’accès aux données et aux ressources sur d’autres domaines, tous les navigateurs modernes mettent en place une stratégie d’origine identique pour empêcher les sites d’utiliser les données et les ressources de sites d’un autre domaine. Le CORS permet d’accéder aux ressources sur un autre domaine. La création d’une SPA pour accéder aux données Dataverse sans CORS n’est pas une option viable.

Utiliser CORS avec Dataverse

Le protocole CORS fournit une description détaillée de la mise en œuvre et de l’utilisation de CORS. Elle explique les différents en-têtes et demandes préalables que vous devez appliquer pour faire fonctionner le CORS. La bonne nouvelle, c’est que vous n’avez pas besoin de devenir un expert du CORS pour l’utiliser avec Dataverse. La partie côté serveur a été effectuée pour vous et tout ce qu’il vous reste à savoir, c’est comment l’utiliser. Vous n’avez pas besoin de comprendre tous les fonctionnement internes du CORS pour l’utiliser avec Dataverse. À la place, vous pouvez utiliser la Bibliothèque d'authentification Microsoft pour JavaScript (MSAL.js) qui gère la plus grande partie de la complexité CORS pour vous. Du fait que les utilisateurs Dataverse sont authentifiés à l’aide de Microsoft Entra ID, MSAL.js est la méthode prise en charge pour authentifier les utilisateurs d’applications à une seule page.

Préparation à l’utilisation de MSAL.js avec une SPA

Pour configurer votre SPA pour utiliser MSAL.js, vous devez :

1. Enregistrez votre application avec le locataire Microsoft Entra ID.
2. Définir les variables de configuration dans votre application à une seule page avec les informations de cette inscription.
   Vous devez inclure les éléments suivants :
   • L’URL de votre organisation Dataverse.
   • L’ID du client Microsoft Entra ID que votre organisation utilise pour s’authentifier.
   • L’ID de client que vous obtenez quand vous inscrivez votre application.
   • L’URL vers laquelle la SPA est déployée ou déboguée pendant le développement.

L’ensemble des étapes requises est décrit dans Démarrage rapide : API web avec JavaScript côté client et Visual Studio Code.

Voir aussi

Utiliser OAuth pour se connecter aux services web Dataverse
Démarrage rapide : API web avec JavaScript côté client et Visual Studio Code
Démarrage rapide : Enregistrer une application avec la plateforme d’identités Microsoft