Inicio rápido: Inicio de sesión de usuarios en una aplicación web de ejemplo

Se aplica a: Inquilinos laborales Inquilinos externos (obtén más información)

En este inicio rápido, usa una aplicación web de ejemplo para mostrarte cómo realizar el inicio de sesión de los usuarios y realizar llamadas a Microsoft Graph API en el arrendatario de tu personal. La aplicación de ejemplo usa la biblioteca de autenticación de Microsoft para controlar la autenticación.

Antes de empezar, use el selector Elegir un tipo de inquilino en la parte superior de esta página para seleccionar el tipo de inquilino. Microsoft Entra ID proporciona dos configuraciones de inquilino, recursos y externa. Una configuración de entorno de trabajo está destinada a los empleados, las aplicaciones internas y otros recursos de la organización. Un inquilino externo es para las aplicaciones orientadas al cliente.

Prerrequisitos

• Una cuenta de Azure con una suscripción activa. Si aún no tiene una, cree una cuenta de forma gratuita.
• Esta cuenta de Azure debe tener permisos para administrar aplicaciones. Cualquiera de los siguientes roles de Microsoft Entra incluye los permisos necesarios:
  • Administrador de aplicaciones
  • Desarrollador de aplicaciones
• Un inquilino trabajador Puede usar el directorio predeterminado o configurar un nuevo inquilino.
• Visual Studio Code u otro editor de código.

Nodo

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma web . Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:3000/auth/redirect
  • Dirección URL de cierre de sesión del canal frontal: https://localhost:5001/signout-callback-oidc
• Agregue un secreto de cliente al registro de la aplicación. No use secretos de cliente en aplicaciones de producción. En su lugar, use certificados o credenciales federadas. Para más información, consulte Incorporación de credenciales a la aplicación.
• Node.js

ASP.NET Core

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma web . Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: https://localhost:5001/signin-oidc
  • Dirección URL de cierre de sesión del canal frontal: https://localhost:5001/signout-callback-oidc
• Agregue un certificado autofirmado al registro de la aplicación. No use certificados autofirmados en aplicaciones de producción. En su lugar, use un certificado de una entidad de certificación de confianza o credenciales federadas. Para más información, consulte Incorporación de credenciales a la aplicación. Cree el certificado con el comando siguiente:

  dotnet dev-certs https -ep ./certificate.crt --trust
  

• Requisito mínimo del SDK de .NET 8.0

Python Flask

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma web . Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:5000/getAToken
• Python 3 +
• Agregue un secreto de cliente al registro de la aplicación. No use secretos de cliente en aplicaciones de producción. En su lugar, use certificados o credenciales federadas. Para más información, consulte Incorporación de credenciales a la aplicación.

Clonar o descargar una aplicación web de ejemplo

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

Nodo

• Descargue el archivo .zip, luego extraerlo en una ruta de archivo donde la longitud del nombre sea inferior a 260 caracteres o clonar el repositorio:

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

  git clone https://github.com/Azure-Samples/ms-identity-node.git
  

ASP.NET Core

• Descargue el archivo .zip, y después extráigalo en una ruta de archivos cuyo nombre tenga menos de 260 caracteres o clone el repositorio:

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

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

Python Flask

• Descargue el ejemplo de código de Python y extráigalo en una ruta de acceso de archivo donde la longitud del nombre sea inferior a 260 caracteres o clone el repositorio:

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

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

Configuración de la aplicación web de ejemplo

Para que inicies sesión a usuarios con la aplicación de ejemplo, debes actualizarla con los detalles de tu aplicación y de la entidad.

Nodo

En la carpeta ms-identity-node , abra el archivo App/.env y reemplace los siguientes marcadores de posición:

Variable	Description	Ejemplos
Enter_the_Cloud_Instance_Id_Here	Instancia en la nube de Azure en la que se registra la aplicación	https://login.microsoftonline.com/ (incluya la barra diagonal final)
Enter_the_Tenant_Info_here	Id. de inquilino o dominio principal	contoso.microsoft.com o aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here	Id. de cliente de la aplicación que ha registrado	00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here	Secreto de cliente de la aplicación que usted registró	A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here	La instancia en la nube de Microsoft Graph API a la que llama la aplicación	https://graph.microsoft.com/ (incluya la barra diagonal final)
Enter_the_Express_Session_Secret_Here	Cadena aleatoria de caracteres que se usa para firmar la cookie de sesión rápida	A1b-C2d_E3f.H4...

