Merge pull request #246189 from kengaderdus/convert-node-web-app-content-to-tutorial

[CIAM] Convert node web app content to tutorial.

Author: v-regandowner

.openpublishing.redirection.active-directory.json

@@ -1600,6 +1600,26 @@
       "redirect_url": "/azure/active-directory/external-identities/customers/web-app-quickstart-portal-node-js-ciam",
       "redirect_document_id": true
     },
+    {
+      "source_path_from_root": "/articles/active-directory/external-identities/customers/how-to-web-app-node-sign-in-overview.md",
+      "redirect_url": "/azure/active-directory/external-identities/customers/tutorial-web-app-node-sign-in-prepare-tenant",
+      "redirect_document_id": true 
+    },
+    {
+      "source_path_from_root": "/articles/active-directory/external-identities/customers/how-to-web-app-node-sign-in-prepare-tenant.md",
+      "redirect_url": "/azure/active-directory/external-identities/customers/tutorial-web-app-node-sign-in-prepare-tenant",
+      "redirect_document_id": false 
+    },
+    {
+      "source_path_from_root": "/articles/active-directory/external-identities/customers/how-to-web-app-node-sign-in-prepare-app.md",
+      "redirect_url": "/azure/active-directory/external-identities/customers/tutorial-web-app-node-sign-in-prepare-tenant",
+      "redirect_document_id": false 
+    },
+    {
+      "source_path_from_root": "/articles/active-directory/external-identities/customers/how-to-web-app-node-sign-in-sign-in-out.md",
+      "redirect_url": "/azure/active-directory/external-identities/customers/tutorial-web-app-node-sign-in-prepare-tenant",
+      "redirect_document_id": false
+    },
     {
       "source_path_from_root": "/articles/active-directory/external-identities/customers/how-to-daemon-node-call-api-overview.md",
       "redirect_url": "/azure/active-directory/external-identities/customers/tutorial-daemon-node-call-api-prepare-tenant",

articles/active-directory/external-identities/customers/how-to-register-ciam-app.md

@@ -24,7 +24,7 @@ During app registration, you specify the redirect URI. The redirect URI is the e
 
 Azure AD for customers supports authentication for various modern application architectures, for example web app or single-page app. The interaction of each application type with the customer tenant is different, therefore, you must specify the type of application you want to register.
 
-In this article, you’ll learn how to register an application in your customer tenant.
+In this article, you learn how to register an application in your customer tenant.
 
 ## Prerequisites
 
@@ -34,9 +34,11 @@ In this article, you’ll learn how to register an application in your customer
 ## Choose your app type
 
 # [Single-page app (SPA)](#tab/spa)
-## How to register your Single-page app?
+## Register your Single-page app
 
-The following steps show you how to register your app in the admin center:
+Azure AD for customers supports authentication for Single-page apps (SPAs).
+
+The following steps show you how to register your SPA in the Microsoft Entra admin center:
 
 1.  Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com/).
 
@@ -54,7 +56,7 @@ The following steps show you how to register your app in the admin center:
 
 1. In the **Register an application page** that appears, enter your application's registration information:
 
-    1. In the **Name** section, enter a meaningful application name that will be displayed to users of the app, for example *ciam-client-app*.
+    1. In the **Name** section, enter a meaningful application name that is displayed to users of the app, for example *ciam-client-app*.
 
     1. Under **Supported account types**, select **Accounts in this organizational directory only**.
 
@@ -66,12 +68,15 @@ The following steps show you how to register your app in the admin center:
 
 [!INCLUDE [add about redirect URI](../customers/includes/register-app/about-redirect-url.md)]  
 
-### Add delegated permissions
+### Grant delegated permissions
 This app signs in users. You can add delegated permissions to it, by following the steps below:
 
 [!INCLUDE [grant permision for signing in users](../customers/includes/register-app/grant-api-permission-sign-in.md)] 
 
-### To call an API follow the steps below (optional):
+### Grant API permissions (optional):
+
+If your SPA needs to call an API, you must grant your SPA API permissions so it can call the API. You must also [register the web API](how-to-register-ciam-app.md?tabs=webapi) that you need to call. 
+
 [!INCLUDE [grant permisions for calling an API](../customers/includes/register-app/grant-api-permission-call-api.md)] 
 
 If you'd like to learn how to expose the permissions by adding a link, go to the [Web API](how-to-register-ciam-app.md?tabs=webapi) section.
