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-v2-javascript.md
+74-33Lines changed: 74 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -47,7 +47,7 @@ You will need the following setup for this quickstart:
47
47
>
48
48
> 1. Sign in to the [Azure portal](https://portal.azure.com) using either a work or school account, or a personal Microsoft account.
49
49
> 1. If your account gives you access to more than one tenant, select your account in the top right corner, and set your portal session to the desired Azure AD tenant.
50
-
> 1. Go to the new [Azure portal - App registrations](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/applicationsListBlade/quickStartType/JavascriptSpaQuickstartPage/sourceType/docs) pane.
50
+
> 1. Go to the new [Azure portal - App registrations](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade/quickStartType/JavascriptSpaQuickstartPage/sourceType/docs) pane.
51
51
> 1. Enter a name for your application and click **Register**.
52
52
> 1. Follow the instructions to download and automatically configure your new application for you in one click.
53
53
>
@@ -79,27 +79,32 @@ You will need the following setup for this quickstart:
79
79
#### Step 2: Download the project
80
80
81
81
You can choose one of these options suitable to your development environment.
82
-
*[Download the core project files - for a web server, such as Node.js](https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2/archive/quickstart.zip)
83
-
*[Download the Visual Studio project](https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2/archive/vsquickstart.zip)
82
+
*[Download the core project files](https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2/archive/quickstart.zip), to run with a web server using Node.js. To open the files, use an editor like [Visual Studio Code](https://code.visualstudio.com/).
83
+
84
+
* (Optional) [Download the Visual Studio project](https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2/archive/vsquickstart.zip), to run with the IIS server. Extract the zip file to a local folder, for example, **C:\Azure-Samples**.
85
+
84
86
85
-
Extract the zip file to a local folder, for example, **C:\Azure-Samples**.
86
-
To open the files in the folder, use an editor like [Visual Studio Code](https://code.visualstudio.com/).
87
87
88
88
#### Step 3: Configure your JavaScript app
89
89
90
90
> [!div renderon="docs"]
91
-
> Under the folder *JavaScriptSPA*, edit `index.html` and set the `clientID` and `authority` values under `applicationConfig`.
91
+
> Under the folder *JavaScriptSPA*, edit `index.html` and set the `clientID` and `authority` values under `msalConfig`.
92
92
93
93
> [!div class="sxs-lookup" renderon="portal"]
94
-
> Under the folder *JavaScriptSPA*, edit `index.html` and replace `applicationConfig` with:
94
+
> Under the folder *JavaScriptSPA*, edit `index.html` and replace `msalConfig` with:
> -`Enter_the_Tenant_Info_Here` - is set to one of the following options:
109
114
> - If your application supports **Accounts in this organizational directory**, replace this value with the **Tenant Id** or **Tenant name** (for example, contoso.microsoft.com)
110
115
> - If your application supports **Accounts in any organizational directory**, replace this value with `organizations`
111
-
> - If your application supports **Accounts in any organizational directory and personal Microsoft accounts**, replace this value with `common`
116
+
> - 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`.
112
117
>
113
118
> > [!TIP]
114
119
> > 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.
120
+
>
115
121
116
122
#### Step 4: Run the project
117
123
@@ -139,43 +145,65 @@ After the browser loads the application, click **Sign In**. The first time that
139
145
MSAL is the library used to sign in users and request tokens used to access an API protected by Microsoft identity platform. The quickstart's *index.html* contains a reference to the library:
> You can replace the version above with the latest released version under [MSAL.js releases](https://github.com/AzureAD/microsoft-authentication-library-for-js/releases).
152
+
144
153
145
-
Alternatively, if you have Node installed, you can download it through npm:
154
+
Alternatively, if you have Node installed, you can download the latest preview version through npm:
146
155
147
156
```batch
148
-
npm install msal
157
+
npm install msal@preview
149
158
```
150
159
151
160
### MSAL initialization
152
161
153
162
The quickstart code also shows how to initialize the library:
154
163
155
164
```javascript
156
-
var myMSALObj =newMsal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, acquireTokenRedirectCallBack, {storeAuthStateInCookie:true, cacheLocation:"localStorage"});
var myMSALObj =newMsal.UserAgentApplication(msalConfig);
157
177
```
158
178
159
179
> |Where ||
160
180
> |---------|---------|
161
181
> |`ClientId`|Application ID from the application registered in the Azure portal|
162
-
> |`authority`|It is the authority URL. Passing *null* sets the default authority to `https://login.microsoftonline.com/common`. If your app is single-tenant (targeting accounts in one directory only), set this value to `https://login.microsoftonline.com/<tenant name or ID>`|
163
-
> |`tokenReceivedCallback`| Callback method called after the authentication redirects back to the app. Here, `acquireTokenRedirectCallBack` is passed. This is null if using loginPopup.|
164
-
> |`options`|A collection of optional parameters. In this case `storeAuthStateInCookie` and `cacheLocation` are optional configuration. See the [wiki](https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL-basics#configuration-options) for more details on the options. |
182
+
> |`authority`| (Optional) It is the authority URL as described in the configuration section above to support account types. The default authority is `https://login.microsoftonline.com/common`. |
183
+
> |`cacheLocation`| (Optional) This sets the browser storage for the auth state. The default is sessionStorage. |
184
+
> |`storeAuthStateInCookie`| (Optional) The library will store the auth request state required for validation of the auth flows in the browser cookies. This is set for IE and Edge browsers to mitigate certain [known issues](https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Known-issues-on-IE-and-Edge-Browser#issues). |
185
+
186
+
See the [wiki](https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL-basics#configuration-options) for more details on the configurable options available.
165
187
166
188
### Sign in users
167
189
168
190
The following code snippet shows how to sign in users:
> |`scopes`| (Optional) Contains scopes being requested for user consent at login time. For example, `[ "user.read" ]` for Microsoft Graph or `[ "<Application ID URL>/scope" ]` for custom Web APIs ( that is, `api://<Application ID>/access_as_user` ). Here, `applicationConfig.graphScopes` is passed. |
206
+
> |`scopes`| (Optional) Contains scopes being requested for user consent at login time. For example, `[ "user.read" ]` for Microsoft Graph or `[ "<Application ID URL>/scope" ]` for custom Web APIs ( that is, `api://<Application ID>/access_as_user` ). |
179
207
180
208
> [!TIP]
181
209
> Alternatively, you may want to use the `loginRedirect` method to redirect the current page to the sign-in page instead of a popup window.
@@ -189,14 +217,21 @@ MSAL has three methods used to acquire tokens: `acquireTokenRedirect`, `acquireT
189
217
The `acquireTokenSilent` method handles token acquisitions and renewal without any user interaction. After the `loginRedirect` or `loginPopup` method is executed for the first time, `acquireTokenSilent` is the method commonly used to obtain tokens that are used to access protected resources for subsequent calls. Calls to request or renew tokens are made silently.
> |`scopes`| Contains scopes being requested to be returned in the access token for API. For example, `[ "user.read" ]` for Microsoft Graph or `[ "<Application ID URL>/scope" ]` for custom Web APIs (that is, `api://<Application ID>/access_as_user`). Here, `applicationConfig.graphScopes` is passed.|
234
+
> |`scopes`| Contains scopes being requested to be returned in the access token for API. For example, `[ "user.read" ]` for Microsoft Graph or `[ "<Application ID URL>/scope" ]` for custom Web APIs (that is, `api://<Application ID>/access_as_user`).|
200
235
201
236
#### Get a user token interactively
202
237
@@ -205,18 +240,24 @@ There are situations where you need to force users to interact with Microsoft id
205
240
* Your application is requesting access to additional resource scopes that the user needs to consent to
206
241
* Two factor authentication is required
207
242
208
-
The usual recommended pattern for most applications is to call `acquireTokenSilent` first, then catch the exception and then call `acquireTokenRedirect` (or `acquireTokenPopup`) to start an interactive request.
243
+
The usual recommended pattern for most applications is to call `acquireTokenSilent` first, then catch the exception and then call `acquireTokenPopup` (or `acquireTokenRedirect`) to start an interactive request.
209
244
210
-
Calling the `acquireTokenPopup(scope)` results in a popup window to sign in (or `acquireTokenRedirect(scope)` results in redirecting users to the Microsoft identity platform endpoint) where users need to interact by either confirming their credentials, giving the consent to the required resource, or completing the two factor authentication.
245
+
Calling the `acquireTokenPopup` results in a popup window to sign in (or `acquireTokenRedirect` results in redirecting users to the Microsoft identity platform endpoint) where users need to interact by either confirming their credentials, giving the consent to the required resource, or completing the two factor authentication.
> This quickstart uses the `loginRedirect` and `acquireTokenRedirect` methods when the browser used is Internet Explorer due to a [known issue](https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Known-issues-on-IE-and-Edge-Browser#issues) related to handling of popup windows by Internet Explorer browser.
260
+
> This quickstart uses the `loginRedirect` and `acquireTokenRedirect` methods when the browser used is Internet Explorer due to a [known issue](https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Known-issues-on-IE-and-Edge-Browser#issues) related to handling of popup windows by Internet Explorer browser.
0 commit comments