Después de realizar cambios, el archivo debe tener un aspecto similar al siguiente fragmento de código:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

ASP.NET Core

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",
     "ClientCredentials": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApis": {
       "MicrosoftGraph" :{
         "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 Application (client) ID valor 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.

Python Flask

1. Abra la aplicación que descargó en un IDE y vaya a la carpeta raíz de la aplicación de ejemplo.

   cd flask-web-app
   

2. Cree un archivo .env en la carpeta raíz del proyecto mediante .env.sample.entra-id como guía.

   # The following variables are required for the app to run.
   CLIENT_ID=<Enter_your_client_id>
   CLIENT_SECRET=<Enter_your_client_secret>
   AUTHORITY=<Enter_your_authority_url>
   

   • Establezca el valor de CLIENT_ID en el identificador de aplicación (cliente) de la aplicación registrada, disponible en la página de vista general.
   • Establezca el valor de CLIENT_SECRET en el secreto de cliente que creó en Certificados y secretos para la aplicación registrada.
   • Establezca el valor de AUTHORITY en .https://login.microsoftonline.com/<TENANT_GUID> El identificador de directorio (inquilino) está disponible en la página de información general del registro de aplicaciones.

   Se hace referencia a las variables de entorno en app_config.py y se mantienen en un archivo .env independiente para mantenerlos fuera del control de código fuente. El archivo .gitignore proporcionado impide que el archivo .env se proteja.

Ejecución y prueba de una aplicación web de ejemplo

Ha configurado la aplicación de ejemplo. Puede continuar para ejecutarlo y probarlo.

Nodo

1. Para iniciar el servidor, ejecute los siguientes comandos desde el directorio del proyecto:

   cd App
   npm install
   npm start
   

2. Ir a http://localhost:3000/.

3. Seleccione Iniciar sesión para comenzar el proceso de inicio de sesión.

La primera vez que inicie sesión, se le pedirá que dé su consentimiento para permitir que la aplicación inicie sesión y acceda a su perfil. Una vez que haya iniciado sesión correctamente, se le redirigirá a la página principal de la aplicación.

Funcionamiento de la aplicación

El ejemplo hospeda un servidor web en localhost, puerto 3000. Cuando un explorador web accede a esta dirección, la aplicación representa la página principal. Una vez que el usuario selecciona Iniciar sesión, la aplicación redirige el explorador a la pantalla de inicio de sesión de Microsoft Entra, a través de la dirección URL generada por la biblioteca de nodos de MSAL. Después de que el usuario dé su consentimiento, el explorador redirige al usuario a la página principal de la aplicación, junto con un identificador y un token de acceso.

ASP.NET Core

1. En el directorio del proyecto, use el terminal para escribir los siguientes comandos:

   cd ms-identity-docs-code-dotnet/web-app-aspnet
   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. Aparece la captura de pantalla siguiente. Indica que ha iniciado sesión en la aplicación y está viendo los detalles del perfil desde Microsoft Graph API.

   

Cerrar sesión de 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 pedirá que elija una cuenta de la que quiere 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.

Python Flask

1. Cree un entorno virtual para la aplicación:

   • Para Windows, ejecute los siguientes comandos:

   py -m venv .venv
   .venv\scripts\activate
   

   • Para macOS/Linux, ejecute los siguientes comandos:

   python3 -m venv .venv
   source .venv/bin/activate
   

2. Instale los requisitos mediante pip:

   pip install -r requirements.txt
   

3. Ejecute la aplicación desde la línea de comandos. Asegúrese de que la aplicación se ejecuta en el mismo puerto que el URI de redirección que configuró anteriormente.

   flask run --debug --host=localhost --port=5000
   

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

5. 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 y una contraseña para iniciar sesión.

6. La aplicación solicita permiso para mantener el acceso a los datos a los que permite el acceso y para iniciar sesión y, a continuación, leer el perfil, como se muestra en la captura de pantalla. Seleccione Aceptar.

   

7. Aparece la captura de pantalla siguiente, que indica que ha iniciado sesión correctamente en la aplicación.

Funcionamiento de la aplicación

En el diagrama siguiente se muestra cómo funciona la aplicación de ejemplo:

1. La aplicación usa el identity paquete para obtener un token de acceso de la plataforma de identidad de Microsoft. Este paquete se basa en la biblioteca de autenticación de Microsoft (MSAL) para Python para simplificar la autenticación y la autorización en las aplicaciones web.

2. El token de acceso que obtiene en el paso anterior se usa como token de portador para autenticar al usuario al llamar a Microsoft Graph API.

Contenido relacionado

Nodo

• Aprenda a crear una aplicación web de Node.js que inicie sesión de usuarios y llame a Microsoft Graph API en Tutorial: Inicio de sesión de usuarios y adquisición de un token para Microsoft Graph en una aplicación web Node.js y Express.

ASP.NET Core

• Aprenda mediante la compilación de esta aplicación web 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: Implementación de una aplicación web de ASP.NET en Azure App Service

Python Flask

• Aprenda a crear una aplicación web de Python que inicie sesión de usuarios y llame a una API web protegida en Tutorial: Aplicación web que inicia sesión de los usuarios.

En esta guía de inicio rápido, usará una aplicación web de ejemplo para mostrar cómo los usuarios pueden iniciar sesión en su tenant externo. La aplicación de ejemplo usa la biblioteca de autenticación de Microsoft para controlar la autenticación.

Antes de empezar, use el selector Elegir un tipo de inquilino en la parte superior de esta página para seleccionar el tipo de inquilino. Microsoft Entra ID proporciona dos configuraciones de inquilino, recursos y externa. Una configuración de entorno de trabajo está destinada a los empleados, las aplicaciones internas y otros recursos de la organización. Un inquilino externo es para las aplicaciones orientadas al cliente.

Prerrequisitos

• Una cuenta de Azure con una suscripción activa. Si aún no tiene una, cree una cuenta de forma gratuita.
• Esta cuenta de Azure debe tener permisos para administrar aplicaciones. Cualquiera de los siguientes roles de Microsoft Entra incluye los permisos necesarios:
  • Administrador de aplicaciones
  • Desarrollador de aplicaciones
• Un inquilino externo. Para crear uno, elija entre los métodos siguientes:
  • Use la extensión Microsoft Entra External ID para configurar un inquilino externo directamente en Visual Studio Code. (Recomendado)
  • Cree un nuevo inquilino externo en el Centro de administración de Microsoft Entra.
• Flujo de usuario. Para más información, consulte Creación de flujos de usuario de registro de autoservicio para aplicaciones en inquilinos externos. Este flujo de usuario se puede usar para varias aplicaciones.
• Visual Studio Code u otro editor de código.

Nodo

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma web . Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:3000/auth/redirect
  • Dirección URL de cierre de sesión del canal frontal: https://localhost:5001/signout-callback-oidc
• Agregue un secreto de cliente al registro de la aplicación. No use secretos de cliente en aplicaciones de producción. En su lugar, use certificados o credenciales federadas. Para más información, consulte Incorporación de credenciales a la aplicación.
• Adición de la aplicación al flujo de usuario
• Node.js

ASP.NET Core

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma web . Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: https://localhost:5001/signin-oidc
  • Dirección URL de cierre de sesión del canal frontal: https://localhost:5001/signout-callback-oidc
• Agregue un secreto de cliente al registro de la aplicación. No use secretos de cliente en aplicaciones de producción. En su lugar, use certificados o credenciales federadas. Para más información, consulte Incorporación de credenciales a la aplicación.
• Adición de la aplicación al flujo de usuario
• Una versión mínima del SDK de .NET 8.0.

Python Django

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma web . Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:5000/getAToken
• Adición de la aplicación al flujo de usuario
• Python 3 +
• Agregue un secreto de cliente al registro de la aplicación. No use secretos de cliente en aplicaciones de producción. En su lugar, use certificados o credenciales federadas. Para más información, consulte Incorporación de credenciales a la aplicación.

Python Flask

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma web . Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:5000/getAToken
• Adición de la aplicación al flujo de usuario
• Python 3 +
• Agregue un secreto de cliente al registro de la aplicación. No use secretos de cliente en aplicaciones de producción. En su lugar, use certificados o credenciales federadas. Para más información, consulte Incorporación de credenciales a la aplicación.

Clonar o descargar una aplicación web de ejemplo

Nodo

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 desplácese hasta donde desea crear el proyecto, e introduzca el siguiente comando:

  git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• Como alternativa, descargue el archivo .zip de ejemplo y extráigalo en una ruta de acceso de archivo donde la longitud del nombre de archivo sea menor a 260 caracteres.

Instalación de dependencias del proyecto

1. Abra una ventana de consola y cambie al directorio que contiene la aplicación de ejemplo Node.js:

   cd 1-Authentication\5-sign-in-express\App
   

2. Ejecute los siguientes comandos para instalar las dependencias de la aplicación:

   npm install
   

ASP.NET Core

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 desplácese hasta donde desea crear el proyecto, e introduzca el siguiente comando:

  git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git
  

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

Python Django

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 desplácese hasta donde desea crear el proyecto, e introduzca el siguiente comando:

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

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

Instalación de dependencias del proyecto

1. Abra una ventana de consola y cambie al directorio que contiene la aplicación web de ejemplo de Flask:

   cd django-web-app
   

2. Configuración del entorno virtual:

   • Para Windows, ejecute los siguientes comandos:

   py -m venv .venv
   .venv\scripts\activate
   

   • Para macOS/Linux, ejecute los siguientes comandos:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Para instalar las dependencias de la aplicación, ejecute los siguientes comandos:

   python3 -m pip install -r requirements.txt
   

Python Flask

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 desplácese hasta donde desea crear el proyecto, e introduzca el siguiente comando:

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

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

Instalación de dependencias del proyecto

1. Abra una ventana de consola y cambie al directorio que contiene la aplicación web de ejemplo de Flask:

   cd flask-web-app
   

2. Configuración del entorno virtual:

   • Para Windows, ejecute los siguientes comandos:

   py -m venv .venv
   .venv\scripts\activate
   

   • Para macOS/Linux, ejecute los siguientes comandos:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Para instalar las dependencias de la aplicación, ejecute los siguientes comandos:

   python3 -m pip install -r requirements.txt
   

Configuración de la aplicación web de ejemplo

Para que los usuarios inicien sesión en la aplicación de ejemplo, debe actualizarla con los detalles de su aplicación y de su entidad.

Nodo

1. En el editor de código, abra app\authConfig.js archivo.

2. Busque el marcador de posición:

   • Enter_the_Application_Id_Here y reemplázalo por el ID de cliente (aplicación) de la aplicación que registraste anteriormente.
   • Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio Directorio (inquilino). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.
   • Enter_the_Client_Secret_Here y reemplácelo con el valor secreto de aplicación que copió anteriormente.

ASP.NET Core

1. Vaya al directorio raíz que contiene la aplicación de ejemplo de ASP.NET Core:

   cd 1-Authentication\1-sign-in-aspnet-core-mvc
   

2. Abra el archivo appsettings.json .

3. 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 caseyjensen@onmicrosoft.com, el valor que debe escribir es casyjensen.

4. Busque el Enter_the_Application_Id_Here valor y reemplácelo por el identificador de aplicación (clientId) de la aplicación que registró en el Centro de administración de Microsoft Entra.

5. Reemplace por Enter_the_Client_Secret_Here el valor de secreto de cliente que configuró.

Python Django

1. Abra los archivos del proyecto en Visual Studio Code o en el editor que está usando.

2. Cree un archivo .env en la carpeta raíz del proyecto mediante el archivo .env.sample.external-id como guía.

3. En el archivo .env , proporcione las siguientes variables de entorno:

   1. CLIENT_ID que es el identificador de la aplicación cliente que registraste anteriormente.
   2. CLIENT_SECRET que es el valor del secreto de aplicación que copió anteriormente.
   3. AUTHORITY que es la dirección URL que identifica una autoridad de token. Debe tener el formato https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Reemplazar subdominio, con el subdominio del directorio (tenant). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene su subdominio de inquilino, obtenga información sobre cómo leer los detalles de su inquilino.
   4. REDIRECT_URI que debe ser similar al URI de redireccionamiento que registró anteriormente y debe coincidir con la configuración.

Python Flask

1. Abra los archivos del proyecto en Visual Studio Code o en el editor que está usando.

2. Cree un archivo .env en la carpeta raíz del proyecto mediante el archivo .env.sample.external-id como guía.

3. En el archivo .env , proporcione las siguientes variables de entorno:

   • CLIENT_ID que corresponde al identificador de cliente (aplicación) de la aplicación que registró anteriormente.
   • CLIENT_SECRET que es el valor del secreto de aplicación que copió anteriormente.
   • AUTHORITY que es la dirección URL que identifica una autoridad de token. Debe tener el formato https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Reemplace subdominio por el subdominio Directory (tenant). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene su subdominio de inquilino, obtenga información sobre cómo leer los detalles de su inquilino.

4. Confirme que el URI de redirección está bien configurado. El URI de redirección que registró anteriormente debe coincidir con la configuración. Este ejemplo establece de forma predeterminada la ruta de acceso del URI de redirección en /getAToken. Esta configuración se encuentra en el archivo app_config.py como REDIRECT_PATH.

Ejecución y prueba de una aplicación web de ejemplo

Nodo

Ahora puede probar el ejemplo Node.js aplicación web. Debe iniciar el servidor Node.js y acceder a él a través del explorador en http://localhost:3000.

1. Ejecute el comando siguiente en el terminal:

   npm start 
   

2. Abra el explorador y vaya a http://localhost:3000. Debería ver la página similar a la que aparece en la siguiente captura de pantalla:

   

3. Una vez completada la carga de la página, seleccione Iniciar sesión cuando se le solicite.

4. En la página de inicio de sesión, escriba su dirección de correo electrónico, seleccione Siguiente, escriba la contraseña y, a continuación, seleccione Iniciar sesión. Si no tiene una cuenta, seleccione el vínculo ¿No tiene una cuenta? Cree una, que inicia el flujo de registro.

5. Si elige la opción de registro, después de rellenar el correo electrónico, el código de acceso único, la contraseña nueva y más detalles de la cuenta, complete todo el flujo de registro. Verá una página similar a la que aparece en la siguiente captura de pantalla. Verá una página similar si elige la opción de inicio de sesión.

   

6. Seleccione Cerrar sesión para cerrar la sesión del usuario de la aplicación web o seleccione Ver notificaciones de token de identificador para ver las notificaciones de token de identificador devueltas por Microsoft Entra.

Cómo funciona

Cuando los usuarios seleccionan el vínculo Iniciar sesión , la aplicación inicia una solicitud de autenticación y redirige a los usuarios al identificador externo de Microsoft Entra. En la página de inicio de sesión o registro que aparece, una vez que un usuario inicia sesión correctamente, o crea una cuenta, Microsoft Entra External ID devuelve un token de identificador a la aplicación. La aplicación valida el token de identificador, lee las notificaciones y devuelve una página segura a los usuarios.

Cuando los usuarios seleccionan el vínculo Cerrar sesión, la aplicación borra su sesión y, a continuación, redirige al usuario al punto de conexión de cierre de sesión de Microsoft Entra External ID para notificarle que el usuario ha cerrado la sesión.

Si desea compilar una aplicación similar al ejemplo que ha ejecutado, complete los pasos descritos en El artículo Inicio de sesión de usuarios en su propia aplicación web de Node.js .

ASP.NET Core

1. Desde el shell o la línea de comandos, ejecute los siguientes comandos:

   dotnet run
   

2. Abra el explorador web y vaya a https://localhost:7274.

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

4. Una vez que haya iniciado sesión, el nombre para mostrar se exhibe junto al botón Cerrar sesión, como se muestra en la captura de pantalla siguiente.

   

5. Para cerrar sesión en la aplicación, seleccione el botón Cerrar sesión .

Python Django

Ejecute la aplicación para ver la experiencia de inicio de sesión en juego.

1. Ejecute el comando siguiente en el terminal:

   python manage.py runserver localhost:5000                                             
   

   Puede usar un número de puerto de su elección.

2. Abra el explorador y vaya a http://localhost:5000. Debería ver una página similar a la siguiente captura de pantalla:

   

3. Una vez completada la carga de la página, seleccione el vínculo Iniciar sesión . Se le pedirá que inicie sesión.

4. En la página de inicio de sesión, escriba su dirección de correo electrónico, seleccione Siguiente, escriba la contraseña y, a continuación, seleccione Iniciar sesión. Si no tiene una cuenta, seleccione el vínculo ¿No tiene una cuenta? Cree una, que inicia el flujo de registro.

5. Si elige la opción de registro, pasará por el proceso de registro. Rellene el correo electrónico, el código de acceso único, la nueva contraseña y más detalles de la cuenta para completar todo el flujo de registro.

6. Después de iniciar sesión o registrarse, se le redirigirá de nuevo a la aplicación web. Verá una página similar a la siguiente captura de pantalla:

   

7. Seleccione Cerrar sesión para cerrar la sesión del usuario de la aplicación web o seleccione Llamar a una API de bajada para realizar una llamada a un punto de conexión de Microsoft Graph.

Cómo funciona

Cuando los usuarios seleccionan el vínculo Iniciar sesión , la aplicación inicia una solicitud de autenticación y redirige a los usuarios al identificador externo de Microsoft Entra. A continuación, un usuario inicia sesión o se registra en la página que aparece. Después de proporcionar las credenciales necesarias y dar su consentimiento a los ámbitos necesarios, el identificador externo de Microsoft Entra redirige al usuario a la aplicación web con un código de autorización. A continuación, la aplicación web usa este código de autorización para adquirir un token del identificador externo de Microsoft Entra.

Cuando los usuarios seleccionan el vínculo Cerrar sesión, la aplicación borra su sesión, redirige al usuario al punto de conexión de cierre de sesión de Id. externo de Microsoft Entra para notificarle que el usuario ha cerrado la sesión. A continuación, el usuario se redirige de nuevo a la aplicación web.

Python Flask

Ejecute la aplicación para ver la experiencia de inicio de sesión en juego.

1. Ejecute el comando siguiente en el terminal:

   python3 -m flask run --debug --host=localhost --port=3000
   

   Puede usar el puerto que prefiera. Debe ser similar al puerto del URI de redirección que registró anteriormente.

2. Abra el explorador y vaya a http://localhost:3000. Debería ver la página similar a la que aparece en la siguiente captura de pantalla:

   

3. Una vez completada la carga de la página, seleccione el vínculo Iniciar sesión . Se le pedirá que inicie sesión.

4. En la página de inicio de sesión, escriba su dirección de correo electrónico, seleccione Siguiente, escriba la contraseña y, a continuación, seleccione Iniciar sesión. Si no tiene una cuenta, seleccione el vínculo ¿No tiene una cuenta? Cree una, que inicia el flujo de registro.

5. Si elige la opción de registro, pasará por el flujo de creación de cuenta. Rellene el correo electrónico, el código de acceso único, la nueva contraseña y más detalles de la cuenta para completar todo el flujo de registro.

6. Después de iniciar sesión o registrarse, se le redirigirá de nuevo a la aplicación web. Verá una página similar a la siguiente captura de pantalla:

   

7. Seleccione Cerrar sesión para cerrar la sesión del usuario de la aplicación web o seleccione Llamar a una API de bajada para realizar una llamada a un punto de conexión de Microsoft Graph.

Cómo funciona

Cuando los usuarios seleccionan el vínculo Iniciar sesión , la aplicación inicia una solicitud de autenticación y redirige a los usuarios al identificador externo de Microsoft Entra. A continuación, un usuario inicia sesión o se registra en la página que aparece. Después de proporcionar las credenciales necesarias y dar su consentimiento a los ámbitos necesarios, el identificador externo de Microsoft Entra redirige al usuario a la aplicación web con un código de autorización. A continuación, la aplicación web usa este código de autorización para adquirir un token del identificador externo de Microsoft Entra.

Cuando los usuarios seleccionan el vínculo Cerrar sesión, la aplicación borra su sesión, redirige al usuario al punto de conexión de cierre de sesión de Id. externo de Microsoft Entra para notificarle que el usuario ha cerrado la sesión. A continuación, el usuario se redirige de nuevo a la aplicación web.

Contenido relacionado

Nodo

• Inicio de sesión de usuarios en la aplicación web de Node.js
• Inicio rápido: Inicio de sesión de usuarios y llamada a una API web en Node.js aplicación web de ejemplo
• Inicio rápido: Edición del perfil en una aplicación web de Node.js de ejemplo

ASP.NET Core

• Use nuestra serie de tutoriales de varias partes para compilar esta aplicación web de ASP.NET desde cero
• Habilitar restablecimiento de contraseña
• Personalizar la marca predeterminada

Python Django

• Inicio de sesión de usuarios con una aplicación web de Flask de ejemplo
• Habilitar restablecimiento de contraseña
• Personalizar la marca predeterminada

Python Flask

• Habilitar restablecimiento de contraseña
• Personalizar la marca predeterminada