permissions azure-active-directory microsoft-graph-api sharepoint-online spfx

403(Forbidden) Invalid permission error in my SPFx web part when trying to access SharePointSiteUsageDetail with MSGraph

I can GET data from this url in Graph Explorer,but when I try in my SPFx solution it gives me an 403(Forbidden) error:

https://graph.microsoft.com/beta/reports/getSharePointSiteUsageDetail(period='D30')?$format=application/json

Error: enter image description here

In the package-solution.json file,I set these permissions:

"webApiPermissionRequests": [                                
      {"resource": "Microsoft Graph","scope":"User.ReadBasic.All"},
      {"resource": "Microsoft Graph","scope": "sites.Read.All"},
      {"resource": "Microsoft Graph","scope": "Reports.Read.All"}]

the code fetching data with MS Graph:

public GetUsageData = (): void => {
    this.props.context.msGraphClientFactory
      .getClient()
      .then((msGraphClient: MSGraphClient) => {
        const period = 7;
        msGraphClient
          .api(
            "reports/getSharePointSiteUsagePages(period='D" +
              period +
              "')?$format=application/json"
          )
          .version("v1.0")
          .get((err, report: any, res: any) => {
            if (err) {
              console.log("Error occured from usage", err);
            }
            console.log("Error occured usage data", err);
            console.log("Response usage data", res);
            res.value.map((result) => {
              this.allUsage.push({
                storageUsedInBytes: result.storageUsedInBytes,
                storageAllocatedInBytes: result.storageAllocatedInBytes,
              });
            });
            this.setState({ usageDataState: this.allUsage });
          });
      });

I have set the required Report.Read.All permission to "SharePoint Online Client Extensibility Web Application Principal": enter image description here

I approved the permissions in my sharePoint admin center:enter image description here

Solution

Office 365 usage reports are protected by both permissions and azure ad roles and supports two types of authorization including user delegated.
Reports.Read.All delegated permission is required when you sign in with work or school account to > getSharePointSiteUsageDetail .Then the user consent is also needed along with admin consent ,where user must have one of the following roles:

Company Administrator, Exchange Administrator, SharePoint Administrator, Lync Administrator, Teams Service Administrator, Teams Communications Administrator, Global Reader, Usage Summary Reports Reader, or Reports Reader. The Global Reader and Usage Summary Reports Reader roles will only have access to tenant-level data, without visibility into detailed metrics., To consent on behalf of user, you need to have

i.e; the user must be a member of an Azure AD limited administrator role.

MSGraphClient uses implicit authentication access token. Check the access token after Decoding in https://jwt.ms .It may not have had the "wids" claim ( which Denotes the tenant-wide roles assigned to this user, through the groupMembershipClaims property of the application manifest. ).This claim which lists which Azure AD roles are assigned to the delegated user .And so , if not present states it doesn’t have permissions.

Work around:

The permissions requested in the SPFx package need to be granted by a SharePoint Admin explicitly. Even the ones which do not need an admin consent . This is so that all permission scopes allowed to be consumed from SPFx customisations have to go through Admin approval. So Admin must grant the permissions again.

By default if no permissions are granted, the only available permissions scope is user_impersonation which allows you to get limited information from the Graph.

Please refer these links for more details: