|
| 1 | +--- |
| 2 | +title: Sign in users in Angular single-page apps - Azure |
| 3 | +titleSuffix: Microsoft identity platform |
| 4 | +description: Learn how an Angular app can call an API that requires access tokens using the Microsoft identity platform. |
| 5 | +services: active-directory |
| 6 | +author: jasonnutter |
| 7 | +manager: CelesteDG |
| 8 | + |
| 9 | +ms.service: active-directory |
| 10 | +ms.subservice: develop |
| 11 | +ms.custom: aaddev, identityplatformtop40, scenarios:getting-started, languages:JavaScript |
| 12 | +ms.topic: quickstart |
| 13 | +ms.workload: identity |
| 14 | +ms.date: 03/18/2020 |
| 15 | +ms.author: janutter |
| 16 | + |
| 17 | +#Customer intent: As an app developer, I want to learn how to get access tokens by using the Microsoft identity platform endpoint so that my Angular app can sign in users of personal Microsoft accounts, and work and school accounts. |
| 18 | +--- |
| 19 | + |
| 20 | +# Quickstart: Sign in users and get an access token in an Angular SPA |
| 21 | + |
| 22 | +> [!IMPORTANT] |
| 23 | +> This feature is currently in preview. Previews are made available to you on the condition that you agree to the [supplemental terms of use](https://azure.microsoft.com/support/legal/preview-supplemental-terms/). Some aspects of this feature may change prior to general availability (GA). |
| 24 | +
|
| 25 | +In this quickstart, you use a code sample to learn how an Angular single-page application (SPA) can sign in users who have personal Microsoft accounts, and work accounts and school accounts. An Angular SPA can also get an access token to call the Microsoft Graph API or any web API. |
| 26 | + |
| 27 | +## Prerequisites |
| 28 | + |
| 29 | +* Azure subscription - [create one for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) |
| 30 | +* [Node.js](https://nodejs.org/en/download/) |
| 31 | +* [Visual Studio Code](https://code.visualstudio.com/download) to edit project files, or [Visual Studio 2019](https://visualstudio.microsoft.com/downloads/) to run the project. |
| 32 | + |
| 33 | +> [!div renderon="docs"] |
| 34 | +> ## Register and download the quickstart app |
| 35 | +> To start the quickstart app, use either of the following options: |
| 36 | +> |
| 37 | +> ### Option 1 (Express): Register and auto configure the app. Then download the code sample |
| 38 | +> |
| 39 | +> 1. Sign in to the [Azure portal](https://portal.azure.com) using either a work or school account, or a personal Microsoft account. |
| 40 | +> 1. If your account has access to more than one tenant, select the account at the top right, and then set your portal session to the Azure Active Directory (Azure AD) tenant you want to use. |
| 41 | +> 1. Open the new [Azure portal - App registrations](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade/quickStartType/JavascriptSpaQuickstartPage/sourceType/docs) pane. |
| 42 | +> 1. Enter a name for your application, and then select **Register**. |
| 43 | +> 1. Navigate to the quickstart pane and view the Angular quickstart. Follow the instructions to download and automatically configure your new application. |
| 44 | +> |
| 45 | +> ### Option 2 (Manual): Register and manually configure the application and code sample |
| 46 | +> |
| 47 | +> #### Step 1: Register the application |
| 48 | +> |
| 49 | +> 1. Sign in to the [Azure portal](https://portal.azure.com) using either a work or school account, or a personal Microsoft account. |
| 50 | +> |
| 51 | +> 1. If your account has access to more than one tenant, select your account at the top right, and set your portal session to the Azure AD tenant you want to use. |
| 52 | +> 1. Follow the instructions to [register a single-page application](https://docs.microsoft.com/azure/active-directory/develop/scenario-spa-app-registration) in the Azure portal. |
| 53 | +> 1. Add a new platform in the **Authentication blade** of your app registration and register the redirect URI: `http://localhost:4200/` |
| 54 | +> 1. This quickstart uses the [implicit grant flow](v2-oauth2-implicit-grant-flow.md). Select the **Implicit Grant** settings for **ID tokens** and **Access Tokens**. ID tokens and access tokens are required because this app signs in users and calls an API. |
| 55 | +
|
| 56 | +> [!div class="sxs-lookup" renderon="portal"] |
| 57 | +> #### Step 1: Configure the application in the Azure portal |
| 58 | +> For the code sample for this quickstart to work, you need to add a `redirectUri` as `http://localhost:4200/` and enable **Implicit grant**. |
| 59 | +> > [!div renderon="portal" id="makechanges" class="nextstepaction"] |
| 60 | +> > [Make these changes for me]() |
| 61 | +> |
| 62 | +> > [!div id="appconfigured" class="alert alert-info"] |
| 63 | +> >  Your application is configured with these attributes. |
| 64 | +
|
| 65 | +#### Step 2: Download the code sample |
| 66 | +>[!div renderon="docs"] |
| 67 | +>To run the project with a web server by using Node.js, clone https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular or [download](https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular/archive/master.zip) the core project files. Open the files using an editor such as Visual Studio Code. |
| 68 | +
|
| 69 | +> [!div renderon="portal" id="autoupdate" class="sxs-lookup" class="nextstepaction"] |
| 70 | +> [Download the code sample](https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular/archive/master.zip) |
| 71 | +
|
| 72 | +> [!div renderon="docs"] |
| 73 | +>#### Step 3: Configure the JavaScript app |
| 74 | +> |
| 75 | +> In the *src/app* folder, edit *app.module.ts* and set the `clientId` and `authority` values under `MsalModule.forRoot`. |
| 76 | +> |
| 77 | +>```javascript |
| 78 | +>MsalModule.forRoot({ |
| 79 | +> auth: { |
| 80 | +> clientId: 'Enter_the_Application_Id_here', // This is your client ID |
| 81 | +> authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // This is your tenant info |
| 82 | +> redirectUri: 'Enter_the_Redirect_Uri_Here' // This is your redirect URI |
| 83 | +> }, |
| 84 | +> cache: { |
| 85 | +> cacheLocation: 'localStorage', |
| 86 | +> storeAuthStateInCookie: isIE, // set to true for IE 11 |
| 87 | +> }, |
| 88 | +>}, |
| 89 | +> //... ) |
| 90 | +>``` |
| 91 | +
|
| 92 | +> [!div class="sxs-lookup" renderon="portal"] |
| 93 | +> > [!NOTE] |
| 94 | +> > Enter_the_Supported_Account_Info_Here |
| 95 | +
|
| 96 | +
|
| 97 | +> [!div renderon="docs"] |
| 98 | +> |
| 99 | +> Replace these values as such: |
| 100 | +> |
| 101 | +>|Value name|Description| |
| 102 | +>|---------|---------| |
| 103 | +>|Enter_the_Application_Id_Here|In the **overview** page of your application registration, this is your **application(client) ID** | |
| 104 | +>|Enter_the_Cloud_Instance_Id_Here|This is the instance of the Azure cloud. For the main or global Azure cloud, enter https://login.microsoftonline.com. For national clouds (for example, China), see [National clouds](https://docs.microsoft.com/azure/active-directory/develop/authentication-national-cloud).| |
| 105 | +>|Enter_the_Tenant_Info_Here| Set to one of the following options: 1) If your application supports *accounts in this organizational directory*, replace this value with the **Directory (Tenant) ID** or **Tenant name** (for example, *contoso.microsoft.com*). 2) If your application supports *accounts in any organizational directory*, replace this value with **organizations**. 3) If your application supports *accounts in any organizational directory and personal Microsoft accounts*, replace this value with **common**. 4) To restrict support to *personal Microsoft accounts only*, replace this value with **consumers**. | |
| 106 | +>|Enter_the_Redirect_Uri_Here|Replace with `http://localhost:4200`| |
| 107 | +>|cacheLocation | (Optional) Sets the browser storage for the auth state. The default is sessionStorage. | |
| 108 | +>|storeAuthStateInCookie | (Optional) The library that stores the authentication request state. This state is required to validate the authentication flows in the browser cookies. This cookie is set for the Internet Explorer and Edge browsers to accommodate those two browsers. For more details, see [known issues](https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Known-issues->on-IE-and-Edge-Browser#issues). | |
| 109 | +> > [!TIP] |
| 110 | +> > To find the values of **Application (client) ID**, **Directory (tenant) ID**, and **Supported account types**, go to the app's **Overview** page in the Azure portal. |
| 111 | +
|
| 112 | +For more information about available configurable options, see [Initialize client applications](msal-js-initializing-client-applications.md). |
| 113 | +
|
| 114 | +>[!div class="sxs-lookup" renderon="portal"] |
| 115 | +>#### Step 3: Run the project |
| 116 | +
|
| 117 | +>[!div renderon="docs"] |
| 118 | +>#### Step 4: Run the project |
| 119 | +
|
| 120 | +* If you're using Node.js: |
| 121 | +
|
| 122 | + 1. Start the server by running the following commands from the project directory: |
| 123 | +
|
| 124 | + ```console |
| 125 | + npm install |
| 126 | + npm start |
| 127 | + ``` |
| 128 | +
|
| 129 | + 1. Browse `http://localhost:4200/`. |
| 130 | + 1. Select **Login**. |
| 131 | + 1. Select **Profile** to call Microsoft Graph. |
| 132 | +
|
| 133 | +After the browser loads the application, select **Login**. The first time you sign in, you're prompted to provide your consent to allow the application to access your profile and sign you in. After you're signed in successfully, select **Profile**, and your user profile information will be displayed on the page. |
| 134 | +
|
| 135 | +## How the sample works |
| 136 | +
|
| 137 | + |
| 138 | +
|
| 139 | +
|
| 140 | +## Next steps |
| 141 | +
|
| 142 | +> [!div class="nextstepaction"] |
| 143 | +> Go to the [Angular Tutorial](https://docs.microsoft.com/azure/active-directory/develop/tutorial-v2-angular) to learn how to sign in a user and acquire tokens. |
| 144 | +
|
| 145 | +Browse the [MSAL repo](https://github.com/AzureAD/microsoft-authentication-library-for-js) for documentation, FAQ, issues, and more. |
0 commit comments