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

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.

Choose the Express settings.

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.

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.

Advertisement