Using Microsoft Graph with SPFx solutions

Using Microsoft Graph with SPFx solutions

SharePoint Framework (SPFx) is an extensibility model for Microsoft 365 enabling developers to build different kinds of extensibility for Microsoft Viva, Microsoft Teams, Outlook, Microsoft 365 app (Office), and SharePoint. SPFx has multiple benefits like automatic Single Sign On, automatic hosting in the customer tenant, reuse same code across the service and industry standard web stack tooling.

  • I need to access user and organization specific information in Microsoft 365 - how would I do that within SPFx solution?
  • That is a great question. You’d be of course using the Microsoft Graph which is the gateway to data and intelligence in Microsoft 365.

This blog post is part of a month long SPFx series for January 2023. Each business day we’ll publish a new blog post covering different aspects of the SPFx.

Introduction on using Microsoft Graph APIs with SPFx

Microsoft Graph APIs provides you an easy way to access the user or organizational information within Microsoft 365. SPFx has a great abstraction layer for using the Microsoft Graph, including simplified development experience with following benefits:

  • Automatic Single Sign-On when using Microsoft Graph APIs
  • Automatic handling of access token - developers will not need to worry about where to get the token(s) for the API calls
  • Centralized approval for Microsoft 365 tenant administrators on which Graph APIs are available for SPFx solutions
  • Native access to Microsoft Graph v3 JavaScript SDK with the benefits with improved exception handling for throttling etc.

Using Microsoft Graph APIs with SPFx solution is easy and the recommended option to access the Microsoft 365 information. Process of using the Microsoft Graph APIs is as follows for any new solution which is getting deployed.

  1. Define the used Graph APIs in SPFx solution in solution manifest (package-solution.json)
  2. Deploy SPFx solution to tenant app catalog as the administrator
  3. Grant permissions for the used APIs - API calls will be blocked unless the APIs are specifically allowed by administrator. This is a security feature to avoid any accidental access on unnecessary information.

See following resources for the official documentation on how to use Microsoft Graph with SPFx solutions

Here’s a bit outdated video on using Microsoft Graph APIs with the SPFx solution - User interface elements have evolved a bit, but the basic steps are still exactly the same.

Frequent questions around using Microsoft Graph with SPFx solutions

Can code access any Microsoft Graph APIs without administrative approval?

No. All Microsoft Graph APIs are by default blocked for the SPFx solutions in the tenant, so administrator will need to specifically enable the allowed APIs. This provides a bit complexity for the deployment, but model exists to provide required level of security within customer tenants.

Can I use PowerShell to grant the permission request

Yes. This is an option if you are an administrator within the tenant. You can use either the user interface or script the required steps. You cannot approve the permissions unless you have sufficient permissions at the tenant level using PowerShell.

When I grant API permissions, will those be granted for all SPFx solutions?

By default yes. Model works in a way that by default administrators are granting the allowed API permissions to all SPFx solutions. You can however do this also in the solution-by-solution level if that’s the preferred model.

What if I’m using Microsoft Graph Toolkit - is the process different?

No. Process is not different when you’d be using Microsoft Graph Toolkit. Same API level approvals are still needed for the Microsoft Graph API calls to succeed. We will cover the Microsoft Graph Toolkit option more detailed later in this blog post series.

References

Here are some initial references to get started with the SPFx in your development. Please do provide us with feedback and suggestions on what is needed to help you to get started with the SPFx development for Microsoft 365.

We will provide more details on the different options and future direction of the SPFx in upcoming blog posts. This post focused on the getting started steps with SPFx - more details coming up with this series with one post within each business day of January 2023.