Angular & Microsoft Login – Using Microsoft Authentication Library (MSAL)

Microsoft Authentication Library (MSAL) is a powerful library that provides the capability to integrate Microsoft login into Angular applications. With MSAL, developers can easily implement secure authentication using Microsoft accounts and access various Microsoft services and APIs.

Setting up MSAL in Angular

The first step is to install the MSAL library in your Angular project. Open a terminal and navigate to the root folder of your project. Run the following command to install MSAL:

npm install @azure/msal-angular

Once the installation is complete, you need to configure MSAL in your Angular application. Open the app.module.ts file and import the required modules:

import { MsalModule, MsalInterceptor } from '@azure/msal-angular';

After importing the modules, add the following code to the imports array:

MsalModule.forRoot({
auth: {
clientId: 'YOUR_CLIENT_ID',
authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
redirectUri: 'http://localhost:4200',
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: false,
},
})

Make sure to replace YOUR_CLIENT_ID with your actual client ID and YOUR_TENANT_ID with your tenant ID. The authority parameter should be set to the Microsoft Azure AD authority URL.

Adding Microsoft Login Button

To add a Microsoft login button to your Angular application, create a component and add the following HTML code:

<button (click)="login()">Microsoft Login</button>

In the component’s TypeScript file, import the AuthService from the MSAL library and inject it into the constructor:

import { AuthService } from '@azure/msal-angular';

Then, add the following code to the component’s class:

constructor(private authService: AuthService) {}

login() {
this.authService.loginPopup().subscribe((response) => {
// Handle the response after successful login
});
}

The login() function triggers the Microsoft login popup. It returns an Observable that you can subscribe to and handle the response after a successful login.

Accessing Microsoft Services and APIs

Once the user is logged in, you can use MSAL to access various Microsoft services and APIs. MSAL provides methods to acquire access tokens for different resources. For example, to access the Microsoft Graph API, you can use the following code:

this.authService.acquireTokenSilent({ scopes: ['https://graph.microsoft.com/.default'] }).subscribe((tokenResponse) => {
// Use the access token to make API requests
// For example, call the Microsoft Graph API
this.http.get('https://graph.microsoft.com/v1.0/me', {
headers: {
Authorization: 'Bearer ' + tokenResponse.accessToken
}
}).subscribe((response) => {
// Handle the API response
});
});

The acquireTokenSilent() method is used to acquire an access token silently without showing any prompts to the user. The scopes parameter determines the resources and permissions required by your application.

Conclusion

By integrating MSAL into your Angular application, you can easily implement secure Microsoft login and access various Microsoft services and APIs. With MSAL, authentication becomes a breeze, and you can focus on building your application’s core functionality.