page_type |
products |
languages |
extensions |
sample |
|
|
contentType |
technologies |
services |
platforms |
createdDate |
samples |
SharePoint Framework |
Microsoft Graph |
|
|
|
8/1/2017 12:00:00 AM |
|
Exemple d’authentification de la Bibliothèque d’authentification Microsoft (MSAL JS)
Résumé
Exemple de composant WebPart SharePoint Framework à l’aide de la Bibliothèque d’authentification Microsoft (MSAL JS) pour appeler Microsoft Graph.
MSAL WP
L’exemple de composant WebPart récupère un jeton d’accès avec l’étendue User.Read
and Mail.Read
. Une fois qu’un jeton d’accès est récupéré, il effectue un appel pour recevoir l’utilisateur actuel et ses courriers électroniques.
![Étendues d’autorisation](/honeymoose/sp-dev-fx-webparts/media/commit/56e658b9589b3ce9359e545f49adb7df25c095ff/samples/react-msal-msgraph/README-Localized/assets/permission-scopes.png)
Une fois les autorisations attribuées, les informations suivantes sont affichées :
![Le composant WebPart MSAL affiché dans SharePoint Workbench](/honeymoose/sp-dev-fx-webparts/media/commit/56e658b9589b3ce9359e545f49adb7df25c095ff/samples/react-msal-msgraph/README-Localized/assets/msal-wp-output.png)
Version SharePoint Framework utilisée
![drop](https://img.shields.io/badge/drop-GA-green.svg)
S’applique à
Solution
Solution |
Auteur (s) |
react-msal-msgraph |
Elio Struyf (MVP, U2U, @eliostruyf) |
Historique des versions
Version |
Date |
Commentaires |
1.0.0 |
17 mars 2017 |
Publication initiale |
Clause d’exclusion
CE CODE EST FOURNI EN L’ÉTAT, SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS TOUTE GARANTIE IMPLICITE D'ADAPTATION À UN USAGE PARTICULIER, DE QUALITÉ MARCHANDE ET DE NON-CONTREFAÇON.
Conditions préalables
- Abonnement à Office 365 avec SharePoint Online et Exchange
- Clonez ce référentiel.
- Accédez et Inscrivez une nouvelle application sur https://apps.dev.microsoft.com
- Une fois connecté, cliquez sur Ajouter une application
- Spécifiez le nom de l’application, puis cliquez sur créer.
- Cliquez sur Ajouter une plateforme et choisissez Web.
- Spécifiez l’URL Workbench et vérifiez que la case à cocher Autoriser un flux implicite est activée
- Cliquez sur Enregistrer pour sauvegarder les modifications.
![Configuration d’URL web et flux implicite](/honeymoose/sp-dev-fx-webparts/media/commit/56e658b9589b3ce9359e545f49adb7df25c095ff/samples/react-msal-msgraph/README-Localized/assets/redirect-url.png)
- Copiez l’ID de l’application puismodifiez-le en l'ajoutant au fichier MsalWP.tsx en ligne 20
- Exécutez
npm i
- Exécutez
gulp serve --nobrowser
- Testez votre composant WebPart dans le workbench local ou hébergé
Fonctionnalités
L’exemple de composant WebPart dans cette solution illustre les concepts suivants au-dessus de SharePoint Framework :
- utilisation de la fonction React pour créer des composants WebPart côté client dans SharePoint Framework
- utilisation des styles Office UI Fabric React pour créer une expérience utilisateur cohérente avec SharePoint et Office
- authentification à la demande avec Azure Active Directory à l’aide de la bibliothèque MSAL JS
- communication avec Microsoft Graph à l’aide de l’API REST
- utilisation de la bibliothèque MSAL JS avec les composants WebPart SharePoint Framework créés à l’aide de la fonction React
![](https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-msal-msgraph)