You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/active-directory/develop/quickstart-register-app.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,7 +25,7 @@ Your app is integrated with the Microsoft identity platform by registering it wi
25
25
## Prerequisites
26
26
27
27
* An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?ref=microsoft.com&utm_source=microsoft.com&utm_medium=docs&utm_campaign=visualstudio).
28
-
* An [Azure AD tentant](quickstart-create-new-tenant.md).
28
+
* An [Azure AD tenant](quickstart-create-new-tenant.md).
29
29
30
30
## Register a new application using the Azure portal
Copy file name to clipboardExpand all lines: articles/active-directory/develop/quickstart-v2-angular.md
+44-42Lines changed: 44 additions & 42 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Sign in users in Angular single-page apps - Azure
3
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.
4
+
description: Learn how an Angular app can call an API that requires access tokens by using the Microsoft identity platform.
5
5
services: active-directory
6
6
author: jasonnutter
7
7
manager: CelesteDG
@@ -14,48 +14,47 @@ ms.workload: identity
14
14
ms.date: 03/18/2020
15
15
ms.author: janutter
16
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.
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, work accounts, or school accounts.
18
18
---
19
19
20
-
# Quickstart: Sign in users and get an access token in an Angular SPA
20
+
# Quickstart: Sign in users and get an access token in an Angular single-page application
21
21
22
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).
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 might change before general availability (GA).
24
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.
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, work accounts, or school accounts. An Angular SPA can also get an access token to call the Microsoft Graph API or any web API.
26
26
27
27
## Prerequisites
28
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/)
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
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
32
33
33
> [!div renderon="docs"]
34
34
> ## Register and download the quickstart app
35
-
> To start the quickstart app, use either of the following options:
35
+
> To start the quickstart app, use either of the following options.
36
36
>
37
-
> ### Option 1 (Express): Register and auto configure the app. Then download the code sample
37
+
> ### Option 1 (express): Register and automatically configure the app, and then download the code sample
38
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.
39
+
> 1. Sign in to the [Azure portal](https://portal.azure.com).
40
+
> 1. If your account has access to more than one tenant, select the account at the upper right, and then set your portal session to the Azure Active Directory (Azure AD) tenant that you want to use.
41
+
> 1. Open the new [App registrations](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade/quickStartType/JavascriptSpaQuickstartPage/sourceType/docs) pane in the Azure portal.
42
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.
43
+
> 1.Go to the quickstart pane and view the Angular quickstart. Follow the instructions to download and automatically configure your new application.
44
44
>
45
-
> ### Option 2 (Manual): Register and manually configure the application and code sample
45
+
> ### Option 2 (manual): Register and manually configure the application and code sample
46
46
>
47
47
> #### Step 1: Register the application
48
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.
49
+
> 1. Sign in to the [Azure portal](https://portal.azure.com).
50
+
> 1. If your account has access to more than one tenant, select your account at the upper right, and set your portal session to the Azure AD tenant that you want to use.
52
51
> 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.
52
+
> 1. Add a new platform on the **Authentication**pane of your app registration and register the redirect URI: `http://localhost:4200/`.
53
+
> 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
54
56
55
> [!div class="sxs-lookup" renderon="portal"]
57
56
> #### 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**.
57
+
> For the code sample for this quickstart to work, you need to add a redirect URI as **http://localhost:4200/** and enable **Implicit grant**.
@@ -64,7 +63,7 @@ In this quickstart, you use a code sample to learn how an Angular single-page ap
64
63
65
64
#### Step 2: Download the code sample
66
65
>[!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.
66
+
>To run the project with a web server by using Node.js, [clone the sample repository](https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular) or [download the core project files](https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular/archive/master.zip). Open the files by using an editor such as Visual Studio Code.
> [Download the code sample](https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular/archive/master.zip)
@@ -96,50 +95,53 @@ In this quickstart, you use a code sample to learn how an Angular single-page ap
96
95
97
96
> [!div renderon="docs"]
98
97
>
99
-
> Replace these values as such:
98
+
> Replace these values:
100
99
>
101
100
>|Value name|Description|
102
101
>|---------|---------|
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 authstate. 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 forthe 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). |
102
+
>|Enter_the_Application_Id_Here|On the **Overview** page of your application registration, this is your **Application(client) ID** value. |
103
+
>|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).|
104
+
>|Enter_the_Tenant_Info_Here| Set to one of the following options: 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**). If your application supports *accounts in any organizational directory*, replace this value with **organizations**. If your application supports *accounts in any organizational directory and personal Microsoft accounts*, replace this value with **common**. To restrict support to *personal Microsoft accounts only*, replace this value with **consumers**. |
105
+
>|Enter_the_Redirect_Uri_Here|Replace with **http://localhost:4200**.|
106
+
>|cacheLocation | (Optional) Set the browser storage for the authentication state. The default is **sessionStorage**. |
107
+
>|storeAuthStateInCookie | (Optional) Identify 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 Internet Explorer and Edge to accommodate those two browsers. For more details, see the [known issues](https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Known-issues->on-IE-and-Edge-Browser#issues). |
109
108
> > [!TIP]
110
109
> > 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
110
112
-
For more information about available configurable options, see [Initialize client applications](msal-js-initializing-client-applications.md).
111
+
For more information about available configurable options, see [Initialize client applications](msal-js-initializing-client-applications.md).
112
+
113
+
You can find the source code for the MSAL.js library in the [AzureAD/microsoft-authentication-library-for-js](https://github.com/AzureAD/microsoft-authentication-library-for-js) repository on GitHub.
113
114
114
115
>[!div class="sxs-lookup" renderon="portal"]
115
116
>#### Step 3: Run the project
116
117
117
118
>[!div renderon="docs"]
118
119
>#### Step 4: Run the project
119
120
120
-
* If you're using Node.js:
121
+
If you're using Node.js:
121
122
122
-
1. Start the server by running the following commands from the project directory:
123
+
1. Start the server by running the following commands from the project directory:
123
124
124
-
```console
125
-
npm install
126
-
npm start
127
-
```
125
+
```console
126
+
npm install
127
+
npm start
128
+
```
128
129
129
-
1. Browse `http://localhost:4200/`.
130
-
1. Select **Login**.
131
-
1. Select **Profile** to call Microsoft Graph.
130
+
1. Browse to **http://localhost:4200/**.
131
+
1. Select **Login**.
132
+
1. Select **Profile** to call Microsoft Graph.
132
133
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
+
After the browser loads the application, select **Login**. The first time you start to 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
135
136
## How the sample works
136
137
137
-
138
+
138
139
139
140
140
141
## Next steps
141
142
143
+
Next, learn how to sign in a user and acquire tokens in the Angular tutorial:
144
+
142
145
> [!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.
Copy file name to clipboardExpand all lines: articles/active-directory/develop/tutorial-v2-android.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -87,7 +87,7 @@ If you do not already have an Android application, follow these steps to set up
87
87
88
88
1. In Android Studio's project pane, navigate to **app\src\main\res**.
89
89
2. Right-click **res** and choose **New** > **Directory**. Enter `raw` as the new directory name and click **OK**.
90
-
3. In **app** > **src** > **main** > **res** > **raw**, create a new JSON file called `auth_configbn_single_account.json` and paste the MSAL Configuration that you saved earlier.
90
+
3. In **app** > **src** > **main** > **res** > **raw**, create a new JSON file called `auth_config_single_account.json` and paste the MSAL Configuration that you saved earlier.
0 commit comments