Tutorial: Control de flujos de autenticación en una aplicación de página única de Vanilla JavaScript

Artículo
09/30/2024

Este tutorial es la parte 3 de una serie que muestra cómo compilar una aplicación de página única (SPA) de Vanilla JavaScript (JS) y prepararla para la autenticación. En parte 2 de esta serie, ha creado un SPA de Vanilla JS y lo preparó para la autenticación con el inquilino externo. En este tutorial, aprenderá a controlar los flujos de autenticación de la aplicación mediante la adición de componentes de la Biblioteca de autenticación de Microsoft (MSAL).

En este tutorial,

Configure las opciones de la aplicación
Adición de código a authRedirect.js para controlar el flujo de autenticación
Adición de código a authPopup.js para controlar el flujo de autenticación

Requisitos previos

Tutorial: Preparar el inquilino externo para autenticar usuarios en una aplicación de página única de Vanilla JavaScript.

Edición del archivo de configuración de autenticación

Abra public/authConfig.js y agregue el siguiente fragmento de código:

import { LogLevel } from '@azure/msal-browser';

/**
* Configuration object to be passed to MSAL instance on creation. 
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
*/

export const msalConfig = {
    auth: {
        clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain 
        redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
        postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
        navigateToLoginRequestUrl: false, // 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 between tabs.
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        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://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
*/
export const loginRequest = {
    scopes: [],
};

Reemplace los valores siguientes por los valores de Azure Portal:
- Busque el valor Enter_the_Application_Id_Here y reemplácelo por el id. de aplicación (clientId) de la aplicación que ha registrado en el centro de administración de Microsoft Entra.
  - En Autoridad, busque Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio del inquilino. Por ejemplo, si el dominio principal del inquilino es contoso.onmicrosoft.com, use contoso. Si no tiene el nombre del inquilino, obtenga información sobre cómo leer los detalles del inquilino.
Guarde el archivo.

Uso del dominio de dirección URL personalizado (opcional)

Use un dominio personalizado para personalizar completamente la dirección URL de autenticación. Desde el punto de vista del usuario, este permanece en el dominio durante el proceso de autenticación, en lugar de que se le redirija al nombre de dominio ciamlogin.com.

Siga estos pasos para usar un dominio personalizado:

Siga los pasos descritos en Habilitación de dominios de dirección URL personalizados para aplicaciones en inquilinos externos a fin de habilitar la dirección URL de dominio personalizada para el inquilino externo.
En el archivo authConfig.js, busque el objeto auth y, después, haga lo siguiente:
1. Actualice el valor de la propiedad authority a https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Reemplace Enter_the_Custom_Domain_Here por la dirección URL de dominio personalizado y Enter_the_Tenant_ID_Here por el id. del inquilino. Si no tiene el identificador del inquilino, obtenga información sobre cómo leer los detalles del inquilino.
2. Agregue la propiedad knownAuthorities con un valor [Escriba_aquí_el_dominio_personalizado].

Después de realizar los cambios en el archivo authConfig.js, si el dominio de dirección URL personalizado es login.contoso.com y el id. de inquilino es aaaabbbb-0000-cccc-1111-dddd2222eeee, el archivo debe tener un aspecto similar al siguiente fragmento de código:

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

Adición de código al archivo de redireccionamiento

Es necesario un archivo de redireccionamiento para controlar la respuesta desde la página de inicio de sesión. Se usa para extraer el token de acceso del fragmento de dirección URL y usarlo para llamar a la API protegida. También se usa para controlar los errores que se producen durante el proceso de autenticación.

Abra public/authRedirect.js y agregue el siguiente fragmento de código:

// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication(msalConfig);

let username = "";

/**
* A promise handler needs to be registered for handling the
* response returned from redirect flow. For more information, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md#redirect-apis
*/
myMSALObj.handleRedirectPromise()
    .then(handleResponse)
    .catch((error) => {
        console.error(error);
    });

function selectAccount() {

    /**
    * See here for more info on account retrieval: 
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
    */

    const currentAccounts = myMSALObj.getAllAccounts();

    if (!currentAccounts) {
        return;
    } else if (currentAccounts.length > 1) {
        // Add your account choosing logic here
        console.warn("Multiple accounts detected.");
    } else if (currentAccounts.length === 1) {
        username = currentAccounts[0].username
        welcomeUser(currentAccounts[0].username);
        updateTable(currentAccounts[0]);
    }
}

function handleResponse(response) {

    /**
    * To see the full list of response object properties, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
    */

    if (response !== null) {
        username = response.account.username
        welcomeUser(username);
        updateTable(response.account);
    } else {
        selectAccount();

    }
}

function signIn() {

    /**
    * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
    */

    myMSALObj.loginRedirect(loginRequest);
}

function signOut() {

    /**
    * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
    */

    // Choose which account to logout from by passing a username.
    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username),
        postLogoutRedirectUri: '/signout', // remove this line if you would like navigate to index page after logout.

    };

    myMSALObj.logoutRedirect(logoutRequest);
}

Guarde el archivo.

Adición de código al archivo authPopup.js

La aplicación usa authPopup.js para controlar el flujo de autenticación cuando el usuario inicia sesión usando la ventana emergente. La ventana emergente se usa cuando el usuario ya ha iniciado sesión y la aplicación debe obtener un token de acceso para un recurso diferente.

Abra public/authPopup.js y agregue el siguiente fragmento de código:

// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication(msalConfig);

let username = "";

function selectAccount () {

    /**
     * See here for more info on account retrieval: 
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
     */

    const currentAccounts = myMSALObj.getAllAccounts();

    if (!currentAccounts  || currentAccounts.length < 1) {
        return;
    } else if (currentAccounts.length > 1) {
        // Add your account choosing logic here
        console.warn("Multiple accounts detected.");
    } else if (currentAccounts.length === 1) {
        username = currentAccounts[0].username
        welcomeUser(currentAccounts[0].username);
        updateTable(currentAccounts[0]);
    }
}

function handleResponse(response) {

    /**
     * To see the full list of response object properties, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
     */

    if (response !== null) {
        username = response.account.username
        welcomeUser(username);
        updateTable(response.account);
    } else {
        selectAccount();
    }
}

function signIn() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    myMSALObj.loginPopup(loginRequest)
        .then(handleResponse)
        .catch(error => {
            console.error(error);
        });
}

function signOut() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    // Choose which account to logout from by passing a username.
    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username),
        mainWindowRedirectUri: '/signout'
    };

    myMSALObj.logoutPopup(logoutRequest);
}

selectAccount();

Guarde el archivo.

Paso siguiente

Parte 4: Iniciar sesión y cerrar sesión en la SPA de Vanilla JS

Compartir vía