Application permission for React TeamsFx Tab App

Question

Hello,

I have a project in which I am developing a Microsoft Teams app in React using TeamsFx and Graph API. The users of the app will be able to edit information of other AD users. Because the users of the app don't have the required permissions I cannot use delegated permissions, so I have to use application permissions.

I have tried using createMicrosoftGraphClient with TeamsUserCredential but the token is rejected with the error: "The user or administrator has not consented to use the application with ID 'xyz' named 'abc'. Send an interactive authorization request for this user and resource"

I have granted all the API permissions for the app in Azure.

This is how permission.json file looks:

[  
    {  
        "resource": "Microsoft Graph",  
        "delegated": [],  
        "application": [  
            "User.ReadWrite.All",  
            "Sites.ReadWrite.All",  
            "Domain.ReadWrite.All",  
            "Directory.ReadWrite.All",  
            "TeamMember.ReadWrite.All",  
            "TeamSettings.ReadWrite.All"  
        ]  
    }  
]  

Does TeamsFx provide a way to get a Graph API authentication token for a Teams tab application that has permissions specified in permission.json file under application?

Answer 1

We discussed this with the engineering team and got the below reply -

The permission is granted to the application instead of user. So we should use application identity to get the token to call graph API instead of user. Here is the link to use application credential https://github.com/OfficeDev/TeamsFx/tree/main/packages/sdk#invoke-graph-api-without-user-application-identity . One thing needs to be noticed is since we are using application credential, the token could not be got from front end. There should be an backend service to store the app credential and use the credential to exchange token.

FYI - Could you please post the Teams toolkit or teamfx questions on https://github.com/OfficeDev/TeamsFx/issues