Image past times Jeremy Bishop at Unsplash
Phew.. that championship was a mouthful. When SPFx v1.4.1 was released the other day, the GraphHttpClient object inwards SPFx was deprecated inwards favor of either the AadHttpClient object or the MSGraphClient object. If all you lot attention almost is Microsoft Graph calls, together with thence they practise pretty much the same, except the MSGraphClient object allows a fluent API to ready upward your queries alongside selects, sorts together with filters, whereas the AadHttpClient takes a handcrafted URL.
So, from a minimal path perspective the AadHttpClient makes to a greater extent than feel equally it takes consummate URL’s, together with nosotros don’t own got to suspension upward the telephone band into a fluid syntax. Also, the MSGraphClient is currently inwards preview.
Note: If your tenant is non on Targeted Release (TR), you lot volition non hold out able to grant the needed graph scopes using the SharePoint Admin UI or alongside SPO Management PowerShell. Uploading the app bundle volition too non laissez passer on a normal tenant thence hold out patient.
Below is a code snippet which lists all groups inwards your tenant using the onetime graph client.
import { GraphHttpClient, GraphHttpClientResponse } from '@microsoft/sp-http'; // List all groups allow graphClient = this.context.graphHttpClient; allow response: GraphHttpClientResponse = hold back graphClient.get('v1.0/groups', GraphHttpClient.configurations.v1); // Check that the asking was successful if (response.ok) { provide hold back response.json(); } else { // Reject alongside the fault message allow fault = novel Error(response.statusText); throw error; }
And hither is the same code using AadHttpClient.
import { AadHttpClient, HttpClientResponse } from "@microsoft/sp-http"; const aadClient: AadHttpClient = novel AadHttpClient( this.context.serviceScope, "https://graph.microsoft.com" ); allow response: HttpClientResponse = hold back aadClient.get("https://graph.microsoft.com/v1.0/groups", AadHttpClient.configurations.v1); // Check that the asking was successful if (response.ok) { provide hold back response.json(); } else { // Reject alongside the fault message allow fault = novel Error(response.statusText); throw error; }
The primary departure beingness that at that topographic point is no existing illustration on the context object for the AadHttpClient, together with you lot transcend inwards the total URL to the Graph instead of only the path.
Once you lot own got re-written the code at that topographic point is i concluding slice to the puzzle. By default SPFx own got no graph access what thence ever, which way you lot take away to specify which scopes you lot take away access to together with grant access to them.
In package-solution.json you lot own got to add together a novel department describing what Microsoft Graph permissions you lot take away access to. If you lot read my post service on the onetime graph client you lot know that it “magically” included scopes for Groups together with Reports. To mimic the groups compass add together a department equally outlined below. And brand certain the resources cite is “Microsoft Graph”.
{ "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json", "solution": { "name": "Some solution", "id": "<id>", "version": "1.0.0.0", "includeClientSideAssets": true, "skipFeatureDeployment": false, "webApiPermissionRequests": [ { "resource": "Microsoft Graph", "scope": "Group.ReadWrite.All" } ] }, "paths": { "zippedPackage": "solution/pzl-some-solution.sppkg" } }
Make certain you lot larn into the compass precisely equally listed inwards the documentation equally at that topographic point is no validation on this. And add together i resource/scope department per compass – fifty-fifty if they are on the same resource.
If this is your get-go SharePoint Framework solution granting a detail scope, you lot take away to deploy the .sppkg file at to the lowest degree in i lawsuit earlier you lot tin bear witness your part/extension using the workbench. This is because a tenant admin own got to approve the scopes you lot take away at this detail tenant.
The below screenshot is from my enable Teams extension, where it prompts you lot to approve of the scopes from the Service Principal Permissions Management Page.
The management page for approving is available from the novel SharePoint Admin center, which is inwards preview from TR clients. Below you lot tin run across the compass for Microsoft Graph has been extracted from my app package. Once I approve this compass equally a tenant admin, together with thence whatever SPFx solution may purpose this compass from instantly on, without an explicit approval.
Also, if you lot later on revoke access to a resources together with scope, this volition touching on all SPFx solutions relying on this scope. To amount it up: resources compass grants are tenant scoped, non SPFx solution scoped. You tin read to a greater extent than almost this at https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient.
If everything went according to plan, you lot own got instantly moved off the deprecated graph api, together with you lot are using the novel one. If you lot would rather purpose MSGraphClient, banking concern check out the tutorial at https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aad-tutorial.
Summary
In gild to movement your Microsoft Graph calls over to the novel API released alongside SPFx v1.4.1 you lot take away to explicitly listing the permission scopes needed inwards package-solution.json, equally good equally own got a tenant admin grant access to those scopes in i lawsuit the sppkg own got been uploaded inwards your tenant.
It mightiness look similar to a greater extent than move for the developer, together with it is inwards a way, but organizations volition own got to a greater extent than command together with to a greater extent than flexibility of what Microsoft Graph API’s a SPFx solution tin call. Which equals to a greater extent than liberty together with to a greater extent than control. Good for devs, adept for information technology admins!
Thanks for reading : Minimal Path To Awesomeness When Moving Microsoft Graph Calls To Sharepoint Framework V1.4.1