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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s