Integrating Azure AD into a single page app
[AZURE.TIP] Try the preview of our new developer portal that will help you get up and running with Azure Active Directory in just a few minutes! The developer portal will walk you through the process of registering an app and integrating Azure AD into your code. When you’re finished, you will have a simple application that can authenticate users in your tenant and a backend that can accept tokens and perform validation.
For more information about how the protocols work in this scenario and other scenarios, see Authentication Scenarios for Azure AD.
How To Run This Sample
Getting started is simple! To run this sample you will need: - Visual Studio 2013 - An Internet connection - An Azure Active Directory (Azure AD) tenant. For more information on how to get an Azure AD tenant, please see How to get an Azure AD tenant - A user account in your Azure AD tenant. This sample will not work with a Microsoft account, so if you signed in to the Azure portal with a Microsoft account and have never created a user account in your directory before, you need to do that now.
Step 1: Clone or download this repository
From your shell or command line:
Step 2: Register the sample with your Azure Active Directory tenant
- Sign in to the Azure portal.
- On the top bar, click on your account and under the Directory list, choose the Active Directory tenant where you wish to register your application.
- Click on More Services in the left hand nav, and choose Azure Active Directory.
- Click on App registrations and choose Add.
- Enter a friendly name for the application, for example 'SinglePageApp-jQuery-DotNet' and select 'Web Application and/or Web API' as the Application Type. For the sign-on URL, enter the base URL for the sample, which is by default
https://localhost:44302/. For the App ID URI, enter
<your_tenant_name>with the name of your Azure AD tenant. Click on Create to create the application.
- While still in the Azure portal, choose your application, click on Settings and choose Properties.
- Find the Application ID value and copy it to the clipboard.
- Grant permissions across your tenant for your application. Go to Settings -> Properties -> Required Permissions, and click on the Grant Permissions button in the top bar. Click Yes to confirm.
Step 3: Enable the OAuth2 implicit grant for your application
By default, applications provisioned in Azure AD are not enabled to use the OAuth2 implicit grant. In order to run this sample, you need to explicitly opt in.
- From the former steps, your browser should still be on the Azure portal.
- From the application page, click on Manifest to open the inline manifest editor.
- Search for the
oauth2AllowImplicitFlowproperty. You will find that it is set to
false; change it to
trueand save the file.
Step 4: Configure the sample to use your Azure Active Directory tenant
- Open the solution in Visual Studio 2013.
- Open the
- Find the app key
ida:Tenantand replace the value with your AAD tenant name.
- Find the app key
ida:Audienceand replace the value with the Client ID from the Azure portal.
- Open the file
App/Scripts/App.jsand locate the line
window.config = ....
- Replace the value of
tenantwith your AAD tenant name.
- Replace the value of
clientIdwith the Client ID from the Azure portal.
Step 5: Run the sample
Clean the solution, rebuild the solution, and run it.
You can trigger the sign in experience by either clicking on the sign in link on the top right corner, or by clicking directly on the Todo List tab. Explore the sample by signing in, adding items to the To Do list, removing the user account, and starting again.
How To Deploy This Sample to Azure
About the Code
The key files containing authentication logic are the following:
App.js - Provides the app configuration values used by ADAL for driving protocol interactions with AAD, indicates which routes should not be accessed without previous authentication, issues login and logout requests to Azure AD, handles both successful and failed authentication callbacks from Azure AD, and displays information about the user received in the id_token.
index.html - contains a reference to adal.js.
todoListCtrl.js- shows how to take advantage of the acquireToken() method in ADAL to get a token for accessing a resource.
userDataCtrl.js - shows how to extract user information from the cached id_token.