Ejercicio: Integración de una aplicación web Next.js con Azure AD

25 minutos

Este ejercicio le guía por el proceso de configuración de una aplicación sencilla basada en Next.js que se integra con Microsoft Entra ID.

En este ejercicio, aprenderá a:

Registro de una aplicación de Microsoft Entra.
Implementar una aplicación sencilla basada en Next.js e integrada en Microsoft Entra.
Validar la integración en Microsoft Entra de la aplicación basada en Next.js.

Requisitos previos

Para realizar este ejercicio, necesitará lo siguiente:

Para completar los ejercicios Configurar el Microsoft Entra ID y Implementación de datos multiinquilino en la suscripción de Azure.
Una cuenta de Microsoft o una cuenta de Microsoft Entra con el rol Administrador global en el inquilino de Microsoft Entra asociado a la suscripción de Azure y con el rol Propietario o Colaborador en la suscripción de Azure.
Un equipo con Node.js y Git instalados.

Advertencia

Use un entorno de prueba porque los ejercicios de este módulo realizan operaciones confidenciales que requieren privilegios administrativos elevados.

Nota:

Para obtener información sobre cómo instalar Node.js, vea Descargas de Node.js. Para obtener información sobre Git, vea Descargas de Git. Instale ambas opciones antes de empezar este ejercicio.

Registro de una aplicación con la Microsoft Entra ID

Para implementar una aplicación basada en Next.js de ejemplo que usa la autenticación de Microsoft Entra para acceder a una base de datos de Azure Database for PostgreSQL, primero debe crear un objeto de aplicación de Microsoft Entra y la entidad de seguridad correspondiente. Esto permitirá que la aplicación basada en Next.js suplante a los usuarios de Microsoft Entra al acceder a objetos de base de datos.

Si es necesario, abra un explorador web, vaya a Azure Portal e inicie sesión para acceder a la suscripción de Azure que está usando en este módulo.
Use el cuadro de texto Buscar recursos, servicios y documentos para buscar Microsoft Entra ID y, en la lista de resultados, seleccione Microsoft Entra ID.
En la hoja de Microsoft Entra ID, en la sección Administrar del menú vertical, seleccione Registros de aplicaciones.
En la hoja Registros de aplicaciones, seleccione + Nuevo registro.
En la hoja Registrar una aplicación, en el cuadro de texto Nombre, escriba cna-nextjs-app.
En la sección Tipos de cuenta admitidos, asegúrese de que está seleccionada la opción Solo las cuentas de este directorio organizativo (solo de directorio predeterminado: inquilino único). En la sección URI de redirección (opcional), defina la entrada Aplicación de página única (SPA) en http://localhost:3000 y, después, seleccione Registrar.

Nota:

En este punto, tiene la opción de configurar la compatibilidad multiinquilino para las aplicaciones registradas de Microsoft Entra. Sin embargo, la cobertura detallada de este enfoque está fuera del ámbito de este módulo.

Nota:

Una vez implementada la aplicación, deberá modificar el valor de URI de redirección (opcional) para reflejar su dirección URL real.
En la hoja cna-nextjs-app, revise la configuración resultante y anote los valores de Id. de la aplicación (cliente) y las propiedades de Id. de directorio (inquilino).
En la hoja cna-nextjs-app, en la sección Administrar del menú vertical, seleccione Permisos de API.
En el panel cna-nextjs-app | Permisos de API seleccione + Agregar un permiso, en el panel Solicitud de permisos de API, seleccione la pestaña API usadas en mi organización, escriba Base de datos OSSRDBMS de Azure en el cuadro de texto y, después, en la lista de resultados, seleccione Base de datos OSSRDBMS de Azure.
En la hoja Solicitud de permisos de API, seleccione Permisos delegados, marque la casilla user_impersonation y, después, seleccione Agregar permisos.
De nuevo en el panel cna-nextjs-app | Permisos de API, seleccione Conceder consentimiento de administrador para directorio predeterminado y, cuando se le pida que confirme, seleccione Sí.
En el panel cna-nextjs-app | Permisos de API, compruebe que se han concedido los permisos.

Implementación de una aplicación sencilla basada en Next.js e integrada en Microsoft Entra

Con la aplicación registrada en el inquilino de Microsoft Entra, ahora puede continuar con su implementación. Para simplificar la tarea, clonará un repositorio de GitHub que contiene un código Next.js de ejemplo y lo personalizará para que se integre con el inquilino de Microsoft Entra.

