Laboratorio 06: Autenticación mediante SDK de OpenID Connect, MSAL y .NET

Interfaz de usuario de Microsoft Azure

Dada la naturaleza dinámica de las herramientas en la nube de Microsoft, puede experimentar cambios en la interfaz de usuario de Azure que se producen después del desarrollo de este contenido de entrenamiento. Como resultado, es posible que las instrucciones y los pasos del laboratorio no se alineen correctamente.

Microsoft actualiza este curso de entrenamiento cuando la comunidad nos alerta de los cambios necesarios. Sin embargo, las actualizaciones en la nube se producen con frecuencia, por lo que es posible que se produzcan cambios en la interfaz de usuario antes de que se actualice este contenido de entrenamiento. Si esto ocurre, adáptese a los cambios y, a continuación, trabaje con ellos en los laboratorios según sea necesario.

Instructions

Antes de comenzar

Inicio de sesión al entorno de laboratorio

Inicie sesión en la máquina virtual (VM) de Windows 11 con las credenciales siguientes:

Nombre de usuario: Admin
Contraseña: Pa55w.rd

Nota: El instructor le proporcionará instrucciones para conectarse al entorno de laboratorio virtual.

Revisión de las aplicaciones instaladas

Busque la barra de tareas en el escritorio de Windows 11. La barra de tareas contiene los iconos de las aplicaciones que usará en este laboratorio, entre los que se incluyen:

Microsoft Edge
Visual Studio Code

Escenario de laboratorio

En este laboratorio, registrarás una aplicación en Microsoft Entra ID, agregarás un usuario y luego probarás el acceso del usuario a la aplicación para validar que Entra ID puede protegerla.

Diagrama de la arquitectura

Diagrama de arquitectura que representa la autenticación de un usuario mediante los SDK de OpenID Connect, MSAL y .NET.

Ejercicio 1: Configuración de un entorno de Entra ID de un solo inquilino

Tarea 1: Abra Azure Portal

En la barra de tareas, seleccione el icono de Microsoft Edge.
En la ventana abierta del explorador, vaya a Azure Portal en https://portal.azure.com y, a continuación, inicie sesión con la cuenta que va a usar para este laboratorio.

Nota: Si es la primera vez que inicia sesión en Azure Portal, se le ofrecerá un paseo por el portal. Seleccione Introducción para omitir el paseo y empezar a usar el portal.

Tarea 2: Registro de una aplicación en el directorio de Entra ID

En Azure Portal, usa el cuadro de texto Buscar recursos, servicios y documentos para buscar Entra ID y, en la lista de resultados, selecciona Microsoft Entra ID.

Nota: Esto redirige la sesión del explorador a la hoja del inquilino de Microsoft Entra ID asociado a tu suscripción de Azure.
En la hoja Microsoft Entra ID , selecciona Registros de aplicaciones en la sección Administrar.
En la sección Registros de aplicaciones, seleccione + Nuevo registro.

En la sección Registrar una aplicación, realice las siguientes acciones y, a continuación, seleccione Registrar:

Configuración	Acción
Cuadro de texto de nombre	Escriba webappoidc
Lista de Tipos de cuenta admitidos	seleccione Cuentas de este directorio organizativo solo (Solo directorio predeterminado: inquilino único)

Nota: El nombre del inquilino puede diferir en función de la suscripción de Azure.

En la captura de pantalla siguiente, se muestran los valores configurados en la sección Registrar una aplicación.

Captura de pantalla que muestra las opciones configuradas para registrar una aplicación.

Tarea 3: Registro de identificadores únicos

En la hoja de registro de aplicaciones webappoidc, seleccione Información general.
En la sección Información general, busque y registre el valor del cuadro de texto Id. de aplicación (cliente) . Usará este valor más adelante en este laboratorio.
En la sección Información general, busque y registre el valor del cuadro de texto Id. de directorio (inquilino) . Usará este valor más adelante en este laboratorio.

Tarea 4: Configuración de la autenticación de la aplicación

En la hoja de registro de aplicaciones webappoidc, seleccione Autenticación en la secciónAdministrar.

En la sección Autenticación, realice estas acciones y seleccione Configurar:

Configuración	Acción
Sección Configuraciones de plataforma	Seleccione + Agregar una plataforma
Hoja Configurar plataformas	Seleccione Web
Cuadro de texto URI de redirección	Escriba `https://localhost:5001/`.
Cuadro de texto Dirección URL de cierre de sesión del canal frontal	Escriba `https://localhost:5001/signout-oidc`.

De nuevo en la sección Configuraciones de plataforma, seleccione Agregar URI y, a continuación, escriba https://localhost:5001/signin-oidc.
En la sección Concesión implícita y flujos híbridos, seleccione Tokens de identificador (usados para flujos implícitos e híbridos) .
Seleccione Guardar.

En la captura de pantalla siguiente, se muestran los valores configurados en la hoja Autenticación.

Tarea 5: Creación de un usuario de Microsoft Entra ID

En Azure Portal, seleccione el icono Cloud Shell, icono Cloud Shell , para abrir una instancia de Cloud Shell. Si Cloud Shell tiene como valor predeterminado una sesión de Bash, seleccione Cambiar a PowerShell en el menú de Cloud Shell y, después, seleccione Confirmar.

