/angular-adal-example

Angular Azure AD example using ng2-adal

Primary LanguageTypeScript

Frontend: Angular Azure AD example

Copy of ng2-adal-QuickStart implemented with angular-cli. Adal library used: ng2-adal

ADAL.JS (adal-angular) version is implemented on adaljs branch.

Angular 4.0 version is implemented on angular4.0 branch. Using deprecated HttpModule.

This project was generated with Angular CLI version 1.5.

Development

Frontend

Setup

Go to .\src\app\_services\ and replace adal-config.service.ts.template with adal-config.service.ts and your actual values.

Run

npm install
ng serve -o

Routes

  • /home - main page with Login/Logout buttons
  • /restricted - a protected with AuthenticationGuard.canActivate
  • /unauthorized - user will be redirected here when tries to access /restricted route but is not logged-in. Use Login button first on /home page.
  • /auth-callback - here Azure AD will redirect after successful login/logout process. It must be configured in Azure portal in Reply URLs section and in secret.service.ts as redirectUri and postLogoutRedirectUri.

Backend - Backend.DotNetCore

Setup

Set environment variable on your local machine ASPNETCORE_ENVIRONMENT=Development

Update appsettings.json and set

"MicrosoftIdentity": {
    "Authority": "https://login.microsoftonline.com/{tenantId}",
    "ClientId": "YOUR CLIENT ID"
}

or alternatively set it in user-secrets (Secret Manager) for the project

Run

dotnet restore
.\run-server.cmd

The run-server.cmd is used to run the app on :44008 port.

Azure portal setup

Azure Portal

Left Menu -> Azure Active Directory -> App registrations -> Select your AD app

Setup Reply URLs

Your AD app -> All settings -> Reply URLs

Set http://localhost:4200/auth-callback

Scheme

How to get tenant

Scheme

How to get client_id

Your AD app -> All settings -> Application ID

Enable Implicit Flow

Your AD app -> Manifest

Set oauth2AllowImplicitFlow to true

Manifest

Scheme