Tutorial: Inicio de sesión y cierre de sesión de una aplicación de página única (SPA) de JavaScript

Se aplica a: inquilinos de personal inquilinos externos (más información)

Este tutorial es la parte final de una serie que muestra cómo compilar una aplicación de página única (SPA) de JavaScript y prepararla para la autenticación mediante la plataforma de identidad de Microsoft. En la parte 2 de esta serie, ha agregado flujos de autenticación a una SPA de JavaScript y ha creado una interfaz de usuario con capacidad de respuesta. En este paso final se muestra cómo probar la funcionalidad de inicio de sesión y cierre de sesión en la aplicación.

En este tutorial, harás lo siguiente:

• Agregar código al archivo claimUtils.js para crear la tabla de reclamaciones
• Iniciar sesión y cerrar sesión en la aplicación
• Visualización de las declaraciones devueltas por el token de ID

Prerrequisitos

• Tutorial: Preparación de una aplicación de página única de JavaScript para la autenticación.

Agregar código al archivo claimUtils.js (opcional)

Para agregar la característica de una tabla que puede mostrar las reclamaciones devueltas del token de ID, puede agregar código al archivo claimUtils.js. Este fragmento de código rellenará la tabla de reclamaciones con la descripción adecuada y el valor correspondiente.

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

    /**
    * Populate claims table with appropriate description
    * @param {Object} claims ID token claims
    * @returns claimsObject
    */
   const createClaimsTable = (claims) => {
       let claimsObj = {};
       let index = 0;
   
       Object.keys(claims).forEach((key) => {
           if (typeof claims[key] !== 'string' && typeof claims[key] !== 'number') return;
           switch (key) {
               case 'aud':
                   populateClaim(
                       key,
                       claims[key],
                       "Identifies the intended recipient of the token. In ID tokens, the audience is your app's Application ID, assigned to your app in the Entra admin center.",
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'iss':
                   populateClaim(
                       key,
                       claims[key],
                       'Identifies the issuer, or authorization server that constructs and returns the token. It also identifies the Microsoft Entra tenant for which the user was authenticated. If the token was issued by the v2.0 endpoint, the URI will end in /v2.0. The GUID that indicates that the user is a consumer user from a Microsoft account is 9188040d-6c67-4c5b-b112-36a304b66dad.',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'iat':
                   populateClaim(
                       key,
                       changeDateFormat(claims[key]),
                       'Issued At indicates when the authentication for this token occurred.',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'nbf':
                   populateClaim(
                       key,
                       changeDateFormat(claims[key]),
                       'The nbf (not before) claim identifies the time (as UNIX timestamp) before which the JWT must not be accepted for processing.',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'exp':
                   populateClaim(
                       key,
                       changeDateFormat(claims[key]),
                       "The exp (expiration time) claim identifies the expiration time (as UNIX timestamp) on or after which the JWT must not be accepted for processing. It's important to note that in certain circumstances, a resource may reject the token before this time. For example, if a change in authentication is required or a token revocation has been detected.",
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'name':
                   populateClaim(
                       key,
                       claims[key],
                       "The principal about which the token asserts information, such as the user of an application. This value is immutable and can't be reassigned or reused. It can be used to perform authorization checks safely, such as when the token is used to access a resource. By default, the subject claim is populated with the object ID of the user in the directory",
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'preferred_username':
                   populateClaim(
                       key,
                       claims[key],
                       'The primary username that represents the user. It could be an email address, phone number, or a generic username without a specified format. Its value is mutable and might change over time. Since it is mutable, this value must not be used to make authorization decisions. It can be used for username hints, however, and in human-readable UI as a username. The profile scope is required in order to receive this claim.',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'nonce':
                   populateClaim(
                       key,
                       claims[key],
                       'The nonce matches the parameter included in the original /authorize request to the IDP. If it does not match, your application should reject the token.',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'oid':
                   populateClaim(
                       key,
                       claims[key],
                       'The oid (user’s object id) is the only claim that should be used to uniquely identify a user in an Azure AD tenant. The token might have one or more of the following claim, that might seem like a unique identifier, but is not and should not be used as such.',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'tid':
                   populateClaim(
                       key,
                       claims[key],
                       'The tenant ID. You will use this claim to ensure that only users from the current Azure AD tenant can access this app.',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'upn':
                   populateClaim(
                       key,
                       claims[key],
                       '(user principal name) – might be unique amongst the active set of users in a tenant but tend to get reassigned to new employees as employees leave the organization and others take their place or might change to reflect a personal change like marriage.',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'email':
                   populateClaim(
                       key,
                       claims[key],
                       'Email might be unique amongst the active set of users in a tenant but tend to get reassigned to new employees as employees leave the organization and others take their place.',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'acct':
                   populateClaim(
                       key,
                       claims[key],
                       'Available as an optional claim, it lets you know what the type of user (homed, guest) is. For example, for an individual’s access to their data you might not care for this claim, but you would use this along with tenant id (tid) to control access to say a company-wide dashboard to just employees (homed users) and not contractors (guest users).',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'sid':
                   populateClaim(key, claims[key], 'Session ID, used for per-session user sign-out.', index, claimsObj);
                   index++;
                   break;
               case 'sub':
                   populateClaim(
                       key,
                       claims[key],
                       'The sub claim is a pairwise identifier - it is unique to a particular application ID. If a single user signs into two different apps using two different client IDs, those apps will receive two different values for the subject claim.',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'ver':
                   populateClaim(
                       key,
                       claims[key],
                       'Version of the token issued by the Microsoft identity platform',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'auth_time':
                   populateClaim(
                       key,
                       claims[key],
                       'The time at which a user last entered credentials, represented in epoch time. There is no discrimination between that authentication being a fresh sign-in, a single sign-on (SSO) session, or another sign-in type.',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'at_hash':
                   populateClaim(
                       key,
                       claims[key],
                       'An access token hash included in an ID token only when the token is issued together with an OAuth 2.0 access token. An access token hash can be used to validate the authenticity of an access token',
                       index,
                       claimsObj
                   );
                   index++;
                   break;
               case 'uti':
               case 'rh':
                   index++;
                   break;
               default:
                   populateClaim(key, claims[key], '', index, claimsObj);
                   index++;
           }
       });
   
       return claimsObj;
   };
   
       /**
        * Populates claim, description, and value into an claimsObject
        * @param {string} claim
        * @param {string} value
        * @param {string} description
        * @param {number} index
        * @param {Object} claimsObject
        */
       const populateClaim = (claim, value, description, index, claimsObject) => {
           let claimsArray = [];
           claimsArray[0] = claim;
           claimsArray[1] = value;
           claimsArray[2] = description;
           claimsObject[index] = claimsArray;
       };
   
       /**
        * Transforms Unix timestamp to date and returns a string value of that date
        * @param {string} date Unix timestamp
        * @returns
        */
       const changeDateFormat = (date) => {
           let dateObj = new Date(date * 1000);
           return `${date} - [${dateObj.toString()}]`;
   };
   

2. Guarde el archivo.

Ejecute su proyecto e inicie sesión

Ahora que se han agregado todos los fragmentos de código necesarios, se podrá llamar a la aplicación y probarla en un explorador web.

1. Abra un nuevo terminal y ejecute el siguiente comando para iniciar el servidor web rápido.

   npm start
   

2. Copie la dirección URL de http que aparece en el terminal, por ejemplo, http://localhost:3000y péguela en un explorador. Se recomienda usar una sesión privada o incógnita del explorador.

3. Inicie sesión con una cuenta registrada en el inquilino.

4. Aparece una interfaz similar a la siguiente captura de pantalla, que indica que ha iniciado sesión en la aplicación. Si ha agregado la tabla de notificaciones, puede ver las notificaciones devueltas desde el token de identificador.

   

Cerrar sesión de la aplicación

1. Busque el botón Cerrar sesión en la página y selecciónelo.
2. Se le solicitará seleccionar una cuenta para cerrar sesión. Seleccione la cuenta que usó para iniciar sesión.

Aparece un mensaje que indica que ha cerrado la sesión. Ahora puede cerrar la ventana del explorador.

Contenido relacionado

• Inicio rápido: Protección de una API web de ASP.NET Core con la plataforma de identidad de Microsoft.
• Aprende más creando una SPA de React que inicia sesión a los usuarios en la siguiente serie de tutoriales de varias partes.
• Habilite el restablecimiento de contraseña.
• Personalice la marca predeterminada.
• Configure el inicio de sesión con Google.