@@ -82,9 +87,11 @@ If you'd like to learn how to expose the permissions by adding a link, go to the
 - [Sign in users in a sample vanilla JavaScript single-page app](how-to-single-page-app-vanillajs-sample-sign-in.md) 
 
 # [Web app](#tab/webapp)
-## How to register your Web app?
+## Register your Web app
+
+Azure AD for customers supports authentication for web apps.
 
-The following steps show you how to register your app in the admin center:
+The following steps show you how to register your web app in the Microsoft Entra admin center:
 
 1.  Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com/).
 
@@ -102,11 +109,11 @@ The following steps show you how to register your app in the admin center:
 
 1. In the **Register an application page** that appears, enter your application's registration information:
 
-    1. In the **Name** section, enter a meaningful application name that will be displayed to users of the app, for example *ciam-client-app*.
+    1. In the **Name** section, enter a meaningful application name that is displayed to users of the app, for example *ciam-client-app*.
 
     1. Under **Supported account types**, select **Accounts in this organizational directory only**.
 
-	1. Under **Redirect URI (optional)**, select **Web** and then, in the URL box, enter `http://localhost:3000/`.
+	1. Under **Redirect URI (optional)**, select **Web** and then, in the URL box, enter a URL such as, `http://localhost:3000/`.
 
 1. Select **Register**.
 
@@ -122,7 +129,10 @@ This app signs in users. You can add delegated permissions to it, by following t
 ### Create a client secret 
 [!INCLUDE [add a client secret](../customers/includes/register-app/add-app-client-secret.md)]
 
-### To call an API follow the steps below (optional):
+### Grant API permissions (optional)
+
+If your web app needs to call an API, you must grant your web app API permissions so it can call the API. You must also [register the web API](how-to-register-ciam-app.md?tabs=webapi) that you need to call.
+
 [!INCLUDE [grant permissions for calling an API](../customers/includes/register-app/grant-api-permission-call-api.md)] 
 
 ## Next steps
@@ -131,15 +141,16 @@ This app signs in users. You can add delegated permissions to it, by following t
 - [Sign in users in a sample Node.js web app](how-to-web-app-node-sample-sign-in.md) 
 
 # [Web API](#tab/webapi)
-## How to register your Web API?
+## Register your Web API
+
 
 [!INCLUDE [register app](../customers/includes/register-app/register-api-app.md)]
 
 ### Expose permissions
 
 [!INCLUDE [expose permissions](../customers/includes/register-app/add-api-scopes.md)]
 
-### To add app roles follow the steps below (optional):
+### Add app roles
 
 [!INCLUDE [configure app roles](../customers/includes/register-app/add-app-role.md)]
 
@@ -148,9 +159,9 @@ This app signs in users. You can add delegated permissions to it, by following t
 - [Create a sign-up and sign-in user flow](how-to-user-flow-sign-up-sign-in-customers.md) 
 
 # [Desktop or Mobile app](#tab/desktopmobileapp)
-## How to register your Desktop or Mobile app?
+## Register your Desktop or Mobile app
 
-The following steps show you how to register your app in the admin center:
+The following steps show you how to register your app in the Microsoft Entra admin center:
 
 1.  Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com/).
 
@@ -168,7 +179,7 @@ The following steps show you how to register your app in the admin center:
 
 1. In the **Register an application page** that appears, enter your application's registration information:
 
-    1. In the **Name** section, enter a meaningful application name that will be displayed to users of the app, for example *ciam-client-app*.
+    1. In the **Name** section, enter a meaningful application name that is displayed to users of the app, for example *ciam-client-app*.
 
     1. Under **Supported account types**, select **Accounts in this organizational directory only**.
 
@@ -181,7 +192,9 @@ The following steps show you how to register your app in the admin center:
 ### Add delegated permissions
 [!INCLUDE [grant permission for signing in users](../customers/includes/register-app/grant-api-permission-sign-in.md)]
 
