Forum Discussion
How to call microsoft graph api inside my web app?
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?
Nivedipa-MSFT
Microsoft
MicrosoftSadPython - Thanks for reporting your issue.
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.
-
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("<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.
- Nivedipa-MSFT
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
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.
-