En el equipo local, inicie el símbolo del sistema de Node.js.

Nota:

Asegúrese de ejecutar esto mediante la instalación local de Node.js en el equipo.
En el símbolo del sistema de Node.js, ejecute el comando siguiente para clonar el repositorio de GitHub que contiene el código de aplicación de Next.js de ejemplo que usará en este ejercicio:
```
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
Ejecute el siguiente comando para cambiar al directorio que hospeda el clon del repositorio de GitHub:
```
cd ./mslearn-cloud-native-apps/m06u07
```

Use el editor de texto que prefiera para revisar el contenido del archivo ./src/App.jsx, que recupera un token de acceso de Microsoft Entra para una aplicación de página única:

Nota:

El código de ejemplo se basa en el Tutorial: Inicio de sesión de usuarios y llamada a Microsoft Graph API desde una aplicación de página única (SPA) de React mediante el flujo de código de autorización.

El archivo ./src/App.jsx tiene el siguiente contenido:

import React, { useState } from "react";
import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
import { loginRequest } from "./authConfig";
import { PageLayout } from "./components/PageLayout";
import { ProfileData } from "./components/ProfileData";
import { callMsGraph } from "./graph";
import Button from "react-bootstrap/Button";
import "./styles/App.css";

var accessToken = '';

/**
 * Renders information about the signed-in user or a button to retrieve data about the user
 */
const ProfileContent = () => {
    const { instance, accounts } = useMsal();
    const [graphData, setGraphData] = useState(null);

    function RequestProfileData() {
        // Silently acquires an access token which is then attached to a request for MS Graph data
        instance.acquireTokenSilent({
            ...loginRequest,
            account: accounts[0]
        }).then((response) => {
            accessToken = response.accessToken;
            callMsGraph(response.accessToken).then(response => setGraphData(response));
        });
    }

    return (
        <>
            <h5 className="card-title">Welcome {accounts[0].name}</h5>
            {graphData ?
                <ProfileData graphData={graphData} />
                :
                <Button variant="secondary" onClick={RequestProfileData}>Request Profile Information</Button>
            }
            <p>{accessToken}</p>
        </>
    );
};

/**
 * If a user is authenticated the ProfileContent component above is rendered. Otherwise, a message indicating a user is not authenticated is rendered.
 */
const MainContent = () => {
    return (
        <div className="App">
            <AuthenticatedTemplate>
                <ProfileContent />
            </AuthenticatedTemplate>

            <UnauthenticatedTemplate>
                <h5 className="card-title">Please sign-in to review your profile information.</h5>
                </UnauthenticatedTemplate>
        </div>
    );
};

export default function App() {
    return (
        <PageLayout>
            <MainContent />
        </PageLayout>
    );
}

Use el editor de texto que prefiera para revisar el contenido del archivo ./src/authConfig.js, que almacena la información necesaria para identificar la aplicación de Microsoft Entra de destino que registró en la tarea anterior de este ejercicio.

El archivo ./src/authConfig.js tiene el siguiente contenido:

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

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: "<client_ID>",
        authority: "https://login.microsoftonline.com/<tenant_ID>",
        redirectUri: "http://localhost:3000"
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        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;
                }
            }
        }
    }
};

/**
 * 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/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, review:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
};

En el editor de texto que muestra el contenido del archivo ./src/authConfig.js, reemplace los marcadores de posición <client_ID> y <tenant_ID> por sus respectivos valores, que identificó en la tarea anterior de este ejercicio.
En el editor de texto que muestra el contenido del archivo ./src/authConfig.js, reemplace la entrada scopes: ["User.Read"] por scopes: ["User.Read","https://ossrdbms-aad.database.windows.net/user_impersonation"].
Guarde los cambios y cierre el archivo.

Validación de la integración de Microsoft Entra en la aplicación basada en Next.js

Está listo para validar la integración de la aplicación en Microsoft Entra. Puede contenedorizarla, pero, por motivos de simplicidad, primero la ejecutará localmente en el equipo, dentro del entorno de desarrollo de Node.js. Esto le ofrecerá una manera rápida de validar su funcionalidad y asegurarse de que su contenedorización es una opción viable.

Desde el símbolo del sistema de Node.js, ejecute el siguiente comando para instalar los paquetes de dependencia de la aplicación de Next.js de ejemplo:
```
npm install
```
Nota:

Espere a que termine el proceso de instalación.
Desde el símbolo del sistema de Node.js, ejecute el siguiente comando para compilar la aplicación de Next.js:
```
npm run-script build
```
Nota:

Espere a que se complete el proceso de compilación.
Desde el símbolo del sistema de Node.js, ejecute el siguiente comando para iniciar la aplicación de Next.js:
```
npm run-script start
```
Nota:

Se abrirá automáticamente una ventana del explorador en la que se muestra la página de Bienvenida de la biblioteca de autenticación de Microsoft para JavaScript (inicio rápido de React).
Cierre la ventana del explorador web en la que se muestra la página de Bienvenida de la biblioteca de autenticación de Microsoft para JavaScript (inicio rápido de React), abra otra ventana del explorador web en modo de incógnito o InPrivate y vaya a la dirección URL http://localhost:3000.
En la página de Bienvenida de la biblioteca de autenticación de Microsoft para JavaScript (inicio rápido de React), seleccione Iniciar sesión y, después, en el menú desplegable, seleccione Iniciar sesión mediante elemento emergente.
Cuando se le pida que inicie sesión, autentíquese mediante el adatumuser1 userPrincipalName y su contraseña.

Nota:

Ha creado esta cuenta de usuario en el primer ejercicio de este módulo.
En la página de Bienvenida de la biblioteca de autenticación de Microsoft para JavaScript (inicio rápido de React), seleccione Solicitar información del perfil.

Nota:

Compruebe que la salida incluye el correo electrónico, el identificador y el token de acceso de la cuenta de usuario adatumuser1 de Microsoft Entra.
Abra otra pestaña del explorador en la misma ventana del explorador web y vaya a la aplicación web que implementó en el ejercicio anterior.

Nota:

La dirección URL debe tener el siguiente formato: https://<webapp_name>.azurewebsites.net/auth.

Nota:

Compruebe que la página web resultante muestra los datos de inventario del primer inquilino.

Nota:

Si se produce un error en el primer intento, vuelva a intentarlo.
Cierre la ventana del explorador web en el modo de incógnito o de InPrivate.

Nota:

Ahora, repetirá la misma secuencia de pasos que con contosouser1 y comprobará que también puede acceder a los datos de inventario y mostrar el conjunto de registros correspondiente al segundo inquilino.
Abra otra ventana del explorador web en el modo de incógnito o de InPrivate y vaya a la dirección URL http://localhost:3000.
En la página de Bienvenida de la biblioteca de autenticación de Microsoft para JavaScript (inicio rápido de React), seleccione Iniciar sesión y, después, en el menú desplegable, seleccione Iniciar sesión mediante elemento emergente.
Cuando se le pida que inicie sesión, autentíquese mediante el contosouser1 userPrincipalName y su contraseña.

Nota:

Ha creado esta cuenta de usuario en el primer ejercicio de este módulo.

Nota:

Si se le solicita, acepte una solicitud de acceso y cambie la contraseña de la cuenta contosouser1.
En la página de Bienvenida de la biblioteca de autenticación de Microsoft para JavaScript (inicio rápido de React), seleccione Solicitar información del perfil.

Nota:

Compruebe que la salida incluye el correo electrónico, el identificador y el token de acceso de la cuenta de usuario contosouser1 de Microsoft Entra.
Abra otra pestaña del explorador en la misma ventana del explorador web y vaya a la aplicación web que implementó en el ejercicio anterior.

Nota:

Compruebe que la página web resultante muestra los datos de inventario del segundo inquilino.

Results

¡Enhorabuena! Completó el tercer ejercicio de este módulo. En este ejercicio, implementó una aplicación sencilla basada en Next.js e integrada en AD y comprobó su funcionalidad.

Limpiar los recursos

Para evitar cargos innecesarios por el uso de recursos de Azure, debe eliminar los grupos de recursos postgresql-db-RG y can-aadexpress-RG que creó en el ejercicio anterior de este módulo. Para ello, en Azure Portal, vaya a la hoja de cada uno de estos grupos de recursos y seleccione la entrada Eliminar grupo de recursos de la barra de herramientas. En el cuadro de texto TYPE THE RESOURCE GROUP NAME (ESCRIBA EL NOMBRE DEL GRUPO DE RECURSOS), escriba el nombre del grupo de recursos y seleccione Eliminar.