Microsoft Authentication with Azure App Services

I will look here at how to implement Microsoft authentication in Azure App Services.

Where

Inside the App Service Menu’, there will be a section called “Authentication/Authorization”.

Find an application to secure

See this post I recently wrote to catch up on how I created mine:

Azure App Services Virtual Folders

Open you Azure Active Directory

Catch up with it here:

Azure Active Directory

Register your App

In this step, the Todos App Service will be registered into my Azure Account’s Active Directory. The output of this step will be a “Client Id” that will be sent from the App Service to the Microsoft Identity Platform to allow it to identify and pull the application information.

For more information look at:

Authentication in Microsoft identity platform

And:

Microsoft identity platform (v2.0) overview - Azure

Open Azure Active Directory — App Registrations — New Registration

The boxes highlighted in the picture will need to be filled:

Name

The name of the Application is what will be displayed to the user after they will authenticate. For instance, the login page will write “Alberto would like to access the following information of your account”.

Supported Account Types

The supported account types will allow selecting which tenants will be authorised to access our applications.

The third option includes Microsoft Accounts, this is what we want.

Redirect URI

This will be the URL that will be hit after the authentication will succeed. In our instance will be the App Service URL as follows:

https://<app-domain-name>/.auth/login/microsoftaccount/callback

In my case it will be

https://todosionic.azurewebsites.net/.auth/login/microsoftaccount/callback

After creation, copy and store your Client Id as it will be needed later. Then create a client secret and keep it for later:

In the Branding section you may have a bit of fun customising what will be displayed to your end-user:

Configure the App Service

In this step, the App Service will be instructed to stop allowing anonymous access to the Todos app and to redirect all the requests to the Microsoft Identity Platform.

Open the “Authentication/Athorization” tab:

Copy/Paste client id and secret:

Click OK, choose “Login with Microsoft Account” in the App Service drop-down, then Save:

Result:

A. Redirect

B. Accept to share basic information

C. Yes

Summary

Azure App Services very easily allows adding federated authentication with a number of identity providers