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

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:
I created a new Teams app from "SSO-enabled tab" sample with Teams Toolkit on Visual Studio Code.
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();
}, []);
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:
Create new project from "SSO-enabled tab" template.
Choose "Azure Functions" in "Add features" with default name.
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;
Configure "User.Read.All" permission and grant admin consent on AAD portal.
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.

Answer 2

What you're trying to do is insecure, because you have code running as Application level security, but running on the client side. Code running with that kind of privilege should only be running on the server side, or in this case behind a protected API (e.g. one that it validating the user's security using SSO to ensure the user is valid, and then executing on the server).
This video gives a bit of an idea of how it should be working: https://www.youtube.com/watch?v=kruUnaZgQaY
In the video, they're actually doing a token -exchange- (exchanging from the pure client side SSO token, and getting an "on behalf of" token in the backend, and making the call then). You can skip that part and just use the application token, but you should, as I mentioned, have this occurring in the server, not on the client.