<commit_before>---
services: active-directory
platforms: javascript
author: dstrockis
---

Call an Azure AD protected Web API in an AngularJS Single Page App
====================

This sample demonstrates the use of ADAL for JavaScript for securing an AngularJS based single page app, implemented with an ASP.NET Web API backend, that calls another ASP.NET Web API using CORS.

ADAL for Javascript is an open source library.  For distribution options, source code, and contributions, check out the ADAL JS repo at https://github.com/AzureAD/azure-activedirectory-library-for-js.

For more information about how the protocols work in this scenario and other scenarios, see [Authentication Scenarios for Azure AD](http://go.microsoft.com/fwlink/?LinkId=394414).

## 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](https://azure.microsoft.com/en-us/documentation/articles/active-directory-howto-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:
`git clone https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi.git`

### Step 2:  Register the To Go API Service with your Azure Active Directory tenant

1. Sign in to the [Azure portal](https://portal.azure.com).
2. 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.
3. Click on **More Services** in the left hand nav, and choose **Azure Active Directory**.
4. Click on **App registrations** and choose **Add**.
5. Enter a friendly name for the application, for example 'To Go API' 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:44327`. For the App ID URI, enter https://<your_tenant_name>/ToGoAPI, replacing <your_tenant_name> with the name of your Azure AD tenant. Click on **Create** to create the application.
6. While still in the Azure portal, choose your application, click on **Settings** and choose **Properties**.
7. Find the Application ID value and copy it to the clipboard.

### Step 3:  Configure the To Go API to use your Azure Active Directory tenant

1. Open the solution in Visual Studio 2013.
2. In the ToGoAPI project, open the `web.config` file.
3. Find the app key `ida:Tenant` and replace the value with your AAD tenant name.
4. Find the app key `ida:Audience` and replace the value with the App ID URI you copied from the Azure portal.
5. Also in the ToGoAPI project, open the file `Controllers/ToGoListController.cs`.  In the `[EnableCors...]` attribute, enter the location of the To Do SPA client.  By default it is `https://localhost:44326`.  Make sure to omit the trailing slash.
5. In the TodoSPA project, open the file `App/Scripts/App.js` and locate the declaration of the `endpoints` object.
6. Enter a mapping of the To Go API endpoint location to its resource identifier, or App ID URI.  The name of the property of the `endpoints` object should be the location of the To Go API.  By default, it is `https://localhost:44327/`.  The value of this property should be the App ID URI you copied from the portal.<commit_msg>App ID URI is not exposed on app creation<commit_after>---
services: active-directory
platforms: javascript
author: dstrockis
---

Call an Azure AD protected Web API in an AngularJS Single Page App
====================

This sample demonstrates the use of ADAL for JavaScript for securing an AngularJS based single page app, implemented with an ASP.NET Web API backend, that calls another ASP.NET Web API using CORS.

ADAL for Javascript is an open source library.  For distribution options, source code, and contributions, check out the ADAL JS repo at https://github.com/AzureAD/azure-activedirectory-library-for-js.

For more information about how the protocols work in this scenario and other scenarios, see [Authentication Scenarios for Azure AD](http://go.microsoft.com/fwlink/?LinkId=394414).

## 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](https://azure.microsoft.com/en-us/documentation/articles/active-directory-howto-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:
`git clone https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi.git`

### Step 2:  Register the To Go API Service with your Azure Active Directory tenant

1. Sign in to the [Azure portal](https://portal.azure.com).
2. 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.
3. Click on **More Services** in the left hand nav, and choose **Azure Active Directory**.
4. Click on **App registrations** and choose **Add**.
5. Enter a friendly name for the application, for example 'To Go API' 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:44327`. Click on **Create** to create the application.
6. While still in the Azure portal, choose your application, click on **Settings** and choose **Properties**.
7. Find the Application ID value and copy it to the clipboard.
8. For the App ID URI, enter https://\<your_tenant_name\>/ToGoAPI, replacing \<your_tenant_name\> with the name of your Azure AD tenant.

### Step 3:  Configure the To Go API to use your Azure Active Directory tenant

1. Open the solution in Visual Studio 2013.
2. In the ToGoAPI project, open the `web.config` file.
3. Find the app key `ida:Tenant` and replace the value with your AAD tenant name.
4. Find the app key `ida:Audience` and replace the value with the App ID URI you copied from the Azure portal.
5. Also in the ToGoAPI project, open the file `Controllers/ToGoListController.cs`.  In the `[EnableCors...]` attribute, enter the location of the To Do SPA client.  By default it is `https://localhost:44326`.  Make sure to omit the trailing slash.
5. In the TodoSPA project, open the file `App/Scripts/App.js` and locate the declaration of the `endpoints` object.
6. Enter a mapping of the To Go API endpoint location to its resource identifier, or App ID URI.  The name of the property of the `endpoints` object should be the location of the To Go API.  By default, it is `https://localhost:44327/`.  The value of this property should be the App ID URI you copied from the portal.
{'fraction_non_alphanumeric': 0.07825851078258511, 'fraction_numerical': 0.012613590126135901, 'mean_word_length': 4.203952011291461, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 16, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1127158', 'n_tokens_mistral': 1989, 'n_tokens_neox': 1893, 'n_words': 1100}