This module will introduce you to utilizing external APIs in your SharePoint Framework projects.
This module is also published as a Microsoft Learn module: Leverage Microsoft Graph & third-party APIs
The lab for this module is available in multiple units within the associated Microsoft Learn module. Use the following links to jump to the specific unit. Each Microsoft Learn unit represents a different lab exercise & demo in the presentation.
-
Exercise - Call anonymous third-party REST APIs
In this exercise, you'll create a new SharePoint Framework project with a single client-side web part that uses React to display the results from a call to an anonymous third-party API: the NASA Image REST API.
-
Exercise - Call Azure AD secured REST APIs
In this exercise, you'll create a new SharePoint Framework project with a single client-side web part that uses React and Microsoft Graph to display users in the currently logged in user's directory. You'll use the Azure AD HTTP client API included in the SharePoint Framework to authenticate and call the Microsoft Graph REST API.
-
Exercise - Call Microsoft Graph from SharePoint Framework components
In this exercise, you'll create a new SharePoint Framework project with a single client-side web part that uses React and Microsoft Graph to display the currently logged in user's personal details in a familiar office Persona card.
- Call anonymous third-party REST APIs
- Call Azure AD secured REST APIs
- Call Microsoft Graph from SharePoint Framework components
This module has been recorded and is available in the SharePoint Development YouTube channel: SharePoint Framework Training - Developing with the SharePoint Framework: Leverage Microsoft Graph & third-party APIs
| Roles | Author(s) |
|---|---|
| Lab Manuals / Slides | Andrew Connell (Microsoft MVP, Voitanos) @andrewconnell |
| QA | Rob Windsor (Microsoft MVP) @rob-windsor |
| Sponsor / Support | Vesa Juvonen (Microsoft) @VesaJuvonen |
| Version | Date | Comments |
|---|---|---|
| 1.18 | June 14, 2024 | FY2024Q4 content refresh; update to SPFx v1.19 |
| 1.17 | May 5, 2023 | FY2023Q4 content refresh; update to SPFx v1.17.1 |
| 1.16 | February 27, 2023 | FY2023Q3 content refresh; update to SPFx v1.16.1 |
| 1.15 | December 5, 2022 | FY2023Q2 content refresh |
| 1.14 | September 5, 2022 | FY2023Q1 content refresh; update to SPFx v1.15.2 |
| 1.13 | May 2, 2022 | FY2022Q4 content refresh; update to SPFx v1.14 |
| 1.12 | March 7, 2022 | FY2022Q3 content refresh |
| 1.11 | December 8, 2021 | FY2022Q2 content refresh; retire local workbench |
| 1.10 | September 13, 2021 | FY2022Q1 content refresh |
| 1.9 | June 17, 2021 | FY2021Q4 content refresh |
| 1.8 | March 6, 2021 | FY2021Q3 content refresh |
| 1.7 | November 30, 2020 | FY2021Q2 content refresh |
| 1.6 | August 31, 2020 | FY2021Q1 content refresh |
| 1.5 | March 10, 2020 | FY2020Q3 content refresh & port module to MS Learn |
| 1.4 | December 6, 2019 | FY2020Q2 content refresh |
| 1.3 | September 2, 2019 | FY2020Q1 content refresh |
| 1.2 | March 11, 2019 | FY2019Q3 content refresh |
| 1.1 | January 17, 2019 | Slide updates, added screencast link to readme |
| 1.0 | December 17, 2018 | Initial release |
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.
When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.