Welcome to today’s post.
In today’s post I will show how we can register and configure Angular applications so that it can be configured to obtain authorization and authentication tokens from the Microsoft Identity platform.
In future posts I will be showing how to create Angular applications that can access Microsoft Graph resources. To be able to access Microsoft Graph resources, we will be required to configure your application for Microsoft Identity platform.
I will go through the necessary tasks required to setup access tokens between a front-end Angular application and the Microsoft Identity Platform, which will be the authentication provider for users of our application. Before I describe the tasks, the access token flow from the identity platform will be explained first in the next section.
Access Token Flow from the Microsoft Identity Platform
The flow for obtaining an access token from the Microsoft identity platform then using the token to request resources using call Graph API is shown below:
The following are the prerequisites for configuring an Angular application for MS Graph access:
- Have an existing AD tenant within a Microsoft account.
- Register an application within an existing Azure AD tenant.
- Configure the application with the Microsoft Identity platform.
I will go through each of the above steps in the following sections.
Have an Existing AD Tenant within a Microsoft Account
Your account will have a default Azure AD tenant directory. If you wish to create a separate AD tenant within your personal Microsoft Azure account or within Azure AD of your work or organization then follow the steps:
Select Azure Active Directory. You will see the default directory:
Select the option Create a tenant.
Select tenant type as Azure Active Directory.
Enter the compulsory directory details including Organization name, Initial domain name and Country/Region.
Create the tenant.
Once the tenant is created you will see the details including a unique tenant identifier and primary domain:
Before a user that is a member of the tenant can be authenticated to the application, will first require the application to be associated with the tenant. This association is achieved by registering the application with the tenancy. I will show how this is done in the next section.
Registering an Application within an Azure AD Tenant
Within the AD Tenant, select App Registrations, then New Registration.
Enter the application name and the account type.
If you are registering the application to be accessed by accounts within an organization then select one of the options for single tenant or multi-tenant.
If you are creating the application to be accessed by a personal Microsoft account, then select the personal Microsoft account.
Once created, the account will have a unique application identifier and a unique tenant identifier as shown:
For the application to be able to obtain authentication tokens, it needs to be registered with the identity platform that will be issuing authorization codes.
Configure the Application with the Microsoft Identity Platform
For your Angular application to be able to obtain authorization code and then obtain an authentication token from a Microsoft identity platform endpoint will require your registered application to have a redirection endpoint.
Refer to the MS graph authentication registration app on the Microsoft site for details on the different types of applications that need configuration.
In your application overview select Authentication from the side menu:
Select Add a platform.
In the next screen, since Angular is a SPA or Single-page application, select the option shown:
In the redirect URI screen, enter the URL:
http://localhost:4200
In the grant types, check both options Access tokens and ID tokens when configuring a single page application.
After we have completed the above tasks we will have successfully registered and configured our application to authenticate with the MS identity platform.
In the next post I will show how to make use of our registered application to obtain an authorization code, authentication token and use these to call an MS Graph resource.
That is all for today’s post.
I hope you found this post useful and informative.
Andrew Halil is a blogger, author and software developer with expertise of many areas in the information technology industry including full-stack web and native cloud based development, test driven development and Devops.
