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
# Quickstart: Sign in users in a single-page app (SPA) and call the Microsoft Graph API using Angular
19
19
20
-
In this quickstart, you download and run a code sample that demonstrates how a JavaScript Angular single-page application (SPA) can sign in users and call Microsoft Graph using the authorization code flow. The code sample demonstrates how to get an access token to call the Microsoft Graph API or any web API.
20
+
This quickstart uses a sample Angular single-page app (SPA) to show you how to sign in users by using the [authorization code flow](/azure/active-directory/develop/v2-oauth2-auth-code-flow) with Proof Key for Code Exchange (PKCE) and call the Microsoft Graph API. The sample uses the [Microsoft Authentication Library for JavaScript](/javascript/api/@azure/msal-react) to handle authentication.
21
21
22
-
See [How the sample works](#how-the-sample-works) for an illustration.
23
-
24
-
This quickstart uses MSAL Angular v2 with the authorization code flow.
22
+
In this article you'll register a SPA in the Microsoft Entra admin center, and download a sample Angular SPA. Next, you'll run the sample application, sign in with your personal Microsoft account or a work/school account, and sign out.
25
23
26
24
## Prerequisites
27
25
28
-
* Azure subscription - [Create an Azure subscription for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F)
26
+
*An Azure account with an active subscription. If you don't already have one, [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
29
27
*[Node.js](https://nodejs.org/en/download/)
30
-
*[Visual Studio Code](https://code.visualstudio.com/download) or another code editor
31
-
32
-
## Register your quickstart application
28
+
*[Visual Studio 2022](https://visualstudio.microsoft.com/vs/) or [Visual Studio Code](https://code.visualstudio.com/)
## Register the application in the Microsoft Entra admin center
35
31
36
32
1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com) as at least an [Application Developer](../roles/permissions-reference.md#application-developer).
37
33
1. If access to multiple tenants is available, use the **Directories + subscriptions** filter :::image type="icon" source="media/common/portal-directory-subscription-filter.png" border="false"::: in the top menu to switch to the tenant in which you want to register the application.
38
34
1. Browse to **Identity** > **Applications** > **App registrations**.
39
35
1. Select **New registration**.
40
-
1.Enter a**Name** for your application. Users of your app might see this name, and you can change it later.
36
+
1.When the**Register an application** page appears, enter a name for your application, such as *identity-client-app*.
41
37
1. Under **Supported account types**, select **Accounts in any organizational directory and personal Microsoft accounts**.
42
-
1. Select **Register**. On the app **Overview** page, note the **Application (client) ID** value for later use.
38
+
1. Select **Register**.
39
+
1. The application's Overview pane displays upon successful registration. Record the **Application (client) ID** and **Directory (tenant) ID** to be used in your application source code.
40
+
41
+
## Add a redirect URI
42
+
43
43
1. Under **Manage**, select **Authentication**.
44
-
1. Under **Platform configurations**, select **Add a platform**. In the pane that opens select **Single-page application**.
44
+
1. Under **Platform configurations**, select **Add a platform**. In the pane that opens, select **Single-page application**.
45
45
1. Set the **Redirect URIs** value to `http://localhost:4200/`. This is the default port NodeJS will listen on your local machine. We’ll return the authentication response to this URI after successfully authenticating the user.
46
46
1. Select **Configure** to apply the changes.
47
47
1. Under **Platform Configurations** expand **Single-page application**.
48
-
1. Confirm that under **Grant types** Your Redirect URI is eligible for the Authorization Code Flow with PKCE.
49
-
50
-
#### Step 2: Download the project
51
-
52
-
To run the project with a web server by using Node.js, [download the core project files](https://github.com/Azure-Samples/ms-identity-javascript-angular-spa/archive/main.zip).
53
-
54
-
#### Step 3: Configure your JavaScript app
55
-
56
-
In the *src* folder, open the *app* folder then open the *app.module.ts* file and update the `clientID`, `authority`, and `redirectUri` values in the `auth` object.
storeAuthStateInCookie: isIE, // set to true for IE 11 },
70
-
});
71
-
}
72
-
```
73
-
74
-
Modify the values in the `auth` section as described here:
48
+
1. Confirm that for **Grant types**, your **Redirect URI** is eligible for the Authorization Code Flow with PKCE.
75
49
76
-
- `Enter_the_Application_Id_Here` is the **Application (client) ID** for the application you registered.
50
+
## Clone or download the sample application
77
51
78
-
To find the value of **Application (client) ID**, go to the app registration's **Overview** page.
79
-
- `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).
80
-
-`Enter_the_Tenant_info_here` is set to one of the following:
81
-
- If your application supports *accounts inthis organizational directory*, replace this value with the **Tenant ID** or **Tenant name**. For example, `contoso.microsoft.com`.
52
+
To obtain the sample application, you can either clone it from GitHub or download it as a .zip file.
82
53
83
-
To find the value of the **Directory (tenant) ID**, go to the app registration's **Overview** page.
84
-
- If your application supports *accounts in any organizational directory*, replace this value with `organizations`.
85
-
- If your application supports *accounts in any organizational directory and personal Microsoft accounts*, replace this value with `common`. **For this quickstart**, use `common`.
86
-
- To restrict support to *personal Microsoft accounts only*, replace this value with `consumers`.
54
+
- To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:
87
55
88
-
To find the value of **Supported account types**, go to the app registration's **Overview** page.
89
-
-`Enter_the_Redirect_Uri_Here` is `http://localhost:4200/`.
Scroll down in the same file and update the `graphMeEndpoint`.
98
-
- Replace the string `Enter_the_Graph_Endpoint_Herev1.0/me` with `https://graph.microsoft.com/v1.0/me`
99
-
- `Enter_the_Graph_Endpoint_Herev1.0/me` 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, see the [documentation](/graph/deployments).
64
+
1. In your IDE, open the project folder, *ms-identity-docs-code-javascript/angular-spa*, containing the sample.
65
+
1. Open *src/app/app.module.ts* and replace the file contents with the following snippet:
100
66
101
-
```javascript
102
-
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
103
-
const protectedResourceMap = new Map<string, Array<string>>();
* `TenantId` - The identifier of the tenant where the application is registered. Replace the text in quotes with the **Directory (tenant) ID** that was recorded earlier from the overview page of the registered application.
70
+
* `ClientId` - The identifier of the application, also referred to as the client. Replace the text in quotes with the **Directory (tenant) ID** value that was recorded earlier from the overview page of the registered application.
71
+
* `RedirectUri` - The **Redirect URI** of the application. If necessary, replace the text in quotes with the redirect URI that was recorded earlier from the overview page of the registered application.
112
72
113
-
#### Step 4: Run the project
73
+
## Run the application and sign in
114
74
115
75
Run the project with a web server by using Node.js:
116
76
117
77
1. To start the server, run the following commands from within the project directory:
78
+
118
79
```console
119
80
npm install
120
81
npm start
121
82
```
122
-
1. Browse to `http://localhost:4200/`.
123
-
124
-
1. Select **Login** to start the sign-in process and then call the Microsoft Graph API.
125
-
126
-
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, click the **Profile** button to display your user information on the page.
127
-
128
-
## More information
129
-
130
-
### How the sample works
131
-
132
-
133
-
134
-
### msal.js
83
+
1. Copy the https URL that appears in the terminal, for example, `https://localhost:4200`, and paste it into a browser. We recommend using a private or incognito browser session.
84
+
1. Follow the steps and enter the necessary details to sign in with your Microsoft account. You'll be requested an email address so a one time passcode can be sent to you. Enter the code when prompted.
85
+
1. The application will request permission to maintain access to data you have given it access to, and to sign you in and read your profile. Select **Accept**.
86
+
1. The following screenshot appears, indicating that you have signed in to the application and have accessed your profile details from the Microsoft Graph API.
135
87
136
-
The MSAL.js library signs in users and requests the tokens that are used to access an API that's protected by the Microsoft identity platform.
88
+
:::image type="content" source="./media/quickstarts/angular-spa/quickstart-angular-spa-sign-in.png" alt-text="Screenshot of JavaScript App depicting the results of the API call.":::
137
89
138
-
If you have Node.js installed, you can download the latest version by using the Node.js Package Manager (npm):
1. Find the **Sign out** link in the top right corner of the page, and select it.
93
+
1. You'll be prompted to pick an account to sign out from. Select the account you used to sign in.
94
+
1. A message appears indicating that you have signed out.
143
95
144
-
## Next steps
96
+
## Related content
145
97
146
-
For a detailed step-by-step guide on building the auth code flow application using vanilla JavaScript, see the following tutorial:
98
+
- [Quickstart: Protect an ASP.NET Core web API with the Microsoft identity platform](./quickstart-web-api-aspnet-core-protect-api.md)
147
99
148
-
> [!div class="nextstepaction"]
149
-
> [Tutorial to sign in users and call Microsoft Graph](tutorial-v2-javascript-auth-code.md)
100
+
- Learn more by building this Angular SPA from scratch with the following series - [Tutorial: Sign in users and call Microsoft Graph](./tutorial-v2-angular-auth-code.md)
0 commit comments