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
#Customer intent: As an app developer, I want to learn how to get access tokens and refresh tokens by using the Microsoft identity platform endpoint so that my JavaScript app can sign in users of personal accounts, work accounts, and school accounts.
18
17
---
19
18
20
-
# Quickstart: Sign in users and get an access token in a JavaScript SPA using the Auth Code Flow
19
+
# Quickstart: Sign in users and get an access token in a JavaScript SPA using the auth code flow
21
20
22
21
> [!IMPORTANT]
23
22
> 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
23
24
+
In this quickstart, you run a code sample that demonstrates how a JavaScript single-page application (SPA) can sign in users of personal accounts, work accounts, and school accounts by using the authorization code flow. The code sample also demonstrates obtaining an access token to call a web API, in this case the Microsoft Graph API. See [How the sample works](#how-the-sample-works) for an illustration.
25
25
26
-
This quickstart uses MSAL.js 2.0 with the Authorization Code flow. To use MSAL.js 1.0 with the implicit flow, view [this quickstart](https://docs.microsoft.com/azure/active-directory/develop/quickstart-v2-javascript).
27
-
28
-
In this quickstart, you use a code sample to learn how a JavaScript single-page application (SPA) can sign in users of personal accounts, work accounts, and school accounts. A JavaScript SPA can also get an access token to call the Microsoft Graph API or any web API. See [How the sample works](#how-the-sample-works) for an illustration.
26
+
This quickstart uses MSAL.js 2.0 with the authorization code flow. For a similar quickstart that uses MSAL.js 1.0 with the implicit flow, see [Quickstart: Sign in users in JavaScript single-page apps](https://docs.microsoft.com/azure/active-directory/develop/quickstart-v2-javascript).
29
27
30
28
## Prerequisites
31
29
32
30
* Azure subscription - [Create an Azure subscription for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F)
33
31
*[Node.js](https://nodejs.org/en/download/)
34
-
*[Visual Studio Code](https://code.visualstudio.com/download) (to edit project files)
35
-
32
+
*[Visual Studio Code](https://code.visualstudio.com/download) or another code editor
36
33
37
34
> [!div renderon="docs"]
38
35
> ## Register and download your quickstart application
@@ -53,16 +50,15 @@ In this quickstart, you use a code sample to learn how a JavaScript single-page
53
50
> #### Step 1: Register your application
54
51
>
55
52
> 1. Sign in to the [Azure portal](https://portal.azure.com).
56
-
>
57
53
> 1. If your account gives you access to more than one tenant, select your account at the top right, and then set your portal session to the Azure AD tenant you want to use.
> - *\<Enter_the_Application_Id_Here>* is the **Application (client) ID** for the application you registered.
118
-
> - *\<Enter_the_Cloud_Instance_Id_Here>* is the instance of the Azure cloud. For the main or global Azure cloud, simply 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).
119
-
> - *\<Enter_the_Tenant_info_here>* is set to one of the following options:
120
-
> - If your application supports *accounts in this organizational directory*, replace this value with the **Tenant ID** or **Tenant name** (for example, *contoso.microsoft.com*).
121
-
> - If your application supports *accounts in any organizational directory*, replace this value with **organizations**.
122
-
> - 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**.
123
-
> - *\<Enter_the_Redirect_Uri_Here>* is `http://localhost:3000`
110
+
> Modify the values in the `msalConfig` section as described here:
111
+
>
112
+
> - `Enter_the_Application_Id_Here` is the **Application (client) ID** for the application you registered.
113
+
> - `Enter_the_Cloud_Instance_Id_Here` 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](authentication-national-cloud.md).
114
+
>-`Enter_the_Tenant_info_here` is set to one of the following:
115
+
>- If your application supports *accounts inthis organizational directory*, replace this value with the **Tenant ID** or **Tenant name**. For example, `contoso.microsoft.com`.
116
+
>- If your application supports *accounts in any organizational directory*, replace this value with`organizations`.
117
+
>- If your application supports *accounts in any organizational directory and personal Microsoft accounts*, replace this value with`common`. **For this quickstart**, use `common`.
118
+
>- To restrict support to *personal Microsoft accounts only*, replace this value with`consumers`.
119
+
>-`Enter_the_Redirect_Uri_Here` is `http://localhost:3000/`.
120
+
>
121
+
> The `authority` value in your *authConfig.js* should be similar to the following if you're using the main (global) Azure cloud:
> > To find the values of **Application (client) ID**, **Directory (tenant) ID**, and **Supported account types**, go to the app registration's **Overview** page in the Azure portal.
126
129
>
@@ -130,7 +133,8 @@ In this quickstart, you use a code sample to learn how a JavaScript single-page
130
133
131
134
> [!div renderon="docs"]
132
135
>
133
-
> Then, still in the same folder, edit *graphConfig.js* file to set the `graphMeEndpoint` and `graphMailEndpoint`for the `apiConfig` object.
136
+
> Then, still in the same folder, edit the *graphConfig.js* file and update the `graphMeEndpoint` and `graphMailEndpoint` values in the `apiConfig` object.
137
+
>
134
138
> ```javascript
135
139
> // Add here the endpoints for MS Graph API services you would like to use.
136
140
> const graphConfig = {
@@ -144,31 +148,37 @@ In this quickstart, you use a code sample to learn how a JavaScript single-page
144
148
> };
145
149
> ```
146
150
>
147
-
148
151
> [!div renderon="docs"]
149
152
>
150
-
>*\<Enter_the_Graph_Endpoint_Here>* is the endpoint that API calls will be made against. For the main or global Microsoft Graph API service, enter `https://graph.microsoft.com`. For more information, see [National cloud deployment](https://docs.microsoft.com/graph/deployments).
153
+
> `Enter_the_Graph_Endpoint_Here` is the endpoint that API calls will be made against. For the main (global) Microsoft Graph API service, enter `https://graph.microsoft.com/` (include the trailing forward-slash). For more information about Microsoft Graph on national clouds, see [National cloud deployment](https://docs.microsoft.com/graph/deployments).
154
+
>
155
+
> The `graphMeEndpoint` and `graphMailEndpoint` values in the *graphConfig.js* file should be similar to the following if you're using the main (global) Microsoft Graph API service:
Run the project with a web server by using [Node.js](https://nodejs.org/en/download/):
164
+
Run the project with a web server by using Node.js:
155
165
156
166
1. To start the server, run the following commands from within the project directory:
157
-
```bash
167
+
```console
158
168
npm install
159
169
npm start
160
170
```
161
171
1. Browse to `http://localhost:3000/`.
162
172
163
-
1. Select **Sign In** to start the sign-inprocess and then call Microsoft Graph API.
173
+
1. Select **Sign In** to start the sign-inprocess and then call the Microsoft Graph API.
164
174
165
175
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, your user profile information should be displayed on the page.
166
176
167
177
## More information
168
178
169
179
### How the sample works
170
180
171
-
181
+
:::image type="content" source="media/quickstart-v2-javascript-auth-code/diagram-01-auth-code-flow.png" alt-text="Diagram showing the authorization code flow for a single-page application":::
172
182
173
183
### msal.js
174
184
@@ -178,20 +188,16 @@ The MSAL.js library signs in users and requests the tokens that are used to acce
> You can replace the preceding version with the latest released version under [MSAL.js releases](https://github.com/AzureAD/microsoft-authentication-library-for-js/releases).
183
191
184
-
Alternatively, if you have Node.js installed, you can download the latest version by using the Node.js Package Manager (npm):
192
+
If you have Node.js installed, you can download the latest version by using the Node.js Package Manager (npm):
185
193
186
-
```batch
194
+
```console
187
195
npm install @azure/msal-browser
188
196
```
189
197
190
198
## Next steps
191
199
192
-
The [MSAL.js GitHub repo](https://github.com/AzureAD/microsoft-authentication-library-for-js) contains additional library documentation, a FAQ, and provides issue support.
193
-
194
-
For a more detailed step-by-step guide on building the application forthis quickstart, see:
200
+
For a more detailed step-by-step guide on building the application used inthis quickstart, see the following tutorial:
195
201
196
202
> [!div class="nextstepaction"]
197
-
> [Tutorial to sign in and call MS Graph](https://docs.microsoft.com/azure/active-directory/develop/tutorial-v2-javascript-auth-code)
203
+
> [Tutorial to sign in and call MS Graph>](https://docs.microsoft.com/azure/active-directory/develop/tutorial-v2-javascript-auth-code)
0 commit comments