Repository files navigation

This sample demonstrates a cross-platform application suite involving an Angular SPA (TodoListSPA) calling an ASP.NET Core Web API (TodoListAPI) secured with Azure Active Directory.

• TodoListSPA usesMSAL.js andMSAL-Angular to authenticate a user.
• The app then obtains anaccess token from Azure Active Directory (Azure AD) on behalf of the authenticated user.
• The access token is then used to authorize the call to the TodoListAPI.
• TodoListAPI usesMSAL.NET andMicrosoft.Identity.Web to protect its endpoint and accept authorized calls.

ℹ️ This sample uses Angular 9 with .NET Core 3.1 and is configured to support sign-ins withpersonal Microsoft accounts.

ℹ️ For more information about SSO withMSAL.js, refer to the documentationhere andhere.

• Node.js must be installed to run this sample.
• Angular-cli must be installed to run this sample.
• Dotnet Core SDK must be installed to run this sample.
• We recommendVS Code for running and debugging this cross-platform application.
• An Azure Active Directory (Azure AD) tenant. For more information on how to get an Azure AD tenant, seeHow to get an Azure AD tenant.

Using a command line interface such as VS Code integrated terminal, follow the steps below:

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-spa-aspnetcore-webapi.git

cd TodoListAPIdotnet restore

dotnet dev-certs https --cleandotnet dev-certs https --trust

Learn more aboutHTTPS in .NET Core.

cd ../cd TodoListSPAnpm install

There are two projects in this sample. Each needs to be separately registered in your Azure AD tenant. To register these projects, you can:

• either follow the steps below for manual registration,
• or use PowerShell scripts that:
  • automatically creates the Azure AD applications and related objects (passwords, permissions, dependencies) for you.
  • modify the configuration files.

1. Navigate to the Microsoft identity platform for developersApp registrations page.
2. SelectNew registration.
3. In theRegister an application page that appears, enter your application's registration information:
   • In theName section, enter a meaningful application name that will be displayed to users of the app, for exampleTodoListAPI.
   • UnderSupported account types, selectAccounts in any organizational directory and personal Microsoft accounts.
