how to invoke graphi api data in angular directly with code just we can do in asp we api so easy?

Question

I want to use a graphapi provided by organization in angular to read data , but why do i need msal instead cant i use direct code? just like we can do in asp.net core web api

Answer 1

You could because graph API is just a REST API and therefore is callable from anything that can make HTTP calls, including Angular. However from a security standpoint this is probably going to be a bad idea unless you're using implicit flow or authorization code flow such that the angular app is making calls as the user actually running the app. In order to use the API you have to authenticate and, except for the current user, you'll need credentials. Using app credentials or a service account won't work as you'd need to pass the credential information to the Angular app so it could then make a call to the API directly. If you pass credentials to the client then nothing prevents someone from capturing that information and reusing it elsewhere. It is a security hole.

If you are using implicit flow/authorization code then the user is going to get an "approval" prompt to use their credentials and then you can use the authentication from the client app directly. Refer to the OAuth page for information on when to use each flow.

The downside is that Javascript-based HTTP isn't as neat as server side so you'll end up probably writing a bunch more code to get it to work correctly. However MS has some sample information to help you out here.

Answer 2

Hello Singh, Nidhish (Cognizant)

In the context of an Angular application, you can use the Microsoft Authentication Library (MSAL) for Angular to authenticate users and request the tokens that are used to access the Microsoft Graph API.

The reason you need MSAL (Microsoft Authentication Library) is because the Graph API requires a valid access token from Azure Active Directory (Azure AD). MSAL is a library designed to help you obtain the necessary access tokens.

In ASP.NET Core Web API, you might be using a server-side flow to obtain tokens, which might seem more straightforward.

However, in a client-side application like Angular, you need to use a different flow (like the implicit flow or authorization code flow with PKCE) to obtain tokens securely.

Here’s a basic example of how you can use MSAL with Angular to access the Graph API:

import { MsalService } from '@azure/msal-angular';
import { Client } from '@microsoft/microsoft-graph-client';

...

constructor(private authService: MsalService) { }

...

async callGraphApi() {
  const accessToken = await this.authService.acquireTokenSilent({
    scopes: ['user.read']
  });

  const client = Client.init({
    authProvider: (done) => {
      done(null, accessToken);
    }
  });

  const res = await client.api('/me').get();
  console.log(res);
}

In this example, acquireTokenSilent is used to get an access token for the Graph API, and then the Microsoft Graph client library is used to make a request to the Graph API.

Remember to replace 'user.read' with the actual scopes required by your Graph API endpoint. Also, handle the errors appropriately in your production code.

Please note that you need to configure MSAL appropriately with your Azure AD details and handle the authentication callbacks in your Angular application. You can refer to the MSAL Angular documentation for more details.