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
# Tutorial: Sign in users and call the Microsoft Graph API from a JavaScript single-page application (SPA)
18
18
19
-
In this tutorial, build a JavaScript single-page application (SPA) that signs in users and calls Microsoft Graph by using the implicit flow of OAuth 2.0. This SPA uses MSAL.js v1.x which uses the implicit grant flow for SPAs. For all new applications, use [MSAL.js v2.x and the authorization code flow with PKCE and CORS](tutorial-v2-javascript-auth-code.md), which provides more security than the implicit flow
19
+
In this tutorial, build a JavaScript single-page application (SPA) that signs in users and calls Microsoft Graph by using the implicit flow of OAuth 2.0. This SPA uses MSAL.js v1.x, which uses the implicit grant flow for SPAs. For all new applications, use [MSAL.js v2.x and the authorization code flow with PKCE and CORS](tutorial-v2-javascript-auth-code.md), which provides more security than the implicit flow
20
20
21
21
In this tutorial:
22
22
@@ -461,7 +461,7 @@ In the *JavaScriptSPA* folder, create a new *.js* file named *authPopup.js*, whi
461
461
462
462
## More information
463
463
464
-
The first time a user selects the **Sign In** button, the `signIn` function you added to the *authPopup.js* file calls MSAL's `loginPopup` function to start the sign-in process.. This method opens a pop-up window with the *Microsoft identity platform endpoint* to prompt and validate the user's credentials. After a successful sign-in, the user is redirected back to the original *index.html* page. A token is received, processed by *msal.js*, and the information contained in the token is cached. This token is known as the *ID token* and contains basic information about the user, such as the user display name. If you plan to use any data provided by this token for any purposes, make sure this token is validated by your backend server to guarantee that the token was issued to a valid user for your application.
464
+
The first time a user selects the **Sign In** button, the `signIn` function you added to the *authPopup.js* file calls MSAL's `loginPopup` function to start the sign-in process. This method opens a pop-up window with the *Microsoft identity platform endpoint* to prompt and validate the user's credentials. After a successful sign-in, the user is redirected back to the original *index.html* page. A token is received, processed by *msal.js*, and the information contained in the token is cached. This token is known as the *ID token* and contains basic information about the user, such as the user display name. If you plan to use any data provided by this token for any purposes, make sure this token is validated by your backend server to guarantee that the token was issued to a valid user for your application.
465
465
466
466
The SPA generated by this tutorial calls `acquireTokenSilent` and/or `acquireTokenPopup` to acquire an *access token* used to query the Microsoft Graph API for the user's profile info. If you need a sample that validates the ID token, refer to the following [sample application](https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/blob/main/3-Authorization-II/1-call-api/README.md"GitHub active-directory-javascript-singlepageapp-dotnet-webapi-v2 sample") in GitHub, which uses an ASP.NET web API for token validation.
467
467
@@ -546,19 +546,19 @@ Now that the code is set up, it needs to be tested.
546
546
547
547
After the browser loads your *index.html* file, select **Sign In**. You'll now be prompted to sign in with the Microsoft identity platform:
The first time that you sign in to your application, you're prompted to grant it access to your profile and sign you in. Select **Accept** to continue.
:::image type="content" source="./media/active-directory-develop-guidedsetup-javascriptspa-test/javascriptspaconsent_v2.png" alt-text="Screenshot showing the Permissions requested window." :::
556
556
557
557
### View application results
558
558
559
-
After you sign in, you can select **Read More** under your displayed name and your user profile information is returned in the Microsoft Graph API response that's displayed:
559
+
After you sign in, you can select **Read More under your displayed name, and your user profile information is returned in the Microsoft Graph API response that's displayed:
560
560
561
-
:::image type="content" source="./media/active-directory-develop-guidedsetup-javascriptspa-test/javascriptsparesults_v2.png" alt-text="Results from the Microsoft Graph API call" :::
561
+
:::image type="content" source="./media/active-directory-develop-guidedsetup-javascriptspa-test/javascriptsparesults_v2.png" alt-text="Screenshot showing the expected results from the Microsoft Graph API call" :::
562
562
563
563
### More information about scopes and delegated permissions
0 commit comments