Using Microsoft Graph API without user (Application Identity) on Teams Custom App

Question

I've been developing a Teams Custom App with the TeamsFx SDK. I want to use the Microsoft Graph API using an Application identity. So, I referred to the Microsoft official documentation, however I wasn't able to achieve what I wanted to do.

　- Referred document: https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/teamsfx-sdk. Under "Create MicrosoftGraphClient service", "Invoke Graph API without user (Application Identity)" section.

I tried the following:

1. I created a new Teams app from "SSO-enabled tab" sample with Teams Toolkit on Visual Studio Code.
2. I edited a Graph.jsx as below to get a user info.

import { createMicrosoftGraphClient, IdentityType, TeamsFx } from "@microsoft/teamsfx";
useEffect(() => {
    const getProfile = async () => {
        const teamsfx = new TeamsFx(IdentityType.App);
        const graphClient = createMicrosoftGraphClient(teamsfx);
        const profile = await graphClient.api("/users/username@domain.onmicrosoft.com").get();
        return profile;
    };
    const profile = getProfile();
}, []);

3. I debugged the project by hitting the F5 key in Visual Studio Code.

Although I tried what the document said, the console log said "Application identity is not supported in TeamsFx".

How should do I edit my projec to use Microsoft Graph API without a user identity (i.e. using Application Identity)?

Answer 1

Application Identity is not supported in browser (Tab page), so you need a server environment to use it.

You could add an Azure Function and use the Application Identity in it to achieve desired effect. Here's the steps in Teams Toolkit v4.0.1:

1. Create new project from "SSO-enabled tab" template.
2. Choose "Azure Functions" in "Add features" with default name.
3. Modify the code in "api/getUserProfile/index.ts".

teamsfx = new TeamsFx(IdentityType.App);
...
const graphClient: Client = createMicrosoftGraphClient(teamsfx, [".default"]);
const profile: any = await graphClient.api("/users/username@domain.onmicrosoft.com").get();
res.body.graphClientMessage = profile;

4. Configure "User.Read.All" permission and grant admin consent on AAD portal.
5. Run "F5" and click "Call Azure Function" on tab page, the Azure Function will be invoked and get Graph data using Application Identity. You should see the user information below.