SharePoint Embedded pour Visual Studio Code

L’extension SharePoint Embedded Visual Studio Code permet aux développeurs de démarrer gratuitement avec le développement d’applications SharePoint Embedded.

Importante

Pour commencer à créer avec SharePoint Embedded, vous avez besoin d’un accès administratif à un locataire Microsoft 365. Si vous n’avez pas encore de locataire, vous pouvez obtenir votre propre locataire avec le Programme pour les développeurs Microsoft 365, l’expérience numérique du client Microsoft ou créer un essai gratuit d’une licence Microsoft 365 E3.

Installer SharePoint Embedded pour Visual Studio Code

1. Ouvrez une nouvelle fenêtre dans Visual Studio Code et accédez à « Extensions » dans la barre d’activités.
2. Recherchez « SharePoint Embedded » dans la vue Extensions. Vous pouvez également afficher l’extension dans Visual Studio Marketplace.
3. Sélectionnez « Installer » pour que l’icône SharePoint Embedded s’affiche dans la barre d’activité.
4. S’il est déjà installé, effectuez la mise à jour vers la dernière version, le cas échéant.
5. Sélectionnez l’icône pour ouvrir la vue SharePoint Embedded et créer un type de conteneur avec la configuration d’évaluation.

Se connecter avec les informations d’identification de l’administrateur

Pour utiliser l’extension, vous devez vous connecter à un locataire Microsoft 365 avec un compte d’administrateur.

• L’authentification ouvre un nouvel onglet dans un navigateur externe pour accorder des autorisations

  

• Examinez attentivement les autorisations demandées, puis sélectionnez Accepter dans la fenêtre contextuelle demandant le consentement de l’administrateur

  

Une fois l’autorisation réussie, sélectionnez Ouvrir dans la boîte de dialogue à rediriger vers VSCode :

Créer un type de conteneur avec une configuration d’évaluation

Une fois connecté, vous êtes invité à créer un type de conteneur avec la configuration d’évaluation. Un type de conteneur vous permet de commencer à appeler des API SharePoint Embedded et à créer une application de preuve de concept à l’aide de SharePoint Embedded. En savoir plus sur les types de conteneurs.

• Sélectionnez Créer un type de conteneur d’essai
• Suivez les invites pour nommer votre type de conteneur. Vous pouvez modifier le nom de votre type de conteneur ultérieurement.

Remarque

SharePoint Embedded pour Visual Studio Code prend uniquement en charge les types de conteneurs avec configuration d’évaluation pour l’instant. Les autres types de conteneurs avec des configurations de facturation standard ou directe doivent être créés à l’aide du module PowerShell SharePoint Online.

Créer une application Microsoft Entra ID

Chaque type de conteneur appartient à une application Microsoft Entra ID. La première étape lors de la création d’un type de conteneur d’essai gratuit consiste à créer ou à sélectionner une application Microsoft Entra ID existante en tant qu’application propriétaire. Vous pouvez spécifier le nom de votre nouvelle application ou choisir l’une de vos applications existantes. En savoir plus sur l’architecture des applications SharePoint Embedded

• Suivez les invites pour nommer votre nouvelle application Entra ou sélectionnez un ID d’application existant :

Remarque

Si vous choisissez une application existante, l’extension met à jour les paramètres de configuration de cette application pour qu’elle fonctionne à la fois avec SharePoint Embedded et cette extension. Cette opération n’est PAS recommandée sur les applications de production.

Une fois votre type de conteneur créé et votre application configurée, vous pouvez afficher l’inscription de votre locataire local sous forme d’arborescence dans la barre de navigation de gauche.

Inscrire votre type de conteneur

Après avoir créé votre type de conteneur, vous devez inscrire ce type de conteneur sur votre locataire local. En savoir plus sur l’inscription de type de conteneur.

• Suivez les invites et sélectionnez Inscrire sur le locataire local dans le coin inférieur droit de la fenêtre VS Code.

  

• Si vous ne voyez pas l’invite, vous pouvez cliquer avec le bouton droit sur votre <container-type-name> et sélectionner Inscrire dans le menu

  

