Integrate Azure Active Directory Authentication to your website

Posted on Posted in Uncategorized

This blog post is from march 2017. The cloud changes fast so it could be outdated at the moment you read it.

To provide a secure authentication and authorization method to your website, Azure provides you with a few authentication providers like Azure Active Directory, Facebook, Twitter and Google. In this blog we will use Azure Active Directory to authentication on our website and to use our authorization to request Azure Active Directory objects like users.

The Web App in Azure wil exists of an MVC website build in Visual Studio.
You can download the files and components we will need from here.
Open adalTemplate.js and search for <replace> . Replace <replace> with an actual value.

Logical design

Let’s look at the logical design and how the components integrate and are dependent on each other:

hqdefault

 

At this step I assume that you have Azure Active Directory and have created a Web App in Azure.

  1. We start at building a website in Visual Studio. Create a new MVC website:

image

2. Drag ADAL.js and jquery-3.1.1.min into the project Solution Explorer. You can download them here.

image

3.  Open _Layout.cshtml

4. Drag ADAL.JS and jquery-3.1.1.min into the code of the front page

image

5. Open Index.cshtml

image

6. Under the ADAL.JS section, create a script tag:

image

7.  Paste the content of the adalTemplate.JS file between the Script tags

image

8.  Change the values between all the <> sections. For example <TenantID> and <AppID>

Needs to be between “”

ClientID is the Application ID of the Application in Azure Active Directory Applications

image

9. Change the redirect URL to the URL of your website:

image

 

Now the website is configured to redirect incoming requests to the Azure AD for authorization.

image

GRAPH API

The next step is to use the GRAPH API to get a list of users from Azure AD displayed on our website.

1. In Index.cshtml, the code for the GRAPH API should be pasted in line 131.

image

Code example:

image

2. In Index.cshtml, in div class=”jumbotron” add ID=”Items” to the DIV

image

Active Directory Configuration

1. Log on to Azure, go to Azure Active Directory and create a new application using the values in the next screenshots

image

image

image

The reply URL are the websites where Azure AD is allowed to send the token to.

image

image

Permissions are used to give the token access to certain information in Azure AD. Some information requires admin access but to read the user info and to read the basic profiles of all users, no admin access is needed. Only select those two options.

image

image

The keys section is only used if the application authenticates and not the user, since we want the user to authenticate, the keys section in not necessary.

image

 

Azure Web App configuration

Now that a new application is configured in Azure AD, it is time to set up the Web App.

1. Log on to Azure, Go to the Azure Web App

image

2. Enable App Service Authentication.

image

3. Select Advanced and paste in the Client ID (this is the Application ID of the Application in Azure AD).

image

 

Now when you open the created website, it asks you to log on and afterwards displays a list of users.

 

 

 

Tags:

odata.error
Insufficient privileges to complete the operation
Azure Active Directory
Web App
ADAL
response_type ‘token’ is not supported for the application
oauth2AllowImplicitFlow

2 thoughts on “Integrate Azure Active Directory Authentication to your website

Leave a Reply

Your email address will not be published. Required fields are marked *