Démarrage rapide : Créer votre première application avec VS Code

S’applique à : Développeur

Utilisez l’extension SharePoint Embedded Visual Studio Code pour créer un type de conteneur standard pour votre première application. L’extension configure également l’application propriétaire, attache Azure facturation et inscrit le type de conteneur. Ensuite, vous créez un conteneur et exécutez un exemple d’application local.

Cet article démarre le parcours de génération. Pour plus d’informations sur la facturation, consultez Créer et configurer un type de conteneur.

Configuration requise

Avant de commencer, vérifiez que vous disposez des points suivants :

• Visual Studio Code installé.
• Accès administratif à un locataire Microsoft 365.
• Un locataire avec SharePoint disponible.
• Un abonnement Azure et un groupe de ressources auxquels votre compte peut accéder.
• Autorisations propriétaire ou contributeur sur l’abonnement Azure.
• Node.js et npm installés pour l’exemple d’application.
• Autorisation d’accorder le consentement administrateur dans Microsoft Entra ID.

Importante

Vous avez besoin d’un accès administratif à un locataire Microsoft 365. Si vous n’avez pas de locataire, utilisez le Programme pour les développeurs Microsoft 365, l’expérience numérique microsoft ou un essai Microsoft 365 E3.

Installer l’extension

1. Ouvrez Visual Studio Code.
2. Ouvrez Extensions à partir de la barre d’activité.
3. Recherchez SharePoint Embedded.
4. Sélectionnez Installer.
5. Si l’extension est déjà installée, mettez-la à jour.
6. Sélectionnez l’icône SharePoint Embedded dans la barre d’activité.

Connexion

1. Dans la vue SharePoint Embedded, sélectionnez l’action de connexion.
2. Utilisez un compte d’administrateur Microsoft 365.
3. Effectuez l’authentification dans le navigateur.
4. Passez en revue les autorisations demandées.
5. Sélectionnez Accepter pour accorder le consentement de l’administrateur.
6. Revenez à Visual Studio Code lorsque vous êtes redirigé.

Importante

Examinez attentivement l’invite de consentement. L’extension a besoin d’autorisations de locataire pour configurer les ressources de développement.

Une fois que vous vous êtes connecté, l’extension affiche la vue d’accueil SharePoint Embedded.

Créer un type de conteneur standard

Un type de conteneur définit la relation, les privilèges d’accès, la responsabilité de facturation et les comportements sélectionnés pour un ensemble de conteneurs SharePoint Embedded.

1. Sélectionnez Créer un type de conteneur.
2. Pour la méthode de facturation, sélectionnez standard.
3. Entrez un nom de type de conteneur.
4. Suivez les invites jusqu’à la fin de la création.

Utilisez un type de conteneur standard lorsque le organization propriétaire de l’application paie pour l’utilisation de SharePoint Embedded. Pour l’évaluation, choisissez version d’évaluation. Pour la facturation client-locataire, choisissez l’option pass-through, qui utilise la directToCustomer classification de facturation.

Créer ou sélectionner l’application propriétaire

Chaque type de conteneur possède une application Microsoft Entra ID propriétaire.

1. Créez une application Microsoft Entra ID ou sélectionnez un ID d’application existant.
2. Si vous créez une application, entrez son nom.
3. Laissez l’extension configurer les paramètres de développement.

Attention

Si vous sélectionnez une application existante, l’extension met à jour la configuration de cette application. N’utilisez pas d’application de production pour ce guide de démarrage rapide. Pour le modèle, consultez Architecture de l’application SharePoint Embedded.

Configurer la facturation standard

Standard types de conteneurs nécessitent une facturation Azure. L’extension attache la facturation à l’aide d’un abonnement Azure et d’un groupe de ressources auxquels votre compte peut accéder.

1. Sélectionnez un abonnement Azure.
2. Sélectionnez un groupe de ressources.
3. Attendez que l’extension inscrive le fournisseur de ressources Microsoft.Syntex et joigne la facturation.

