How to call microsoft graph api inside my web app?

Question

I have a web app embedded in MS Teams. I'm trying to figure out how to call the MS Graph API in my JS code to get user information. How can I do that?&nbsp;

nivedipa-msft · Answer

SadPython - Thanks for reporting your issue.&nbsp;
To call the Microsoft Graph API inside your web app, you can follow these steps:

You need to obtain the name of the permission scope associated with the Graph API you intend to invoke.&nbsp;

Create a Graph client by adding the scope related to the Graph API you want to call. Here is an example code snippet in TypeScript:

let credential: TeamsUserCredential;
credential = TeamsUserCredentialContext.getInstance().getCredential();
const graphClient: Client = createMicrosoftGraphClientWithCredential(credential, scope);

Finally, call the Graph API and parse the response into a certain model. Here is an example code snippet:

try {
    const graphApiResult = await graphClient.api("&lt;GRAPH_API_PATH&gt;").get();
    // Parse the graphApiResult into a Model you defined, used by the front-end.
} catch (e) {
    // Handle any errors
}

Thanks,&nbsp;
Nivedipa
------------------------------------------------------------------------------------------&nbsp;
If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.&nbsp;

sadpython · Answer

How do I do step 1? This is an external facing app and the user is logged into teams. When they install or open the tab, I want to prompt them that specific permissions are required and if they accept then my app grabs user information. All of the guides I see are using SSO but I can't manage SSO on my side and the client's side.

nivedipa-msft · Answer

SadPython&nbsp;-
To register an external facing app with Azure AD for Teams without using Single Sign-On (SSO), you can follow these general steps:

Register Your App in Azure AD:

Go to the Azure portal and navigate to the Azure Active Directory service.
Select "App registrations" and then "New registration."
Fill in the required details such as the name of your app and the redirect URI (the URL where your app will receive the authentication response).
Once registered, you will receive an Application (client) ID.

Configure Permissions:

In the app registration, navigate to "API permissions."
Add the necessary Microsoft Graph permissions that your app requires, such as&nbsp;User.Read.
If admin consent is required for the permissions, you'll need to request that from the tenant admin.

Prompt Users for Consent:

When users install or open the tab, you can prompt them for consent using the OAuth 2.0 authorization code flow.
Your app will redirect users to the Microsoft login page where they can consent to the permissions your app requires.
After consent, Azure AD will redirect back to your app with an authorization code, which you can exchange for an access token.

Use the Access Token:

With the access token, your app can call Microsoft Graph API to grab user information.

Ref Doc:&nbsp;Quickstart: Register an app in the Microsoft identity platform - Microsoft identity platform | Microsoft Learn

Forum Discussion

How to call microsoft graph api inside my web app?

Share

Resources