Microsoft Tech Community Live:  Microsoft Teams Edition
November 09, 2021, 08:00 AM - 12:00 PM (PST)

Teams personal app SPFx Graph Request Error 403

%3CLINGO-SUB%20id%3D%22lingo-sub-1844219%22%20slang%3D%22en-US%22%3ETeams%20personal%20app%20SPFx%20Graph%20Request%20Error%20403%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1844219%22%20slang%3D%22en-US%22%3E%3CP%3EI%C2%B4ve%20built%20an%20SPFx%20Webpart%2C%20which%20requests%20a%20SharePoint%20list%20via%20the%20Microsoft%20Graph.%20It%20works%20fine%20in%20both%20SharePoint%20and%20as%20a%20Microsoft%20Teams%20Tab.%20However%2C%20when%20I%20try%20to%20run%20it%20in%20Teams%20as%20a%20personal%20App%2C%20I%20always%20get%20an%20error%20403%20forbidden.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAs%20a%20debug%20measure%2C%20I%20followed%20a%20Microsoft%20tutorial%20on%20making%20a%20simple%20graph%20call%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fde-de%2Fsharepoint%2Fdev%2Fspfx%2Fuse-msgraph%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fde-de%2Fsharepoint%2Fdev%2Fspfx%2Fuse-msgraph%3C%2FA%3E.%20After%20trying%20the%20webpart%20in%20both%20SharePoint%20and%20Teams%20again%2C%20I%20ran%20into%20the%20same%20issue.%20It%20works%20both%20in%20SharePoint%20and%20as%20a%20Teams%20tab%2C%20but%20not%20as%20a%20Teams%20personal%20app.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Epublic%20render()%3A%20void%20%7B%0Athis.context.msGraphClientFactory%0A%20%20.getClient()%0A%20%20.then((client%3A%20MSGraphClient)%3A%20void%20%3D%26gt%3B%20%7B%0A%20%20%20%20%2F%2F%20use%20MSGraphClient%20here%0A%20%20%20%20%2F%2F%20get%20information%20about%20the%20current%20user%20from%20the%20Microsoft%20Graph%0A%20%20%20%20client%0A%20%20%20%20%20%20.api('%2Fme')%0A%20%20%20%20%20%20.get((error%2C%20user%3A%20MicrosoftGraph.User%2C%20rawResponse%3F%3A%20any)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20console.log(user)%3B%0A%0A%20%20%20%20%20%20%20%20this.domElement.innerHTML%20%3D%20%60%0A%20%20%20%20%20%20%20%20%20%20%3CDIV%20class%3D%22%24%7Bstyles.container%7D%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CH2%20id%3D%22toc-hId--1212247064%22%20id%3D%22toc-hId--1212247064%22%20id%3D%22toc-hId--1212247064%22%20id%3D%22toc-hId--1212247064%22%20id%3D%22toc-hId--1212247064%22%3E%24%7Buser.displayName%7D%3C%2FH2%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FDIV%3E%0A%20%20%20%20%20%20%20%20%60%3B%0A%0A%20%20%20%20%20%20%20%20if(error)%20%7B%0A%20%20%20%20%20%20%20%20%20%20console.log(%22Error%3A%20%22)%3B%0A%20%20%20%20%20%20%20%20%20%20console.log(error)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%7D)%3B%0A%20%20%7D)%3B%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAs%20the%20last%20test%2C%20I%20downloaded%20an%20already%20made%20and%20functioning%20project%20which%20requests%20data%20via%20the%20Microsoft%20Graph%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-teams-personal-app-settings%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-teams-personal-app-settings%3C%2FA%3E%2C%20and%20it%20returned%20the%20same%20error.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAdditionally%2C%20the%20global%20admins%20in%20our%20tenant%20have%20no%20issue%20using%20these%20apps%20as%20a%20Microsoft%20Teams%20personal%20App.%20The%20problem%20only%20occurs%20for%20standard%20users.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDoes%20anyone%20know%20why%20this%20web%20part%20won't%20work%20as%20a%20personal%20app%20but%20anywhere%20else%2C%20and%20also%20how%20to%20fix%20this%20issue%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1844219%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAdministrator%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1847897%22%20slang%3D%22en-US%22%3ERe%3A%20Teams%20personal%20app%20SPFx%20Graph%20Request%20Error%20403%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1847897%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F851552%22%20target%3D%22_blank%22%3E%40jblConsult%3C%2FA%3E%26nbsp%3B%2C%20I%20believe%20you%20are%20facing%20permission%20issue%2C%20Could%20you%20please%20check%20if%20your%20tenant%20administrator%20has%20granted%20the%20permissions%26nbsp%3B%3CSPAN%3ESites.Read.All%2C%20Sites.ReadWrite.All%20at%20admin%20level%3F%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1860063%22%20slang%3D%22en-US%22%3ERe%3A%20Teams%20personal%20app%20SPFx%20Graph%20Request%20Error%20403%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1860063%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F851552%22%20target%3D%22_blank%22%3E%40jblConsult%3C%2FA%3E%26nbsp%3B%2C%20You%20need%20to%20do%20sync%20with%20Team%20in%20your%20sharepoint%20app%20catalog%20to%20see%20the%20tab%20in%20your%20personal%20scope.%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

I´ve built an SPFx Webpart, which requests a SharePoint list via the Microsoft Graph. It works fine in both SharePoint and as a Microsoft Teams Tab. However, when I try to run it in Teams as a personal App, I always get an error 403 forbidden.

 

As a debug measure, I followed a Microsoft tutorial on making a simple graph call https://docs.microsoft.com/de-de/sharepoint/dev/spfx/use-msgraph. After trying the webpart in both SharePoint and Teams again, I ran into the same issue. It works both in SharePoint and as a Teams tab, but not as a Teams personal app.

 

 

public render(): void {
this.context.msGraphClientFactory
  .getClient()
  .then((client: MSGraphClient): void => {
    // use MSGraphClient here
    // get information about the current user from the Microsoft Graph
    client
      .api('/me')
      .get((error, user: MicrosoftGraph.User, rawResponse?: any) => {
        console.log(user);

        this.domElement.innerHTML = `
          <div class=${styles.container}>
            <h2>${user.displayName}</h2>
          </div>
        `;

        if(error) {
          console.log("Error: ");
          console.log(error);
        }

    });
  });
}

 

 

As the last test, I downloaded an already made and functioning project which requests data via the Microsoft Graph https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-teams-personal-app-settings, and it returned the same error.

 

Additionally, the global admins in our tenant have no issue using these apps as a Microsoft Teams personal App. The problem only occurs for standard users.

 

Does anyone know why this web part won't work as a personal app but anywhere else, and also how to fix this issue?

4 Replies

@jblConsult , I believe you are facing permission issue, Could you please check if your tenant administrator has granted the permissions Sites.Read.All, Sites.ReadWrite.All at admin level?

Thank you for the reply @Trinetra-MSFT
Well, the global admins already granted the required permissions, and the apps are already working in SharePoint and as Teams tabs, but sadly still not as Teams personal apps.
 

@jblConsult , You need to do sync with Team in your sharepoint app catalog to see the tab in your personal scope.

@Trinetra-MSFT 

Well, an admin synced the solution via the sync-to-teams button to teams, but we still get the same error.
Also, funny enough, an admin granted the permissions again, and now it works in the web client as a personal app as well but not in the desktop client as a personal app...

Do you have any other idea why this isn't working?