Accorder des autorisations

Passez en revue les autorisations et suivez l’invite pour accorder le consentement de l’administrateur

Une fenêtre de navigateur externe s’ouvre pour vous permettre de vous connecter et d’accorder le consentement de l’administrateur

Créer votre premier conteneur

Une fois votre type de conteneur inscrit, vous pouvez maintenant créer votre premier conteneur. Seuls cinq conteneurs de type conteneur peuvent être créés pour charger et gérer du contenu.

• Cliquez avec le bouton droit sur la liste déroulante Conteneurs dans l’arborescence dans la barre de navigation de gauche, puis sélectionnez Créer un conteneur.
• Entrez un nom pour le conteneur que vous souhaitez créer

de conteneur

Conteneurs de recyclage

Vous pouvez également recycler et récupérer des conteneurs au sein de l’extension.

Charger l’exemple d’application

Une fois votre type de conteneur d’essai gratuit créé, vous pouvez utiliser l’extension pour charger l’un des exemples d’applications SharePoint Embedded et remplir automatiquement le fichier de configuration du runtime avec les détails de votre application Microsoft Entra ID et du type de conteneur.

Lors du chargement de l’exemple d’application, vous serez averti qu’il créera des secrets en texte brut pour s’authentifier sur votre ordinateur local.

Si aucune clé secrète client n’est trouvée sur votre application, il vous demande si vous souhaitez en créer une. Appuyez sur OK pour continuer.

Importante

Cela n’est pas destiné aux environnements de production. Pour en savoir plus sur la configuration de l’inscription d’application pour les environnements de production, cliquez ici.

Utilisation de l’exemple d’application

Dans votre terminal, exécutez la commande suivante pour démarrer l’exemple d’application, qui se compose de 2 parties :

1. application cliente React : interface utilisateur frontend s’exécutant sur le port 8080
2. serveur d’applications de fonction Azure : serveur d’API back-end qui gère les opérations SharePoint Embedded

# Navigate to your sample application directory
cd [your-path]\SharePoint-Embedded-Samples\Samples\spe-typescript-react-azurefunction

# Install dependencies and start the application
npm run start

Remarque

Le démarrage initial peut prendre quelques minutes à mesure que les dépendances sont installées et que les deux applications sont générées. Attendez que les deux sorties de console s’affichent avant d’accéder à l’application.

Cela installe les dépendances et exécute l’application serveur et cliente. Une fois en cours d’exécution, vous verrez les éléments suivants dans le terminal, après quoi vous pouvez accéder à pour accéder à http://localhost:8080 l’application.

Une fois que les deux applications s’exécutent correctement :

1. Ouvrez votre navigateur web et accédez à http://localhost:8080
2. Connectez-vous à l’aide de votre compte d’administrateur Microsoft 365 (le même compte que celui utilisé dans l’extension VS Code)
3. Dans la page d’accueil, sélectionnez « Conteneurs » pour commencer à créer des conteneurs et à charger des fichiers.
4. Suivez les invites à l’écran pour interagir avec vos conteneurs SharePoint Embedded

Importante

Cet exemple d’application stocke les secrets d’authentification en texte brut à des fins de développement uniquement. N’utilisez jamais cette configuration dans un environnement de production.

Résolution des problèmes

Si vous rencontrez des problèmes :

• Port déjà utilisé : si le port 8080 est déjà utilisé, l’application essaie automatiquement le port disponible suivant.
• Dépendances non installées : essayez d’exécuter npm install manuellement avant npm run start
• Erreurs d’authentification : vérifiez que votre application Microsoft Entra ID est correctement configurée avec les URI de redirection corrects

Exporter l’environnement Postman

La collection Postman SharePoint Embedded vous permet d’explorer et d’appeler les API SharePoint Embedded. La collection nécessite un fichier d’environnement avec des variables utilisées pour l’authentification et divers identificateurs. Cette extension automatise la génération de ce fichier d’environnement rempli afin que vous puissiez l’importer dans Postman et appeler immédiatement les API SharePoint Embedded.