-### To call an API follow the steps below (optional):
+### Grant API permissions (optional)
+
+If your mobile app needs to call an API, you must grant your mobile app API permissions so it can call the API. You must also [register the web API](how-to-register-ciam-app.md?tabs=webapi) that you need to call.
 [!INCLUDE [grant permissions for calling an API](../customers/includes/register-app/grant-api-permission-call-api.md)] 
 
 ## Next steps
@@ -190,12 +203,13 @@ The following steps show you how to register your app in the admin center:
 - [Sign in users in a sample Electron desktop app](how-to-desktop-app-electron-sample-sign-in.md) 
 
 # [Daemon app](#tab/daemonapp)
-## How to register your Daemon app?
+## Register your Daemon app
 
 [!INCLUDE [register daemon app](../customers/includes/register-app/register-daemon-app.md)]
 
-### To call an API follow the steps below (optional)
-A daemon app signs-in as itself using the [OAuth 2.0 client credentials flow](/azure/active-directory/develop/v2-oauth2-client-creds-grant-flow), you add application permissions, which is required by apps that authenticate as themselves:
+### Grant API permissions
+
+A daemon app signs-in as itself using the [OAuth 2.0 client credentials flow](/azure/active-directory/develop/v2-oauth2-client-creds-grant-flow). You grant application permissions (app roles), which is required by apps that authenticate as themselves. You must also [register the web API](how-to-register-ciam-app.md?tabs=webapi) that your daemon app needs to call. 
 
 [!INCLUDE [register daemon app](../customers/includes/register-app/grant-api-permissions-app-permissions.md)]
 
