How to call microsoft graph api inside my web app?

Copper Contributor

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? 

3 Replies

@SadPython - Thanks for reporting your issue. 

To call the Microsoft Graph API inside your web app, you can follow these steps:

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

  2. 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);
  1. 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("<GRAPH_API_PATH>").get();
    // Parse the graphApiResult into a Model you defined, used by the front-end.
} catch (e) {
    // Handle any errors
}

Thanks, 

Nivedipa

------------------------------------------------------------------------------------------ 

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. 

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.

@SadPython -

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

  1. 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.
  2. Configure Permissions:

    • In the app registration, navigate to "API permissions."
    • Add the necessary Microsoft Graph permissions that your app requires, such as User.Read.
    • If admin consent is required for the permissions, you'll need to request that from the tenant admin.
  3. 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.
  4. Use the Access Token:

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

Ref Doc: Quickstart: Register an app in the Microsoft identity platform - Microsoft identity platform | Micro...