Edit

Share via

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

  • Article

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

Prerequisites

Register and configure EditProfileService app

In this step, you register the EditProfileService app (the API app) app, which provides a mechanism to protect the edit profile operation by requiring MFA.

Register EditProfileService app

  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 edit-profile-service.

    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. Record the Application (client) ID for use in your application source code.

Configure EditProfileService app API scopes

The EditProfileService app 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 edit-profile-service) 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 EditProfileService.ReadWrite
    Who can consent Admins only
    Admin consent display name Client edits profile through edit profile service
    Admin consent description The scope to allow client web app to edit profile through calling the edit profile service.
    State Enabled

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

  8. Set accessTokenAcceptedVersion property to 2.

  9. Select Save.

Add app client secret

Create a client secret for the registered application. The application uses the client secret to prove its identity when it requests for tokens.

  1. From the App registrations page, select the application that you created (such as edit-profile-service) to open its Overview page.
  2. Under Manage, select Certificates & secrets.
  3. Select New client secret.
  4. In the Description box, enter a description for the client secret (for example, edit-profile-service client secret).
  5. Under Expires, select a duration for which the secret is valid (per your organizations security rules), and then select Add.
  6. Record the secret's Value. You'll use this value for configuration in a later step. The secret value won't be displayed again, and isn't retrievable by any means, after you navigate away from the Certificates and secrets. Make sure you record it.

Grant User.ReadWrite permission to the EditProfileService app

User.ReadWrite is a Microsoft Graph API permission that enables a user to update their profile. To grant the User.ReadWrite permission to the EditProfileService app, use the following steps:

  1. From the App registrations page, select the application that you created (such as edit-profile-service) 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.

You've assigned the User.ReadWrite permissions correctly. However, since the tenant is an external tenant, the customer users themselves can't consent to these permissions. As the administrator of the tenant, you must consent to this permission 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.

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

Grant your client web app the EditProfileService.ReadWrite permission. This permission is exposed by the EditProfileService app, and it protects the update profile operation with MFA. To grant the EditProfileService.ReadWrite permission to client web app, use the following steps:

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

  2. Under Manage, select API permissions.

  3. Under Configured permissions, select Add a permission.

  4. Select the APIs my organization uses tab.

  5. In the list of APIs, select the API such as edit-profile-service.

  6. Select Delegated permissions option.

  7. From the permissions list, select EditProfileService.ReadWrite.

  8. Select the Add permissions button.

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

You've assigned the *EditProfileService.ReadWrite permissions correctly. However, since the tenant is an external tenant, the customer users themselves can't consent to these permissions. As the administrator of the tenant, you must consent to this permission 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 EditProfileService app that you registered earlier is the resource that you protect with MFA.

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

  • For the Name, use MFA policy.
  • For the Target resources, select the EditProfileService app that you registered earlier, such as edit-profile-service.

Clone or download sample web app

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

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

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

Configure the sample web app

This code sample contains two apps, the client app and the service/API app. You need to update these apps to use your external tenant settings. To do so, use the following steps:

  1. In your code editor, open 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js file, then 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 EditProfileService app scope. The value looks similar to api://{clientId}/EditProfileService.ReadWrite. {clientId} is the Application (client) ID value of the EditProfileService you registered earlier.

  2. In your code editor, open 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js file, then find the placeholder:

    • Enter_the_Tenant_Subdomain_Here and replace it with Directory (tenant) subdomain. For example, if your tenant primary domain is contoso.onmicrosoft.com, use contoso. If you don't have your tenant name, learn how to read your tenant details.
    • Enter_the_Tenant_ID_Here and replace it with Tenant ID. If you don't have your Tenant ID, learn how to read your tenant details.
    • Enter_the_Edit_Profile_Service_Application_Id_Here and replace it with is the Application (client) ID value of the EditProfileService you registered earlier.
    • Enter_the_Client_Secret_Here and replace it with the EditProfileService app secret value you copied earlier.
    • graph_end_point and replace it with the Microsoft Graph API endpoint, that's https://graph.microsoft.com/.

Install project dependencies and run app

To test your app, install project dependencies for both the client app and the service/API app, then run them.

  1. To run the client app, open your terminal window, then run the following commands:

    cd 1-Authentication\7-edit-profile-with-mfa-express\App
npm install
npm start

  2. To run the edit service/API app, change directory to the edit service/API app, 1-Authentication\7-edit-profile-with-mfa-express\Api, then run the following commands:

    npm install
npm start

  3. Open your browser, then go to http://localhost:3000. If you experience SSL certificate errors, create a .env file, then add the following configuration:

    # Use this variable only in the development environment. 
# Remove the variable when you move the app to the production environment.
NODE_TLS_REJECT_UNAUTHORIZED='0'

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

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

  6. To update profile, select the Profile editing link. You see a page similar to the following screenshot:

    Screenshot of user update profile.

  7. To edit profile, select the Edit Profile button. If you haven't already done so, the app prompts you to complete an MFA challenge.

  8. Make changes to any of the profile details, then select Save button.

Related content