Azure AD SSO in Angular Within 5 Minutes

In this blog, you will learn to build an Angular single-page application (SPA) that signs in users and calls the Microsoft Graph API and then does a REST API call to get all the subscriptions of the signed-in user and display it in a table.

• Download our sample Angular application
• Register an application in the Azure portal
• Update the app credentials in the downloaded Angular application
• Test the application

Angular Application — Flowchart

1. Download Our Sample Angular Application

Click here to download our sample Angular application. Open the application and run the below command to install the dependencies.

D:\the-bi3-sso-azure-ad-app> npm install

2. Register an Application in the Azure Portal

1. Go to Azure Portal > App Registrations

Register an App in Azure portal

2. After you’ve registered your application, you’ll see the application ID (or client ID) and directory ID (or tenant ID) under Overview

Copy Credentials

3. Next, on the API permissions page for your registered application, select Add a permission. Grant following permissions to your registered app

Provide API Permissions

By default, your app will have Microsoft Graph — User.Read permission. If it is not available then search and add it to the app.

Microsoft Graph API permission

Next, select Azure Service Management and add the user_impersonation permission

Microsoft Service Management — User Impersonation permission

4. Next, grant admin consent for these permissions by clicking Grant admin consent for your-domain-name

Grant Admin Consent

5. Next, configure implicit grant flow for your application

Implicit Grant flow

3. Update the Angular Application

Open the app.module.ts file in the downloaded application and update the application ID and tenant ID of your Azure App.

src\app\app.module.ts
...
clientID: "<replace-your-client-id>",
authority: "https://login.microsoftonline.com/<replace-your-tenant-id>",
...

4. Test the Application

Start the application by running the following command from the application folder.

D:\the-bi3-sso-azure-ad-app> ng serve

In your browser, open http://localhost:4200. You will see the login page

Angular application — Login Page

After logging in and providing consent for application access you will see the home page

Angular application — Home Page

The sample application created in this blog enables an Angular SPA to query the Microsoft Graph API or a web API that accepts tokens issued by the Microsoft identity platform. It uses the Microsoft Authentication Library (MSAL) for Angular, a wrapper of the core MSAL.js library. MSAL Angular enables Angular 6+ applications to authenticate enterprise users by using Azure Active Directory (Azure AD), and also users with Microsoft accounts and social identities like Facebook, Google, and LinkedIn. The library also enables applications to get access to Microsoft cloud services and Microsoft Graph. In this scenario, after a user signs in, an access token is requested and added to HTTP requests through the authorization header. Token acquisition and renewal are handled by MSAL.

Note: This blog helps you to build a basic Azure AD SSO application in Angular. For additional features, you can modify the application.

Reference Links :
https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-angular
https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent

About Us

Bi3 has been recognized for being one of the fastest-growing companies in Australia. Our team has delivered substantial and complex projects for some of the largest organizations around the globe and we’re quickly building a brand that is well known for superior delivery.

Website : https://bi3technologies.com/

Follow us on,
LinkedIn : https://www.linkedin.com/company/bi3technologies
Instagram : https://www.instagram.com/bi3technologies/
Twitter : https://twitter.com/Bi3Technologies