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: 1-Authentication/5-sign-in-express/README.md
+83-80Lines changed: 83 additions & 80 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
page_type: sample
3
-
name: A Node.js & Express web app authenticating users against Azure AD for Customers with MSAL Node
4
-
description: This sample demonstrates a Node.js & Express web app authenticating users against Azure Active Directory Customer Identity Access Management (Azure AD for Customers) with Microsoft Authentication Library for Node (MSAL Node)
3
+
name: A Node.js & Express web app that signs in users by using Microsoft Entra External ID for Customers with MSAL Node
4
+
description: This sample demonstrates a Node.js & Express web app authenticating users by using Microsoft Entra External ID for Customers with Microsoft Authentication Library for Node (MSAL Node)
|**App integration use case**| This code samples applies to **customer app integration uses case**![Yes button](yes.png"Title"). If you're looking for a workforce integration use [Tutorial: Enable a Node.js (Express) application to sign in users by using Microsoft Entra ID](https://github.com/Azure-Samples/ms-identity-docs-code-javascript)|
44
-
|**Scenario**| Sign in users. |
45
-
|**Official documentation**| Use the instructions in this page to learn how to run this code sample or use our docs at [Microsoft Entra External ID for customers documentation](https://learn.microsoft.com/azure/active-directory/external-identities/customers/)|
44
+
|**Use case**| This code sample applies to **customer configuration uses case**![Yes button](yes.png"Title"). If you're looking for a workforce configuration use case, use [Tutorial: Enable a Node.js (Express) application to sign in users by using Microsoft Entra ID](https://github.com/Azure-Samples/ms-identity-node)|
45
+
|**Scenario**| Sign in users. You acquire an ID token by using authorization code flow with PKCE. |
46
+
|**Add sign in to your app**| Use the instructions in [Sign in users in a Node.js web app](https://learn.microsoft.com/entra/external-id/customers/tutorial-web-app-node-sign-in-prepare-tenant) to learn how to add sign in to your Node web app. |
47
+
|**Product documentation**| Explore [Microsoft Entra ID for customers documentation](https://review.learn.microsoft.com/entra/external-id/customers/)|
46
48
47
49
## Overview
48
50
49
-
This sample demonstrates a Node.js & Express web app that lets users sign-in with Azure Active Directory Consumers Identity and Access Management (Azure AD for Customers) using the [Microsoft Authentication Library for Node](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-node) (MSAL Node).
50
-
51
-
Here you'll learn about [ID Tokens](https://docs.microsoft.com/azure/active-directory/develop/id-tokens), [OIDC scopes](https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes), [single-sign on](https://docs.microsoft.com/azure/active-directory/develop/msal-js-sso), **silent requests** and more.
52
-
53
-
## Scenario
54
-
55
-
1. The client Node.js & Express web app uses the to sign-in a user and obtain a JWT [ID Token](https://aka.ms/id-tokens) from **Azure AD for Customers**.
56
-
1. The **ID Token** proves that the user has successfully authenticated against **Azure AD for Customers**.
57
-
58
-
51
+
This sample demonstrates how sign in users into a a Node.js & Express web app by using Microsoft Entra External ID for Customers. The samples utilizes the [Microsoft Authentication Library for Node](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-node) (MSAL Node) to simplify adding authentication to the Node.js web app.
|`App/authConfig.js`| Contains authentication parameters such as your tenant sub-domain, Application (Client) ID, app client secret and redirect URI. |
59
+
|`App/auth/AuthProvider.js`|The main authentication logic resides here. |
67
60
68
61
## Prerequisites
69
62
70
-
*[Node.js](https://nodejs.org/en/download/) must be installed to run this sample.
71
-
*[Visual Studio Code](https://code.visualstudio.com/download) is recommended for running and editing this sample.
63
+
*You must install in your computer [Node.js](https://nodejs.org/en/download/) to run this sample.
64
+
*We recommend [Visual Studio Code](https://code.visualstudio.com/download) for running and editing this sample.
72
65
*[VS Code Azure Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack) extension is recommended for interacting with Azure through VS Code Interface.
73
66
* An **Azure AD for Customers** tenant. For more information, see: [How to get an Azure AD for Customers tenant](https://github.com/microsoft/entra-previews/blob/PP2/docs/1-Create-a-CIAM-tenant.md)
74
-
* A user account with permissions to create applications in your **Azure AD for Customers** tenant.
or download and extract the repository *.zip* file.
87
-
88
-
> :warning: To avoid path length limitations on Windows, we recommend cloning into a directory near the root of your drive.
89
-
90
-
### Step 2: Install project dependencies
91
-
92
-
```console
93
-
cd 1-Authentication\5-sign-in-express\App
94
-
npm install
95
-
```
96
-
97
-
### Step 3: Register the sample application(s) in your tenant
98
-
99
-
There is one project in this sample. To register it, you can:
100
-
101
-
- follow the steps below for manually register your apps
102
-
- or use PowerShell scripts that:
103
-
-**automatically** creates the Azure AD applications and related objects (passwords, permissions, dependencies) for you.
104
-
- modify the projects' configuration files.
105
-
106
-
<details>
107
-
<summary>Expand this section if you want to use this automation:</summary>
108
-
109
-
> :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.
110
-
111
-
1. Ensure that you have PowerShell 7 or later installed.
112
-
1. Run the script to create your Azure AD application and configure the code of the sample application accordingly.
113
-
1. For interactive process -in PowerShell, run:
114
-
115
-
```PowerShell
116
-
cd .\AppCreationScripts\
117
-
.\Configure.ps1 -TenantId "[Optional] - your tenant id" -AzureEnvironmentName "[Optional] - Azure environment, defaults to 'Global'"
118
-
```
119
-
120
-
> 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.
121
-
122
-
> :information_source: This sample can make use of client certificates. You can use **AppCreationScripts** to register an Azure AD application with certificates. See: [How to use certificates instead of client secrets](./README-use-certificate.md)
123
-
124
-
</details>
125
-
126
-
#### Choose the Azure AD for Customers tenant where you want to create your applications
127
-
128
-
To manually register the apps, as a first step you'll need to:
129
-
130
-
1. Sign in to the [Azure portal](https://portal.azure.com).
131
-
1. If your account is present in more than one Azure AD for Customers tenant, select your profile at the top right corner in the menu on top of the page, and then **switch directory** to change your portal session to the desired Azure AD for Customers tenant.
67
+
* Microsoft Entra ID for customers tenant. If you don't already have one, [sign up for a free trial](https://aka.ms/ciam-free-trial).
68
+
69
+
## Prepare your tenant
70
+
71
+
### Register web application in your tenant
72
+
73
+
To enable your application to sign in users with Microsoft Entra, Microsoft Entra ID for customers must be made aware of the application you create. The app registration establishes a trust relationship between the app and Microsoft Entra. When you register an application, External ID generates a unique identifier known as an **Application (client) ID**, a value used to identify your app when creating authentication requests.
74
+
75
+
You can register an app in your tenant by using two methods:
76
+
77
+
* Use Microsoft Graph PowerShell to automatically register the app. This option automatically creates the applications and related objects app secrets, then modifies your project config files, so you run the app without any further action.
78
+
79
+
<details>
80
+
<summary>Expand this section if you want to use this automation:</summary>
81
+
82
+
> :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 you've prepared your environment correctly for this step.
83
+
84
+
1. Ensure that you have PowerShell 7 or later installed.
85
+
1. Run the script to create your Microsoft Entra ID application and configure the code of the sample application accordingly.
86
+
1. For interactive process in PowerShell, run:
87
+
88
+
```PowerShell
89
+
cd .\AppCreationScripts\
90
+
.\Configure.ps1 -TenantId "[Optional] - your tenant id" -AzureEnvironmentName "[Optional] - Azure environment, defaults to 'Global'"
91
+
```
92
+
93
+
> Other ways of running the scripts are described in [App Creation Scripts guide](./AppCreationScripts/AppCreationScripts.md). The scripts also provides a guide to automated application registration, configuration and removal which can help in your CI/CD scenarios.
94
+
95
+
> :information_source: This sample can make use of client certificates. You can use **AppCreationScripts** to register an Microsoft Entra ID application with certificates. For more information see, [Use client certificate for authentication in your Node.js web app instead of client secrets](https://review.learn.microsoft.com/entra/external-id/customers/how-to-web-app-node-use-certificate)
96
+
97
+
</details>
98
+
99
+
* Manually register your apps in Microsoft Entra Admin center. To do, follow these steps:
100
+
101
+
1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com) as at least an [Application Developer](~/identity/role-based-access-control/permissions-reference.md#application-developer).
102
+
1. If you have access to multiple tenants, use the **Settings** icon :::image type="icon" source="~/external-id/customers/media/common/admin-center-settings-icon.png" border="false"::: in the top menu to switch to your customer tenant from the **Directories + subscriptions** menu.
103
+
1. Browse to **Identity** >**Applications** > **App registrations**.
104
+
1. Select **+ New registration**.
105
+
1. In the **Register an application** page that appears;
106
+
107
+
1. Enter a meaningful application **Name** that is displayed to users of the app, for example *ciam-client-app*.
108
+
1. Under **Supported account types**, select **Accounts in this organizational directory only**.
109
+
110
+
1. Select **Register**.
111
+
1. The application's **Overview** pane displays upon successful registration. Record the **Application (client) ID** to be used in your application source code.
112
+
132
113
133
114
#### Create User Flows
134
115
@@ -185,6 +166,28 @@ Open the project in your IDE (like Visual Studio or Visual Studio Code) to confi
185
166
1. Find the placeholder `Enter_the_Tenant_Subdomain_Here` and replace it with the Directory (tenant) subdomain. For instance, if your tenant primary domain is `contoso.onmicrosoft.com`, use `contoso`. If you don't have your tenant domain name, learn how to [read your tenant details](https://review.learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-create-customer-tenant-portal#get-the-customer-tenant-details).
186
167
1. Find the key `Enter_the_Client_Secret_Here` and replace the existing value with the generated secret that you saved during the creation of `ciam-msal-node-webapp` copied from the Azure portal.
0 commit comments