Editar

Compartir a través de

Tutorial: Prepare a JavaScript single-page application for authentication

  • Artículo

Applies to: Green circle with a white check mark symbol. Workforce tenants Green circle with a white check mark symbol. External tenants (learn more)

In this tutorial you'll build a JavaScript single-page application (SPA) and prepare it for authentication using the Microsoft identity platform. This tutorial demonstrates how to create a JavaScript SPA using npm, create files needed for authentication and authorization and add your tenant details to the source code. The application can be used for employees in a workforce tenant or for customers using an external tenant.

In this tutorial, you'll:

  • Create a new JavaScript project
  • Install packages required for authentication
  • Create your file structure and add code to the server file
  • Add your tenant details to the authentication configuration file

Prerequisites

  • A workforce tenant. You can use your Default Directory or set up a new tenant.
  • Register a new app in the Microsoft Entra admin center with the following configuration. For more information, see Register an application.
    • Name: identity-client-spa
    • Supported account types: Accounts in this organizational directory only (Single tenant).
    • Platform configuration: Single-page application (SPA).
    • Redirect URI: http://localhost:3000/.

Create a JavaScript project and install dependencies

  1. Open Visual Studio Code, select File > Open Folder.... Navigate to and select the location in which to create your project.

  2. Open a new terminal by selecting Terminal > New Terminal.

  3. Run the following command to create a new JavaScript project:

    npm init -y

  4. Create additional folders and files to achieve the following project structure:

    └── public
    └── authConfig.js
    └── authPopup.js
    └── authRedirect.js
    └── claimUtils.js
    └── index.html
    └── signout.html
    └── styles.css
    └── ui.js    
└── server.js
└── package.json

  5. In the Terminal, run the following command to install the required dependencies for the project:

    npm install express morgan @azure/msal-browser

Add code to the server file

Express is a web application framework for Node.js. It's used to create a server that hosts the application. Morgan is the middleware that logs HTTP requests to the console. The server file is used to host these dependencies and contains the routes for the application. Authentication and authorization are handled by the Microsoft Authentication Library for JavaScript (MSAL.js).

  1. Add the following code to the server.js file:

    const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// serve public assets.
app.use(express.static('public'));

// serve msal-browser module
app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));

// set up a route for signout.html
app.get('/signout', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/signout.html'));
});

// set up a route for redirect.html
app.get('/redirect', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/redirect.html'));
});

// set up a route for index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(DEFAULT_PORT, () => {
    console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
});

module.exports = app;

In this code, the app variable is initialized with the express module is used to serve the public assets. MSAL-browser is served as a static asset and is used to initiate the authentication flow.

Adding your tenant details to the MSAL configuration

The authConfig.js file contains the configuration settings for the authentication flow and is used to configure MSAL.js with the required settings for authentication.

  1. Open public/authConfig.js and add the following code:

    const msalConfig = {
    auth: {

        clientId: "Enter_the_Application_Id_Here", // This is the ONLY mandatory field that you need to supply
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
        },
    },
};

/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit: 
* https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
    scopes: [],
};

/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

  2. Replace the following values with the values from the Entra admin center:

    • Find the Enter_the_Application_Id_Here value and replace it with the Application ID (clientId) of the app you registered in the Microsoft Entra admin center.
    • Find the Enter_the_Tenant_Info_Here value and replace it with the Tenant ID of the workforce tenant you created in the Microsoft Entra admin center.

  3. Save the file.

Next step

Handle authentication flows in a JavaScript SPA