4. SelectRegister to create the application.
5. In the app's registration screen, find and note theApplication (client) ID. You use this value in your app's configuration file(s) later in your code.
6. SelectSave to save your changes.
7. In the app's registration screen, click on theExpose an API blade to the left to open the page where you can declare the parameters to expose this app as an Api for which client applications can obtainaccess tokens for.The first thing that we need to do is to declare the uniqueresource URI that the clients will be using to obtain access tokens for this Api. To declare an resource URI, follow the following steps:
   • ClickSet next to theApplication ID URI to generate a URI that is unique for this app.
   • For this sample, accept the proposed Application ID URI (api://{clientId}) by selectingSave.
8. All Apis have to publish a minimum of onescope for the client's to obtain an access token successfully. To publish a scope, follow the following steps:
   • SelectAdd a scope button open theAdd a scope screen and Enter the values as indicated below:
     • ForScope name, useaccess_as_user.
     • SelectAdmins and users options forWho can consent?
     • ForAdmin consent display name typeAccess TodoListAPI
     • ForAdmin consent description typeAllows the app to access TodoListAPI as the signed-in user.
     • ForUser consent display name typeAccess TodoListAPI
     • ForUser consent description typeAllow the application to access TodoListAPI on your behalf.
     • KeepState asEnabled
     • Click on theAdd scope button on the bottom to save this scope.

Open the project in your IDE to configure the code.

In the steps below, "ClientID" is the same as "Application ID" or "AppId".

1. Open theTodoListAPI\appsettings.json file
2. Find the app keyDomain and replace the existing value with your Azure AD tenant name.
3. Find the app keyClientId and replace the existing value with the application ID (clientId) of theTodoListAPI application copied from the Azure portal.

1. Navigate to the Microsoft identity platform for developersApp registrations page.

2. SelectNew registration.

3. In theRegister an application page that appears, enter your application's registration information:

   • In theName section, enter a meaningful application name that will be displayed to users of the app, for exampleTodoListSPA.
   • UnderSupported account types, selectAccounts in any organizational directory and personal Microsoft accounts.
   • In theRedirect URI (optional) section, selectSingle-page application in the combo-box and enter the following redirect URI:http://localhost:4200/.

4. SelectRegister to create the application.

5. In the app's registration screen, find and note theApplication (client) ID. You use this value in your app's configuration file(s) later in your code.

6. In the app's registration screen, selectAuthentication in the menu.

   • If you don't have a platform added, selectAdd a platform and select theWeb option.
   • In theImplicit grant section, check theAccess tokens andID tokens option as this sample requirestheImplicit grant flow to be enabled tosign-in the user, and call an API.

7. SelectSave to save your changes.

8. In the app's registration screen, click on theAPI permissions blade in the left to open the page where we add access to the Apis that your application needs.

   • Click theAdd a permission button and then,
   • Ensure that theMy APIs tab is selected.
   • In the list of APIs, select the APITodoListAPI.
   • In theDelegated permissions section, select theaccess_as_user in the list. Use the search box if necessary.
   • Click on theAdd permissions button at the bottom.

Open the project in your IDE to configure the code.

In the steps below, "ClientID" is the same as "Application ID" or "AppId".

1. Open theTodoListSPA\src\app\app-config.json file
2. Find the app keyclientId and replace the existing value with the application ID (clientId) of theTodoListSPA application copied from the Azure portal.
3. Find the app keyredirectUri and replace the existing value with the base address of the TodoListSPA project (by defaulthttp://localhost:4200/).
4. Find the app keypostLogoutRedirectUri and replace the existing value with the base address of the TodoListSPA project (by defaulthttp://localhost:4200/).
5. Find the app keyresourceUri and replace the existing value with the base address of the TodoListAPI project (by defaulthttps://localhost:44351/api/todolist/).
6. Find the app keyresourceScope and replace the existing value withScope you created earlierapi://{clientId}/access_as_user.
7. In order to enable SSO, find the app keyloginHint and replace the existing value with the sign-inuser name oremail of the user. If the user already have a session that exists with the AAD authentication server, they will automatically sign-in to the application.

Using a command line interface such as VS Code integrated terminal, locate the application directory. Then:

cd ../cd TodoListSPAnpm start

In a separate console window, execute the following commands

cd TodoListAPIdotnet run

1. Open your browser onhttp://localhost:4200.
2. Sign-in using the button on top-right.
3. Click on the "Get my tasks" button to access your todo list.

To debug the .NET Core Web API that comes with this sample, install theC# extension for Visual Studio Code.

Learn more about using.NET Core with Visual Studio Code.

This sample demonstrates the following AAD and MSAL workflows:

• How to protect a Web API.
• How to configure application parameters.
• How to sign-in.
• How to sign-out.
• How to acquire an access token.
• How to make an API call with the access token.

For more information, visit the following links:

• Articles about the Microsoft identity platform are athttp://aka.ms/aaddevv2, with a focus on:

  • The OAuth 2.0 Implicit Grant in Azure AD
  • The OpenID Connect protocol
  • Azure AD OAuth Bearer protocol
  • Access token
  • Secure a Web API with Azure AD

• To lean more about the application registration, visit:

  • Quickstart: Register an application with the Microsoft identity platform (Preview)
  • Quickstart: Configure a client application to access web APIs (Preview)
  • Quickstart: Configure an application to expose web APIs (Preview)

UseStack Overflow to get support from the community.Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before.Make sure that your questions or comments are tagged with [msaldotnetangularazure-active-directory].

If you find a bug in the sample, please raise the issue onGitHub Issues.

To provide a recommendation, visit the followingUser Voice page.

This project welcomes contributions and suggestions. Most contributions require you to agree to aContributor License Agreement (CLA) declaring that you have the right to, and actually do, grant usthe rights to use your contribution. For details, visithttps://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to providea CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructionsprovided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted theMicrosoft Open Source Code of Conduct.For more information see theCode of Conduct FAQ orcontactopencode@microsoft.com with any additional questions or comments.