Edit

Share via

Sign in users and edit profile in a sample Node.js web application

  • Article

This guide uses a sample Node.js web application to show you how to add sign in and edit profile in a web application. The sample web application uses Microsoft Authentication Library for Node (MSAL Node) and Microsoft Graph API to complete the sign in and edit profile operation.

In this article, you complete the following tasks:

  • Register and configure web API in the Microsoft Entra admin center.
  • Create Conditional Access (CA) multifactor authentication (MFA) policy.
  • Run and test the application.

Prerequisites

Register MFA web API

In this step, you register the MFA web API application, which provides a mechanism to protect the edit profile operation with MFA.

Register a web API application

  1. Sign in to the Microsoft Entra admin center as at least an Application Developer.

  2. If you have access to multiple tenants, use the Settings icon in the top menu to switch to your external tenant from the Directories + subscriptions menu.

  3. Browse to Identity > Applications > App registrations.

  4. Select + New registration.

  5. In the Register an application page that appears, enter your application's registration information:

    1. In the Name section, enter a meaningful application name, for example mfa-api-app.

    2. Under Supported account types, select Accounts in this organizational directory only.

  6. Select Register to create the application.

  7. The application's Overview pane is displayed when registration is complete.

Configure API scopes

This API needs to expose permissions, which a client needs to acquire for calling the API:

An API needs to publish a minimum of one scope, also called Delegated Permission, for the client apps to obtain an access token for a user successfully. To publish a scope, follow these steps:

  1. From the App registrations page, select the API application that you created (such as mfa-api-app) to open its Overview page.

  2. Under Manage, select Expose an API.

  3. 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.

  4. 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.

  5. Under Scopes defined by this API, select Add a scope.

  6. Enter the following values that define a read access to the API, then select Add scope to save your changes:

    Property Value
    Scope name User.MFA
    Who can consent Admins only
    Admin consent display name Trigger MFA on User in 'mfa-api-app'
    Admin consent description Trigger MFA when User requests scope.
    State Enabled

  7. Under Manage, select Manifest to open the API manifest editor.

  8. Set accessTokenAcceptedVersion property to 2.

  9. Select Save.

Grant API permissions to the client web app

In this section, you grant API permissions to the client web app that you registered earlier (from the prerequisites). You grant two permissions:

  • User.ReadWrite - a Microsoft Graph APIs permission that enables user to update their profile.
  • api://{clientId}/User.MFA - the MFA web API permission that protects the update profile operation with MFA.

Grant Microsoft Graph API User.ReadWrite permission

  1. From the App registrations page, select the application that you created (such as ciam-client-app) to open its Overview page.

  2. Under Manage, select API permissions.

  3. Select the Microsoft APIs tab, then under Commonly used Microsoft APIs, select Microsoft Graph.

  4. Select Delegated permissions, then search for, and select User.ReadWrite from the list of permissions.

  5. Select the Add permissions button.

Grant MFA web API permission

  1. Under Manage, select API permissions.

  2. Under Configured permissions, select Add a permission.

  3. Select the APIs my organization uses tab.

  4. In the list of APIs, select the API such as mfa-api-app.

  5. Select Delegated permissions option.

  6. From the permissions list, select User.MFA.

  7. Select the Add permissions button.

  8. From the Configured permissions list, select the User.MFA permission, then copy the permission's full URI for later use. The full permission URI looks something similar to api://{clientId}/{User.MFA}.

At this point, you've assigned the permissions correctly. However, since the tenant is an external tenant, the customer users themselves can't consent to these permissions. To address this problem, you as the administrator must consent to these permissions on behalf of all the users in the tenant:

  1. Select Grant admin consent for <your tenant name>, then select Yes.

  2. Select Refresh, then verify that Granted for <your tenant name> appears under Status for both scopes.

Create CA MFA policy

Your MFA web API app that you registered earlier is the resource that you protect with MFA.

Use the steps in Add multifactor authentication to an app to create an MFA CA policy. Use the following settings when you create your policy:

  • For the Name, use MFA policy.
  • For the Target resources, select the MFA web API that you registered earlier, such as mfa-api-app.

Clone or download sample web application

To obtain the sample application, you can either clone it from GitHub or download it as a .zip file.

Download the .zip file or clone the sample web application from GitHub by running the following command:

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

Install project dependencies

  1. Open your terminal window, and change to the directory that contains the Node.js sample app:

    cd 1-Authentication\7-sign-in-express-mfa\App

  2. Run the following commands to install app dependencies:

    npm install

Configure the sample web app

To use your MFA web API app registration in the app sample:

  1. In your code editor, open App\authConfig.js file.

  2. Find the placeholder:

    • graph_end_point and replace it with the Microsoft Graph API endpoint, that's https://graph.microsoft.com/.
    • Add_your_protected_scope_here and replace it with the MFA web API scope. The values looks similar to api://{clientId}/User.MFA. {clientId} is the Application (client) ID value of the MFA web API.

Run and test web app

  1. In your terminal, run the following command::

    npm start

  2. Open your browser, then go to http://localhost:3000.

  3. Select the Sign In button, then you sign in.

  4. On the sign-in page, type your Email address, select Next, type your Password, then select Sign in. If you don't have an account, select No account? Create one link, which starts the sign-up flow.

  5. To update profile, select the Edit profile link. You see a page similar to the following screenshot:

    Screenshot of user update profile.

  6. To edit the user's Display Name, select the Edit button. If you haven't already done so, the app prompts you to complete an MFA challenge.

Related content