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.
Let’s look at the logical design and how the components integrate and are dependent on each other:
At this step I assume that you have Azure Active Directory and have created a Web App in Azure.
- We start at building a website in Visual Studio. Create a new MVC website:
2. Drag ADAL.js and jquery-3.1.1.min into the project Solution Explorer. You can download them here.
3. Open _Layout.cshtml
4. Drag ADAL.JS and jquery-3.1.1.min into the code of the front page
5. Open Index.cshtml
6. Under the ADAL.JS section, create a script tag:
7. Paste the content of the adalTemplate.JS file between the Script tags
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
9. Change the redirect URL to the URL of your website:
Now the website is configured to redirect incoming requests to the Azure AD for authorization.
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.
2. In Index.cshtml, in div class=”jumbotron” add ID=”Items” to the DIV
1. Log on to Azure, go to Azure Active Directory and create a new application using the values in the next screenshots
The reply URL are the websites where Azure AD is allowed to send the token to.
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.
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.
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
2. Enable App Service Authentication.
3. Select Advanced and paste in the Client ID (this is the Application ID of the Application in Azure AD).
Now when you open the created website, it asks you to log on and afterwards displays a list of users.
Insufficient privileges to complete the operation
Azure Active Directory
response_type ‘token’ is not supported for the application