Create an Angular App & Protect with Azure Easy Auth

In this post we can explore how to create an Angular App and Protect it with Azure Authentication Easy Auth without writing any line of code Nor making any configuration changes.

Create Angular App

  1. Install Node.js from https://nodejs.org/en/download/
  2. Open Command Prompt
  3. Run command npm install -g @angular/cli
  4. Create Project ng new AngularAAD
  5. Go inside folder & Run command ng serve
  6. Open the website http://localhost:4200

image

Publish to Azure

  1. Open Azure Portal
  2. Create new App Service
  3. Publish the Source
  4. Ensure Application accessible through URL

For Detailed Steps use this LINK

Azure AD – Easy Auth Protection

Go to App Service > Authentication Tab

Choose the following options.

image

Choose the Express settings.

image

Save Changes!

Now your Angular Application is protected with Azure AD Authentication.

Test Authentication

Go to the App Service > URL > Click to launch it

You will be prompted for Authentication.

image

This confirms Angular App protection with Azure Easy Auth.

Note

For advanced Configurations like Adding Users, Controlling Rules etc. you should use Azure AD Enterprise Applications page.

How to Deploy Angular Application to Azure App Service?

In this post we can see how to deploy an Angular Application into Azure App Service.

Create Angular App

  1. Install Node.js from https://nodejs.org/en/download/
  2. Open Command Prompt
  3. Run command npm install -g @angular/cli
  4. Create Project ng new AngularAAD
  5. Go inside folder & Run command ng serve
  6. Open the website http://localhost:4200

image_thumb[3]

Build the Angular App using command:

ng build –prod

Now you should get the dist folder which we need for deployment.

Create Azure App Service

Go to Azure Portal > App Services > Create New > Choose the version depending on the Node Version.

image

Run command node to get the version

image

Choose Operating System > Windows

Click the Create button. Wait for the creation to complete.

Go to Advanced Services (KUDU Console) of the App Service

image

Open CMD window & Go to wwwroot folder.

Copy the contents of dist folder to it.  (Drag & Drop from Windows Explorer to Browser)image

Test Deployment

Now you can Browse the App Service URL from the main page.

https://angularaad.azurewebsites.net/

You should get the page displayed as below.

image