harePoint Framework Webinar Series: Consume Graph APIs in SharePoint Framework
Download as PPTX, PDF0 likes112 views
The document outlines a webinar series focused on getting started with the SharePoint Framework (SPFx), including an overview of Microsoft Graph, API permissions, and isolated web parts. It details how to consume Microsoft Graph using AADHttpClient and MSGraphClient objects, along with security considerations for accessing APIs secured with Azure AD. The content also includes practical examples, references, and future topics for development related to Microsoft Teams customization with SPFx.
![Webinar Series: Getting Started with SharePoint Framework
API Permissions
To consume Microsoft Graph or any other third-party REST API, you need to explicitly declare the permission requirements from an
OAuth perspective in the manifest of your solution.
In the SharePoint Framework v.1.4.1 or later, you can do that by configuring the webApiPermissionRequests property in the
package-solution.json under the config folder of the solution.
Microsoft Graph permission names follow a simple pattern: resource.operation.constraint..Read grants permission to read the
profile of the signed-in user.
User.ReadWrite grants permission to read and modify the profile of the signed-in user and
Mail.Send grants permission to send mail on behalf of the signed-in user.
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "User.ReadBasic.All"
}
]
https://docs.microsoft.com/en-us/graph/api/resources/team?view=graph-rest-1.0](https://image.slidesharecdn.com/spfx-webinar-consumegraphapisinspfx-jenkinsns-200429144400/85/harePoint-Framework-Webinar-Series-Consume-Graph-APIs-in-SharePoint-Framework-13-320.jpg)
harePoint Framework Webinar Series: Consume Graph APIs in SharePoint Framework
- 1. Webinar Series: Getting Started with SharePoint Framework Getting Started with SharePoint Framework Webinar Series
- 2. Webinar Series: Getting Started with SharePoint Framework Consume Graph APIs in SharePoint Framework
- 3. Webinar Series: Getting Started with SharePoint Framework Jenkins NS Modern Workplace Solution Architect | Consultant Founder & Director @ Microsoft Teams, Power Platform and SPFx Specialist International Speaker | Blogger | Trainer SPS Bangalore Organizer aOS Ambassador @jenkinsns https://www.facebook.com/msteamsinfo in/jenkinsns jenkinsns@gmail.com http://www.jenkinsblogs.com jenkinsns https://www.facebook.com/spfxinfo/
- 4. Webinar Series: Getting Started with SharePoint Framework Agenda Overview of MS Graph Office 365 APIs What is Graph API? Consume Microsoft Graph AadHttpClient object MSGraphClient object API permissions requests Isolated web parts Demo
- 5. Webinar Series: Getting Started with SharePoint Framework Office 356 APIs Service Functionality Base URL Azure AD Graph User, Groups Application, Devices https://graph.windows.net Exchange Online Mail, Calendar, Contacts https://outlook.office365.com/api SharePoint Online List, Libraries, Search, User Profiles https://tenant.sharepoint.com/_api OneDrive for Business Files, Folders https://tenant-my.sharepoint.com/_api OneNote Notebooks,Pages https://onenote.com/api Yammer Conversations https://yammer.com/api Stream Videos, Channels https://tenant.sharepoint.com/portals
- 6. Webinar Series: Getting Started with SharePoint Framework STANDALONE WEB, DEVICE, AND SERVICE APPS EXTENSIONS EMBEDDED CANVASES Microsoft Graph External Data & Content Conversation are Core to the Office 365 Platform
- 7. Webinar Series: Getting Started with SharePoint Framework Overview of Microsoft Graph
- 8. Webinar Series: Getting Started with SharePoint Framework What is Graph API? Microsoft Graph exposes REST APIs and client libraries to access data on the following Microsoft 365 services: Office 365 services: Delve, Excel, Microsoft Bookings, Microsoft Teams, OneDrive, OneNote, Outlook/Exchange, Planner, and SharePoint Enterprise Mobility and Security services: Advanced Threat Analytics, Advanced Threat Protection, Azure Active Directory, Identity Manager, and Intune Windows 10 services: activities, devices, notifications Dynamics 365 Business Central
- 9. Webinar Series: Getting Started with SharePoint Framework SharePointGroups Microsoft Graph Access user, group and organizational data One endpoint One token All users Your App https://graph.microsoft.com #SPTechCon Users Azure ADOutlook OneNote Planner Teams Excel Intune More…
- 10. Webinar Series: Getting Started with SharePoint Framework Consume Microsoft Graph You can now implement the below methods to consume the Microsoft Graph. You have two options: 1. Use the AadHttpClient client object 2. Use the MSGraphClient client object SharePoint Framework v1.6.0 onwards supported consuming the MS Graph APIs and custom APIs. Note: SharePoint Framework v1.4.1 beta onwards MS Graph APIs supported. You can consume the Microsoft Graph API with versions of SharePoint Framework earlier than v.1.4.1, either via the native graphHttpClient, or via a manual ADAL JS implicit OAuth flow.
- 11. Webinar Series: Getting Started with SharePoint Framework AadHttpClient AadHttpClient The AadHttpClient client object is useful for consuming any REST API. You can use it to consume Microsoft Graph or any other third-party (or first-party) REST API and “AadHttpClient” is used to perform REST calls against an Azure AD Application, for example 3rd party WebAPI hosted in Azure. For communicating with SharePoint, use the “SPHttpClient” class instead. For communicating SharePoint with Microsoft Graph, use the MSGraphClient class. this.props.context.aadHttpClientFactory .getClient('https://graph.microsoft.com’) .then((client: AadHttpClient) => { // Search for the users with givenName, surname, or displayName equal to the searchFor value return client .get( `https://graph.microsoft.com/v1.0/users?$select=displayName,mail,userPrincipalName&$filter=(givenName%20eq%20'${escape(this.state.searchFor)}')%20or%20(sur name%20eq%20'${escape(this.state.searchFor)}')%20or%20(displayName%20eq%20'${escape(this.state.searchFor)}')`, AadHttpClient.configurations.v1 ); }) .then(response => { return response.json(); })
- 12. Webinar Series: Getting Started with SharePoint Framework MSGraphClient object MSGraphClient “MSGraphClient” is used to perform REST calls against Microsoft Graph. The Microsoft Graph JavaScript client library is a lightweight wrapper around the Microsoft Graph API. This class allows developers to start making REST calls to MSGraph without needing to initialize the MSGraph client library. The MSGraphClient client object can consume the Microsoft Graph only. Internally it uses the AadHttpClient client object and supports the fluent syntax of the Microsoft Graph SDK. Supported from SPFx v1.4.1 (Initial beta release of MSGraphClient class) MSGraphClient is a new HTTP client introduced in SharePoint Framework v1.6.0 this.props.context.msGraphClientFactory .getClient() .then((client: MSGraphClient): void => { // From https://github.com/microsoftgraph/msgraph-sdk-javascript sample client .api("users") .version("v1.0") .select("displayName,mail,userPrincipalName") .filter(`(givenName eq '${escape(this.state.searchFor)}') or (surname eq '${escape(this.state.searchFor)}') or (displayName eq '${escape(this.state.searchFor)}')`) .get((err, res) => { if (err) { console.error(err); return; }
- 13. Webinar Series: Getting Started with SharePoint Framework API Permissions To consume Microsoft Graph or any other third-party REST API, you need to explicitly declare the permission requirements from an OAuth perspective in the manifest of your solution. In the SharePoint Framework v.1.4.1 or later, you can do that by configuring the webApiPermissionRequests property in the package-solution.json under the config folder of the solution. Microsoft Graph permission names follow a simple pattern: resource.operation.constraint..Read grants permission to read the profile of the signed-in user. User.ReadWrite grants permission to read and modify the profile of the signed-in user and Mail.Send grants permission to send mail on behalf of the signed-in user. "webApiPermissionRequests": [ { "resource": "Microsoft Graph", "scope": "User.ReadBasic.All" } ] https://docs.microsoft.com/en-us/graph/api/resources/team?view=graph-rest-1.0
- 14. Webinar Series: Getting Started with SharePoint Framework API access
- 15. Webinar Series: Getting Started with SharePoint Framework Isolated Webparts
- 16. Webinar Series: Getting Started with SharePoint Framework Why Isolated web parts? To allow your SharePoint Framework solutions to securely access APIs secured with Azure AD, you can use the API management to specify which APIs can be accessed by scripts in your tenant and with which permissions. Using the SharePoint Framework, you can easily retrieve an access token for the specific API. While it significantly simplifies communicating with APIs secured with Azure AD, it allows all scripts, not just specific SharePoint Framework solutions, to obtain an access token for any of the approved APIs. If one of the scripts you use in your tenant was exploited, then it could access any of the approved APIs on behalf of the current user. SharePoint Framework v1.8.0 onwards has addressed this situation by introducing isolated web parts Isolated web parts introduce a new way to isolate access to APIs secured with Azure AD and ensure that only specific SharePoint Framework web parts are allowed to obtain an access token for the particular API. If your web part requires permission to access any backend API or Graph, it is strongly recommended to have the web part isolated. We should protect the access token which is used behind the scenes and make sure that no other script on the page will piggy-back the permissions we are using. Isolated web part is one step towards handling security concerns.
- 17. Webinar Series: Getting Started with SharePoint Framework Isolated web parts
- 18. Webinar Series: Getting Started with SharePoint Framework Isolated web parts benefits Web parts from an isolated SPFx package run on a unique domain, hosted within an iFrame - the permissions granted apply only to code hosted on that domain. Regular SPFx web parts run on your *.sharepoint.com domain, the granted permissions do not apply there. And since any other SPFx isolated web parts run on a different unique domain, they don't apply there either. Essentially, the shared application principal for SPFx is not used – instead, an AAD app registration dedicated to this SPFx solution is created and used for authentication. Note this scope isn’t the individual web part, but the containing solution package. This is fine however - if you have an untrusted source contributing code to the very same solution/codebase, then you probably have bigger security and governance challenges to deal with quite frankly. In the ‘config/package-solution.json’ file, set the isDomainIsolated property to true. "isDomainIsolated": true
- 19. Webinar Series: Getting Started with SharePoint Framework Demo SharePoint Framework https://github.com/jenkinsns/spfx-demo-webparts Download the code
- 20. Webinar Series: Getting Started with SharePoint Framework References… http://jenkinsblogs.com/2020/04/29/retrieve-sharepoint-list-items-using-microsoft-graph-api-for-spfx/ https://developer.microsoft.com/en-us/graph/graph-explorer# https://docs.microsoft.com/en-us/graph/api/user-get?view=graph-rest-1.0&tabs=http https://docs.microsoft.com/en-us/graph/permissions-reference https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-msgraph https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aad-tutorial https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/isolated-web-parts
- 21. Webinar Series: Getting Started with SharePoint Framework Thank You
- 22. Webinar Series: Getting Started with SharePoint Framework Next up… Build Microsoft Teams customizations with SPFx Kirti Prajapati
Editor's Notes
- #14: https://docs.microsoft.com/en-us/graph/api/resources/team?view=graph-rest-1.0 https://developer.microsoft.com/en-us/graph/graph-explorer# https://docs.microsoft.com/en-us/graph/permissions-reference