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: 2-Authorization-I/1-call-graph/README.md
+17-12Lines changed: 17 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
page_type: sample
3
-
name: Vanilla JavaScript single-page application using MSAL.js to authorize users for calling Microsoft Graph
4
-
description: Vanilla JavaScript single-page application using MSAL.js to authorize users for calling Microsoft Graph
3
+
name: Vanilla JavaScript single-page application using MSAL.js to authenticate users to call Microsoft Graph
4
+
description: Vanilla JavaScript single-page application using MSAL.js to authenticate users and calling the Microsoft Graph API on their behalf
5
5
languages:
6
6
- javascript
7
7
products:
@@ -15,9 +15,10 @@ extensions:
15
15
- endpoint: AAD v2.0
16
16
- level: 100
17
17
- client: Vanilla JavaScript SPA
18
+
- service: Microsoft Graph
18
19
---
19
20
20
-
# Vanilla JavaScript single-page application using MSAL.js to authorize users for calling Microsoft Graph
21
+
# Vanilla JavaScript single-page application using MSAL.js to authenticate users to call Microsoft Graph
21
22
22
23
*[Overview](#overview)
23
24
*[Scenario](#scenario)
@@ -33,10 +34,12 @@ extensions:
33
34
34
35
## Overview
35
36
36
-
This sample demonstrates a Vanilla JavaScript single-page application that lets users authenticate against [Azure Active Directory](https://docs.microsoft.com/azure/active-directory/fundamentals/active-directory-whatis) (Azure AD) using the [Microsoft Authentication Library for JavaScript](https://github.com/AzureAD/microsoft-authentication-library-for-js) (MSAL.js), then acquires an **Access Token** for Microsoft Graph and calls the [Microsoft Graph API](https://docs.microsoft.com/graph/overview). In doing so, it also illustrates various authorization concepts, such as [Access Tokens](https://docs.microsoft.com/azure/active-directory/develop/access-tokens), [Authorization Code Grant](https://docs.microsoft.com/azure/active-directory/develop/v2-oauth2-auth-code-flow), [Dynamic Scopes and Incremental Consent](https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent), **silent requests** and more.
37
+
This sample demonstrates a Vanilla JavaScript single-page application that lets users authenticate against [Azure Active Directory](https://docs.microsoft.com/azure/active-directory/fundamentals/active-directory-whatis) (Azure AD) using the [Microsoft Authentication Library for JavaScript](https://github.com/AzureAD/microsoft-authentication-library-for-js) (MSAL.js), then acquires an **[Access Token](https://aka.ms/access-tokens)** for Microsoft Graph and calls the [Microsoft Graph API](https://docs.microsoft.com/graph/overview). In doing so, it also illustrates various authorization concepts, such as [Access Tokens](https://docs.microsoft.com/azure/active-directory/develop/access-tokens), [Authorization Code Grant](https://docs.microsoft.com/azure/active-directory/develop/v2-oauth2-auth-code-flow), [Dynamic Scopes and Incremental Consent](https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent), **silent requests** and more.
37
38
38
39
In addition, this sample also demonstrates how to use the [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) client with MSAL as a custom authentication provider to query the Graph API. Note that you are not required to implement a custom provider, as the v3.0 (preview) of the SDK offers a [default provider](https://github.com/microsoftgraph/msgraph-sdk-javascript/blob/dev/docs/AuthCodeMSALBrowserAuthenticationProvider.md) that implements MSAL.js.
39
40
41
+
> :information_source: To learn how applications integrate with [Microsoft Graph](https://aka.ms/graph), consider going through the recorded session:: [An introduction to Microsoft Graph for developers](https://www.youtube.com/watch?v=EBbnpFdB92A)
42
+
40
43
## Scenario
41
44
42
45
1. The client application uses the **MSAL.js** to sign-in a user and obtain a JWT **Access Token** from **Azure AD**:
@@ -93,12 +96,12 @@ or download and extract the repository *.zip* file.
93
96
94
97
There is one project in this sample. To register it, you can:
95
98
96
-
* follow the steps below for manually register your apps
97
-
* or use PowerShell scripts that:
98
-
***automatically** creates the Azure AD applications and related objects (passwords, permissions, dependencies) for you.
99
-
* modify the projects' configuration files.
99
+
- follow the steps below for manually register your apps
100
+
- or use PowerShell scripts that:
101
+
-**automatically** creates the Azure AD applications and related objects (passwords, permissions, dependencies) for you.
102
+
- modify the projects' configuration files.
100
103
101
-
<details>
104
+
<details>
102
105
<summary>Expand this section if you want to use this automation:</summary>
103
106
104
107
> :warning: If you have never used **Microsoft Graph PowerShell** before, we recommend you go through the [App Creation Scripts Guide](./AppCreationScripts/AppCreationScripts.md) once to ensure that your environment is prepared correctly for this step.
@@ -120,7 +123,7 @@ There is one project in this sample. To register it, you can:
120
123
121
124
> Other ways of running the scripts are described in [App Creation Scripts guide](./AppCreationScripts/AppCreationScripts.md). The scripts also provide a guide to automated application registration, configuration and removal which can help in your CI/CD scenarios.
122
125
123
-
</details>
126
+
</details>
124
127
125
128
#### Choose the Azure AD tenant where you want to create your applications
126
129
@@ -149,7 +152,8 @@ To manually register the apps, as a first step you'll need to:
149
152
1. Select the **Add a permission** button and then:
150
153
1. Ensure that the **Microsoft APIs** tab is selected.
151
154
1. In the *Commonly used Microsoft APIs* section, select **Microsoft Graph**
152
-
1. In the **Delegated permissions** section, select **User.Read**, **Contacts.Read** in the list. Use the search box if necessary.
155
+
* Since this app signs-in users, we will now proceed to select **delegated permissions**, which is requested by apps that signs-in users.
156
+
* In the **Delegated permissions** section, select **User.Read**, **Contacts.Read** in the list. Use the search box if necessary.
153
157
1. Select the **Add permissions** button at the bottom.
154
158
155
159
##### Configure Optional Claims
@@ -201,6 +205,7 @@ Were we successful in addressing your learning objective? Consider taking a mome
201
205
Use [Stack Overflow](http://stackoverflow.com/questions/tagged/msal) 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.
202
206
Make sure that your questions or comments are tagged with [`azure-active-directory``msal-js``ms-identity``adal``msal`].
203
207
208
+
To provide feedback on or suggest features for Azure Active Directory, visit [User Voice page](https://feedback.azure.com/d365community/forum/79b1327d-d925-ec11-b6e6-000d3a4f06a4).
204
209
</details>
205
210
206
211
## About the code
@@ -277,7 +282,7 @@ The **MSAL.js** exposes the `acquireTokenSilent()` API which is meant to retriev
277
282
278
283
### Access Token validation
279
284
280
-
Clients should treat access tokens as opaque strings, as the contents of the token are intended for the **resource only** (such as a web API or Microsoft Graph). For validation and debugging purposes, developers can decode **JWT**s (*JSON Web Tokens*) using a site like [jwt.ms](https://jwt.ms).
285
+
Clients should treat access tokens as opaque strings, as the contents of the token are intended for the **resource only** (such as a web API or Microsoft Graph). For validation and debugging purposes, developers can decode **JWT**s (*JSON Web Tokens*) using a site like [jwt.ms](https://jwt.ms). This sample does not need to validate Access Tokens it acquires.
0 commit comments