@@ -205,7 +219,7 @@ A daemon app signs-in as itself using the [OAuth 2.0 client credentials flow](/a
 - [Create a sign-up and sign-in user flow](how-to-user-flow-sign-up-sign-in-customers.md)
 
 # [Microsoft Graph API](#tab/graphapi)
-## How to register a Microsoft Graph API application?
+## Register a Microsoft Graph API application
 [!INCLUDE [register client app](../customers/includes/register-app/register-client-app-common.md)]
 
 ### Grant API Access to your application
@@ -215,4 +229,4 @@ A daemon app signs-in as itself using the [OAuth 2.0 client credentials flow](/a
 [!INCLUDE [add app client secret](../customers/includes/register-app/add-app-client-secret.md)]
 
 ## Next steps
-- Learn more how to manage [Azure Active Directory for customers resources with Microsoft Graph](microsoft-graph-operations.md)
+- Learn more how to manage [Azure Active Directory for customers resources with Microsoft Graph](microsoft-graph-operations.md)

articles/active-directory/external-identities/customers/how-to-web-app-node-sign-in-call-api-call-api.md

@@ -201,4 +201,4 @@ You may want to:
 
 - [Configure sign-in with Google](how-to-google-federation-customers.md)
 
-- [Sign in users in your own Node.js web application](how-to-web-app-node-sign-in-overview.md)
+- [Sign in users in your own Node.js web application](tutorial-web-app-node-sign-in-prepare-tenant.md)

articles/active-directory/external-identities/customers/how-to-web-app-node-sign-in-call-api-prepare-tenant.md

@@ -10,7 +10,7 @@ ms.service: active-directory
 ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
-ms.date: 07/26/2023
+ms.date: 07/28/2023
 ms.custom: developer, devx-track-js
 ---
 

articles/active-directory/external-identities/customers/how-to-web-app-node-sign-in-call-api-sign-in-acquire-access-token.md

@@ -119,7 +119,7 @@ The `/` route is the entry point to the application. It renders the `views/index
 
 1. In your code editor, open *auth/AuthProvider.js* file, then add the code from [AuthProvider.js](https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial/blob/main/2-Authorization/4-call-api-express/App/auth/AuthProvider.js) to it.
 
-The `/signin`, `/signout` and `/redirect` routes are defined in the *routes/auth.js* file, but their logic live in *auth/AuthProvider.js* file.
+The `/signin`, `/signout` and `/redirect` routes are defined in the *routes/auth.js* file, but you implement their logic in *auth/AuthProvider.js* file.
 
 - The `login` method handles`/signin` route:
     
@@ -259,7 +259,7 @@ In your code editor, open *routes/users.js* file, then add the following code:
         
         module.exports = router;
 ```
-If the user is authenticated, the `/id` route displays ID token claims by using the `views/id.hbs` view. You added this view earlier in [Build app UI components](how-to-web-app-node-sign-in-prepare-app.md#build-app-ui-components).
+If the user is authenticated, the `/id` route displays ID token claims by using the `views/id.hbs` view. You added this view earlier in [Build app UI components](tutorial-web-app-node-sign-in-prepare-app.md#build-app-ui-components).
 To extract a specific ID token claim, such as *given name*: 
 ```javascript
     const givenName = req.session.account.idTokenClaims.given_name

articles/active-directory/external-identities/customers/how-to-web-app-node-sign-in-overview.md

@@ -168,7 +168,7 @@ Once you associate your app registration with the certificate, you need to updat
     });
     //...
     ```
-1. Use the steps in [Run and test the web app](how-to-web-app-node-sign-in-sign-in-out.md#run-and-test-the-web-app) to test your app.
+1. Use the steps in [Run and test the web app](tutorial-web-app-node-sign-in-sign-out.md#run-and-test-the-web-app) to test your app.
 
 ## Use a self-signed certificate directly from Azure Key Vault
 
@@ -261,7 +261,7 @@ You can use your existing certificate directly from Azure Key Vault:
     }
     ``` 
 
-1. Use the steps in [Run and test the web app](how-to-web-app-node-sign-in-sign-in-out.md#run-and-test-the-web-app) to test your app.
+1. Use the steps in [Run and test the web app](tutorial-web-app-node-sign-in-sign-out.md#run-and-test-the-web-app) to test your app.
 
 ## Next steps
 

articles/active-directory/external-identities/customers/how-to-web-app-node-use-certificate.md

@@ -28,7 +28,7 @@ In this article, you learn how to receive user roles or group membership or both
 
 - If you've not done so, complete the steps in [Using role-based access control for applications](how-to-use-app-roles-customers.md) article. This article shows you how to create roles for your application, how to assign users and groups to those roles, how to add members to a group and how to add a group claim to a to security token. Learn more about [ID tokens](../../develop/id-tokens.md) and [access tokens](../../develop/access-tokens.md). 
 
-- If you've not done so, complete the steps in [Sign in users in your own Node.js web application](how-to-web-app-node-sign-in-overview.md)
+- If you've not done so, complete the steps in [Sign in users in your own Node.js web application](tutorial-web-app-node-sign-in-prepare-tenant.md)
 
 ## Receive groups and roles claims in your Node.js web app 
 

articles/active-directory/external-identities/customers/how-to-web-app-role-based-access-control.md

@@ -13,15 +13,21 @@ An API needs to publish a minimum of one scope, also called [Delegated Permissio
 1. Under **Manage**, select **Expose an API**.
 1. At the top of the page, next to **Application ID URI**, select the **Add** link to generate a URI that is unique for this app.
 1. Accept the proposed Application ID URI such as `api://{clientId}`, and select **Save**. When your web application requests an access token for the web API, it adds the URI as the prefix for each scope that you define for the API.
+
 1. Under **Scopes defined by this API**, select **Add a scope**.
-    
-    1. For **Scope name**, enter *ToDoList.Read*.
-    1. For **Admin consent display name**, enter *Read users ToDo list using the 'TodoListApi'*.
-    1. For **Admin consent description**, enter *Allow the app to read the user's ToDo list using the 'TodoListApi'*.
-    1. Keep **State** as **Enabled** and select **Add scope**.
+
+1. Enter the following values that define a read access to the API, then select **Add scope** to save your changes:
 
 
-1. Select **Add a scope** again, and enter the following values for the second scope that defines read and write access to the API. Select **Add scope** to save your changes:
+    | Property | Value |
+    |----------|-------|
+    | Scope name | *ToDoList.Read* |
+    | Who can consent | **Admins only** |
+    | Admin consent display name | *Read users ToDo list using the 'TodoListApi'* |
+    | Admin consent description | *Allow the app to read the user's ToDo list using the 'TodoListApi'*. |
+    | State | **Enabled** |
+    
+1. Select **Add a scope** again, and enter the following values that define a read and write access scope to the API. Select **Add scope** to save your changes:
 
     | Property | Value |
     |----------|-------|