Nota: El icono Cloud Shell se representa mediante un signo “mayor que” (>) y un carácter de subrayado (_).

Si es la primera vez que inicia Cloud Shell, se le mostrará una serie de mensajes para crear el recurso. Realice las acciones que aparecen en la siguiente tabla:

Prompt	Action
Bienvenido a Azure Cloud Shell	Seleccione PowerShell.
Introducción	Seleccione Montar cuenta de almacenamiento, después la suscripción a la cuenta de almacenamiento en el menú desplegable y, por último, seleccione Aplicar.
Montar cuenta de almacenamiento	Seleccione Vamos a crear una cuenta de almacenamiento para usted y después Siguiente.

En el panel Cloud Shell, ejecute el siguiente comando para iniciar sesión en el inquilino de Microsoft Entra asociado a su suscripción de Azure:
```
 Connect-AzureAD
```
Ejecute el siguiente comando para recuperar y mostrar el nombre de dominio principal del Sistema de nombres de dominio (DNS) del inquilino de Microsoft Entra:
```
 $aadDomainName = ((Get-AzureAdTenantDetail).VerifiedDomains)[0].Name
 $aadDomainName
```
Nota: Registre el valor del nombre de dominio DNS. Usará este valor más adelante en este laboratorio.

Ejecute los siguientes comandos para crear usuarios de Microsoft Entra ID que usará para probar la autenticación de Microsoft Entra ID:

 $passwordProfile = New-Object -TypeName Microsoft.Open.AzureAD.Model.PasswordProfile
 $passwordProfile.Password = 'Pa55w.rd1234'
 $passwordProfile.ForceChangePasswordNextLogin = $false
 New-AzureADUser -AccountEnabled $true -DisplayName 'aad_lab_user1' -PasswordProfile $passwordProfile -MailNickName 'aad_lab_user1' -UserPrincipalName "aad_lab_user1@$aadDomainName"

Ejecute el siguiente comando para identificar el nombre principal de usuario (UPN) del usuario de Microsoft Entra ID recién creado:
```
 (Get-AzureADUser -Filter "MailNickName eq 'aad_lab_user1'").UserPrincipalName
```
Nota: Registre el UPN. Usará este valor más adelante en este laboratorio.
Cierre el panel de Cloud Shell.

Revisar

En este ejercicio, ha registrado una aplicación de inquilino único de Azure AD y ha creado una cuenta de usuario de Azure AD.

Ejercicio 2: Creación de una aplicación web de ASP.NET de inquilino único

Tarea 1: Creación de un proyecto de aplicación web de ASP.NET

En el equipo del laboratorio, inicie un símbolo del sistema.
Desde el símbolo del sistema, ejecute los comandos siguientes para crear y establecer el directorio actual en Allfiles (F):\Allfiles\Labs\06\Starter\OIDCClient:
```
 F:
 cd F:\Allfiles\Labs\06\Starter\OIDCClient
```
Ejecute los siguientes comandos para crear una nueva aplicación web de .NET Core basada en la plantilla de Modelo-Vista-Controlador (MVC) (reemplace los marcadores de posición <application_ID>, <tenant_ID> y <domain_Name> por los valores correspondientes que registró anteriormente en este laboratorio):
```
 dotnet new mvc --auth SingleOrg --client-id <application_ID> --tenant-id <tenant_ID> --domain <domain_Name>
 rmdir .\obj /S /Q
```
Nota: Si has recibido un error en el terminal, es posible que estés usando PowerShell. En ese caso, quita las marcas /S /Q y vuelve a ejecutar el comando.
Ejecute el comando siguiente para iniciar Visual Studio Code.
```
 code .
```
Si le aparece el mensaje ¿Confía en los autores de los archivos de esta carpeta? , seleccione Yes, I trust the authors (Sí, confío en los autores).
En el panel Explorador de Visual Studio Code, revise la estructura de carpetas generada automáticamente que representa una aplicación web MVC.

Vaya a la carpeta Propiedades, abra el archivo launchSettings.json y aplique los cambios siguientes:

Sección	Propiedad	Value
iisSettings	sslPort	44321
https	applicationUrl	`https://localhost:5001`

Nota: los números de puerto deben coincidir con el valor especificado al crear el registro de aplicación de Microsoft Entra ID.

Guarde y cierre el archivo.
En el panel Explorador de Visual Studio Code, seleccione OIDCClient.csproj.
Asegúrese de que el valor del elemento <TargetFramework> está establecido en net8.0.
Asegúrese de que la versión de los paquetes NuGet Microsoft.AspNetCore.Authentication.JwtBearer y Microsoft.AspNetCore.Authentication.OpenIdConnect esté establecida en 8.0.0.

