Inicio rápido: Inicio de sesión de usuarios y llamada a Microsoft Graph API desde una aplicación web de ASP.NET Core

En este inicio rápido, usará una aplicación web de ASP.NET Core de ejemplo para iniciar sesión a los usuarios mediante el flujo de código de autorización y llamar a Microsoft Graph API. En el ejemplo se usa biblioteca de autenticación de Microsoft para .NET y Microsoft Identity Web para controlar la autenticación.

Prerrequisitos

• Una cuenta de Azure con una suscripción activa. Si aún no tiene una, cree una cuenta gratis .
• Se necesita como mínimo el SDK de NET 8.0
• Visual Studio Code

Registra la aplicación y registra los identificadores

Para completar el registro, proporcione un nombre a la aplicación y especifique los tipos de cuenta admitidos. Una vez registrado, la aplicación panel Información general muestra los identificadores necesarios en el código fuente de la aplicación.

1. Inicie sesión en el Centro de administración de Microsoft Entra.

2. Si tiene acceso a varios clientes, utilice el icono de Configuración en el menú superior para cambiar al cliente en el que desea registrar la aplicación desde el menú de Directorios y suscripciones .

3. Vaya a Identidad>Aplicaciones>Registros de aplicaciones y seleccione Nuevo registro.

4. Escriba un nombre para la aplicación, como identity-client-web-app.

5. Para la opción Tipos de cuenta admitidos, seleccione Solo las cuentas de este directorio organizativo. Para obtener información sobre los distintos tipos de cuenta, seleccione la opción Ayudarme a elegir.

6. Seleccione Registrar.

   

7. El panel Información general de la aplicación se muestra cuando se completa el registro. Registrar el id. de directorio (inquilino) y el id. de aplicación (cliente) que se usará en el código fuente de la aplicación.

   

   Nota

   Para modificar los tipos de cuenta admitidos, consulte Modificación de las cuentas que admite una aplicación.

Adición de una URL de redireccionamiento de la plataforma

Para especificar el tipo de aplicación en el registro de la aplicación, siga estos pasos:

1. En Administrar, seleccione Autenticación.
2. En la página de configuraciones de la plataforma , seleccione Agregar una plataformay, a continuación, seleccione la opción Web .
3. Para URI de redireccionamiento, escriba https://localhost:5001/signin-oidc.
4. En Dirección URL de cierre de sesión del canal frontal, escriba https://localhost:5001/signout-callback-oidc para cerrar sesión.
5. Seleccione Configurar para guardar los cambios.

Clonar o descargar la aplicación de ejemplo

Para obtener la aplicación de ejemplo, puede clonarla desde GitHub o descargarla como un archivo .zip.

• Para clonar la muestra, abra un símbolo del sistema y navegue hasta donde desea crear el proyecto, e introduzca el siguiente comando:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git
  

• Descargue el archivo .zip. Extráigalo en una ruta de acceso de archivo donde la longitud del nombre sea inferior a 260 caracteres.

Creación y carga de un certificado autofirmado

Para proteger la aplicación, agregue un certificado a la aplicación. En esta sección se muestra cómo crear un certificado autofirmado y cargarlo en el registro de la aplicación en el Centro de administración de Microsoft Entra.

Nota

Los certificados autofirmados solo deben usarse en el desarrollo. En producción, debe usar un certificado de una autoridad certificadora confiable.

1. Con el terminal, use los siguientes comandos para navegar para crear un certificado autofirmado en el directorio del proyecto.

   cd ms-identity-docs-code-dotnet\web-app-aspnet\
   dotnet dev-certs https -ep ./certificate.crt --trust
   

2. Vuelva al Centro de administración de Microsoft Entra y, en Administrar, seleccione Certificados y secretos>Cargar certificado.

3. Seleccione la pestaña Certificados (0) y, a continuación, seleccione Cargar certificado.

4. Aparece un panel Cargar certificado. Use el icono para ir al archivo de certificado que creó en el paso anterior y seleccione Abrir.

5. Escriba una descripción para el certificado, por ejemplo, Certificado para aspnet-web-appy seleccione Agregar.

6. Registre el valor de la huella digital para usarlo en el siguiente paso.

Configuración del proyecto

1. En el IDE, abra la carpeta del proyecto, ms-identity-docs-code-dotnet\web-app-aspnet, que contiene el ejemplo.

2. Abra appsettings.json y reemplace el contenido del archivo por el siguiente fragmento de código;

   {
   "AzureAd": {
     "Instance": "https://login.microsoftonline.com/",
     "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
     "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
     "ClientCertificates": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApi": {
       "BaseUrl": "https://graph.microsoft.com/v1.0/",
       "RelativePath": "me",
       "Scopes": [ 
         "user.read" 
       ]
     },
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*"
   }
   

   • TenantId: identificador del inquilino donde se registra la aplicación. Reemplace el texto entre comillas por el Directory (tenant) ID que se registró anteriormente en la página de información general de la aplicación registrada.
   • ClientId: el identificador de la aplicación, también conocido como el cliente. Reemplace el texto entre comillas por el valor de Application (client) ID que se registró anteriormente en la página de información general de la aplicación registrada.
   • ClientCertificates: se usa un certificado autofirmado para la autenticación en la aplicación. Reemplace el texto del CertificateThumbprint por la huella digital del certificado que se registró anteriormente.

Ejecución de la aplicación e inicio de sesión

1. En el directorio del proyecto, use el terminal para escribir el siguiente comando;

   dotnet run
   

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

3. Siga los pasos y escriba los detalles necesarios para iniciar sesión con su cuenta Microsoft. Se le pedirá que proporcione una dirección de correo electrónico para que se pueda enviar un código de acceso de una sola vez. Escriba el código cuando se le solicite.

4. La aplicación solicita permiso para mantener el acceso a los datos a los que le ha concedido acceso y para iniciar sesión y leer el perfil. Seleccione Aceptar.

5. Aparece la captura de pantalla siguiente, que indica que ha iniciado sesión en la aplicación y ha accedido a los detalles del perfil desde Microsoft Graph API.

   

Cierra sesión en la aplicación

1. Busque el vínculo Cerrar sesión en la esquina superior derecha de la página y selecciónelo.
2. Se le pide que elija una cuenta para cerrar sesión. Seleccione la cuenta que usó para iniciar sesión.
3. Aparece un mensaje que indica que ha cerrado la sesión. Ahora puede cerrar la ventana del explorador.

Contenido relacionado

• Aprenda mediante la compilación de esta aplicación web de ASP.NET con la serie Tutorial: Registro de una aplicación con la plataforma de identidad de Microsoft.
• Inicio rápido: Protección de una API web de ASP.NET Core con la plataforma de identidad de Microsoft.
• Inicio rápido: Despliegue de una aplicación web de ASP.NET en Azure App Service