Integrate Azure Active Directory Authentication to your website

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 sign in and authorization to your website you will need Azure Active Directory or any other Authentication Provider like Facebook, Twitter or Google. In this blog we will use Azure Active Directory.

We will also use a Web App in Azure and 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

Advertisements
This entry was posted in Uncategorized and tagged , , , , . Bookmark the permalink.

2 Responses to Integrate Azure Active Directory Authentication to your website

  1. Jen-Hung says:

    You can download the files and components we will need from here. https://1drv.ms/u/s!AgbyNW_NsrI5gtEZ4YO0wUyAR-c7Gw
    The download link is not working.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s