What is azure AD(active directory)?
Azure Active Directory is Microsoft’s multi-tenant, cloud-based directory and identity management service. For an organization, Azure AD help employees sign up to multiple services and access them anywhere over the cloud with a one set of login credentials.
All workers in an organization need to access some Azure services to perform their tasks. They may access services such as SQL database machine learning,SQL database or Azure container services ,when the administrator assigns them separate user id and password for every service. Employees also administrators often find it hard to manage multiple user logins at the same time. It makes even more a problem for administrators working in an organization that incorporates quite 1000 employees.
This is the place where Azure Active Directory (AD) comes into the picture. With the help of Azure AD, the administrators can handle multiple user logins with no issues.Administrators got to assign one username and password to access all the services they need.
Let’s start..
In azure portal go to azure active directories and click app registrations from left panel under manage section. And then click on new registration
Here you need to provide a name and you have to choose account type. In here the single tenant is mange by default AD it self. Only this registered users can get access using this method. By making it as multi tenant, you will allow other default directory of any. The other one provide personal Microsoft accounts (e.g. Skype) accounts also. For the AD integration I have created single tenant. After creating the AD you will see overview like this.
I have used microsoft-adal-angular6 to connect the angular application with azure AD.
Step 1: Install the package
npm install microsoft-adal-angular6
Step 2.Import MsAdalModule in your application’s app.module.
import { MsAdalAngular6Module } from ‘microsoft-adal-angular6’;
@NgModule({imports: [MsAdalAngular6Module.forRoot({tenant: '<YOUR TENANT>',
clientId: '<YOUR CLIENT / APP ID>',
redirectUri: enter_the_redirect_uri_here,endpoints: {
'api application url': 'api application client id', // this is for feteching the access token
},navigateToLoginRequestUrl: false,cacheLocation: '<localStorage /sessionStorage>',
postLogoutRedirectUri: 'URI on which you want to redirect user after logout',}),],})
Step 3. Login
Now we had configure our project module.
In loginpage.component
import { Component,OnInit } from '@angular/core';
import { MsAdalAngular6Service } from 'microsoft-adal-angular6';
@Component({
selector: 'app-loginpage',
templateUrl: './loginpage.component.html',
styleUrls: ['./loginpage.component.css'
]})
export class LoginpageComponent implements OnInit {
constructor(private adalService: MsAdalAngular6Service) { } ngOnInit(): void {}
login(): void {
this.adalService.login();
}}Now bind the login() method to login button.
Step 4. Set up the redirect uri in azure portal
We have to is add same redirectUri in app.module.ts to Azure portal.
Go to Active Directory → App Registrations →Click app →Click Authentication in left panel
Choose Sing-page Application in the appearing window(Because our angular application is SPA)
Enter the redirect Uri which declared in angular configuration
Secure individual routes
Use the AuthenticationGuard to secure indivuadual routes in your application. This ensures that users navigating to them must be authenticated with AAD to view them.
Import AuthenticationGuard and add it as a provider in your root module.
import { AuthenticationGuard } from ‘microsoft-adal-angular6’;
@NgModule({providers: [AuthenticationGuard],------})
In your routing module, add it to the routes you want to secure -
ex:
const routes: Routes = [{ path: 'expenses', component: ExpensesComponent, pathMatch:'full', canActivate: [AuthenticationGuard]}];
When you click Login button you are redirected to the Organizations login page directly.
We can also perform logout.
logout() {this.adalService.logout();}
bind this to logout button.
NextTopic:Azure function with Azure storage