Si vous ignorez la configuration de la facturation ou si vous ne disposez pas des autorisations de Azure requises, l’arborescence indique Facturation non configurée. Pour terminer l’installation ultérieurement, cliquez avec le bouton droit sur le type de conteneur. Sélectionnez ensuite Attacher la facturation.

Inscrire le type de conteneur localement

Vous devez inscrire le type de conteneur dans le locataire consommateur avant que votre application puisse créer des conteneurs ou accéder au contenu.

1. Après la création, suivez l’invite pour inscrire le type de conteneur dans le locataire local.
2. Si l’invite n’est pas visible, cliquez avec le bouton droit sur le type de conteneur et sélectionnez Inscrire.
3. Passez en revue les autorisations.
4. Accordez le consentement administrateur dans le navigateur.
5. Revenez à Visual Studio Code. L’inscription configure les autorisations que l’application propriétaire peut utiliser sur des conteneurs du type de conteneur.

Créer votre premier conteneur

1. Dans l’arborescence SharePoint Embedded, développez votre type de conteneur.
2. Cliquez avec le bouton droit sur Conteneurs.
3. Sélectionnez Créer un conteneur.
4. Entrez un nom de conteneur.
5. Vérifiez que le conteneur apparaît dans l’arborescence.

Un conteneur est l’unité de stockage de base et la limite de sécurité dans SharePoint Embedded.

Charger un exemple d’application

1. Dans la vue SharePoint Embedded, sélectionnez Charger l’exemple d’application.
2. Choisissez un exemple SharePoint Embedded.

1. Passez en revue l’avertissement concernant les secrets de texte brut locaux.

2. Si vous êtes invité à créer une clé secrète client, sélectionnez OK pour le développement local.

3. Laissez l’extension remplir le fichier de configuration du runtime.

Importante

L’exemple de configuration est destiné au développement uniquement. Il stocke les secrets d’authentification en texte brut sur votre ordinateur local.

Exécuter l’exemple d’application

Ouvrez un terminal et exécutez l’exemple d’application à partir de l’exemple de répertoire généré.

cd [your-path]\SharePoint-Embedded-Samples\Custom Apps\boilerplate-typescript-react
npm run start

L’exemple commence :

• Application cliente React.
• Un serveur d’applications Azure Functions.

Attendez que les deux sorties de console s’affichent.

Ensuite :

1. Ouvrez http://localhost:8080.
2. Connectez-vous avec le même compte d’administrateur Microsoft 365.
3. Sélectionnez Conteneurs dans la page d’accueil.
4. Créez des conteneurs et chargez des fichiers à partir de l’exemple d’interface utilisateur.

Remarque

Le démarrage initial peut prendre plusieurs minutes pendant l’installation des dépendances et la génération des deux applications.

Résoudre les problèmes de démarrage

Symptôme	Vérifier
Conflit de port	L’application tente le port disponible suivant lorsque le port 8080 est utilisé.
Échec des dépendances	Exécutez npm install, puis réexécutez npm run start .
Erreur d’authentification	Vérifiez que l’application Microsoft Entra ID contient les URI de redirection attendus.
Accès refusé	Vérifiez que l’inscription et le consentement de l’administrateur ont réussi.
Facturation non configurée	Vérifiez que vous disposez des autorisations Propriétaire ou Contributeur sur l’abonnement Azure sélectionné, puis utilisez Joindre la facturation.

Nettoyer

Lorsque vous avez terminé les tests :

1. Supprimez les conteneurs de test dont vous n’avez plus besoin.
2. Passez en revue Azure ressources de facturation que vous avez créées pour ce guide de démarrage rapide.
3. Supprimez les exemples de secrets locaux qui ne sont plus nécessaires.

Étapes suivantes

Pour en savoir plus sur les options de type de conteneur, consultez Créer et configurer un type de conteneur.