Compruebe que el contenido del archivo OIDCClient.csproj se parece a la siguiente lista (el valor de UserSecretsId será diferente) y guarde los cambios.

 <Project Sdk="Microsoft.NET.Sdk.Web">

   <PropertyGroup>
     <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <UserSecretsId>aspnet-OIDCClient-5249f5b2-6266-4a13-b8b4-e79c6443aabc</UserSecretsId>
   </PropertyGroup>

   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="8.0.0-rc.2.23480.2" NoWarn="NU1605" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="8.0.0-rc.2.23480.2" NoWarn="NU1605" />
     <PackageReference Include="Microsoft.Identity.Web" Version="2.13.0" />
     <PackageReference Include="Microsoft.Identity.Web.UI" Version="2.13.0" />
     <PackageReference Include="Microsoft.Identity.Web.DownstreamApi" Version="2.13.0" />
   </ItemGroup>

 </Project>

Cierre el archivo OIDCClient.csproj.
Vaya a la carpeta Views\Shared y abra el archivo _LoginPartial.cshtml.

Compruebe que el atributo asp-area de cada elemento span hace referencia a MicrosoftIdentity, como en la línea siguiente:

 <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>

Cierre el archivo sin realizar ningún cambio.

Abra el archivo appsettings.json en la carpeta raíz y revise el contenido del objeto AzureAd, incluidos los siguientes elementos:

Elemento	Value
`Instance`	`https://login.microsoftonline.com/`
`Domain`	Dominio DNS principal del inquilino de Azure AD asociado a la suscripción de Azure
`TenantId`	GUID del inquilino de Azure AD
`ClientId`	Id. de aplicación (cliente) de la aplicación registrada en el inquilino de Azure AD
`CallbackPath`	`/signin-oidc`

Cierre el archivo sin realizar ningún cambio.
En el panel del Explorador de Visual Studio Code, seleccione Program.cs.

Compruebe que el archivo contiene las directivas using siguientes:

 using Microsoft.AspNetCore.Authentication.OpenIdConnect;
 using Microsoft.Identity.Web;
 using Microsoft.Identity.Web.UI;

Compruebe que el archivo contiene las líneas siguientes, que agregan los servicios de autenticación pertinentes al contenedor:

 // Add services to the container.
 builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
   .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"));

Compruebe que el archivo contiene las líneas siguientes, que agregan un controlador y Razor Pages para la administración de cuentas:
```
 builder.Services.AddRazorPages()
   .AddMicrosoftIdentityUI();
```
Guarde y cierre el archivo.

Tarea 2: Prueba de la aplicación web de inquilino único en un escenario de inquilino único

En la ventana Visual Studio Code, en su barra de menús superior, vaya al menú Terminal y seleccione Nuevo terminal.
En el panel Terminal, la ruta de acceso actual del directorio de trabajo actual debe ser F:\Allfiles\Labs\06\Starter\OIDCClient. Ejecute los comandos siguientes para compilar la aplicación web de .NET:
```
 dotnet build
```
Nota: Si hay algún error de compilación, revise los archivos de la carpeta Allfiles (F):\Allfiles\Labs\06\Solution\OIDCClient. Ignore los mensajes de advertencia.
Ejecute el siguiente comando para generar un certificado autofirmado y configurar el equipo local para que confíe en él:
```
 dotnet dev-certs https --trust
```
Si se le pide que instale el certificado generado automáticamente, seleccione Sí.
En el símbolo del sistema del terminal, ejecute el siguiente comando para ejecutar la aplicación web de .NET:
```
 dotnet run
```
Inicie el explorador de Microsoft Edge en el modo InPrivate y, a continuación, vaya a la dirección URL https://localhost:5001.
Si aparece el mensaje La conexión no es privada, seleccione Avanzado y, después, seleccione el vínculo Continuar a localhost (no seguro) .
En la ventana abierta del explorador, cuando se le solicite, autentíquese mediante el UPN de la cuenta de Microsoft Entra ID aad_lab_user1 que creó anteriormente en este laboratorio con Pa55w.rd1234 como contraseña.

Nota: Si aparece la ventana Ayúdenos a proteger su cuenta, seleccione Omitir por ahora.

Nota: si aparece el mensaje Necesita aprobación de administrador, deberá usar un identificador de Entra de Microsoft con privilegios elevados en su lugar para completar el resto de esta tarea. Para ello, seleccione el vínculo ¿Tiene una cuenta de administrador? Inicie sesión con esa cuenta, inicie sesión con una cuenta de administrador y continúe con el siguiente paso.
La ventana del explorador abrirá automáticamente la página web Permisos solicitados.
Revise los permisos solicitados, que incluyen Ver el perfil básico y Mantener el acceso a los datos a los que le ha dado acceso.
Seleccione Aceptar.
Revise la página principal de bienvenida del sitio de destino que muestra el explorador y compruebe que el UPN de la cuenta de Microsoft Entra ID aad_user1 aparece en la ventana del explorador.
En la página de bienvenida, seleccione Cerrar sesión.
Cuando se le pida que seleccione la cuenta para cerrar sesión, seleccione la cuenta de Microsoft Entra ID aad_lab_user1. Se le redirigirá automáticamente a la página Sesión cerrada.
Cierre el explorador de Microsoft Edge.

Revisar

En este ejercicio, ha implementado una aplicación web de inquilino único y la ha probado en un entorno de Microsoft Entra de inquilino único.