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

• Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones móviles y de escritorio . 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
• Node.js
• Visual Studio Code u otro editor de código

• Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones móviles y de escritorio . 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://login.microsoftonline.com/common/oauth2/nativeclient
  • URIs de redirección personalizadas: ms-appx-web://microsoft.aad.brokerplugin/{client_id} donde {client_id} es el identificador de aplicación (cliente) de la aplicación.
• Visual Studio con la carga de trabajo Desarrollo de la Plataforma universal de Windows instalada

• 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-javascript-nodejs-desktop.git
  

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

• 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/active-directory-dotnet-desktop-msgraph-v2.git
  

• Descargar el archivo de .zip

En el editor de código, abra el archivo ms-identity-javascript-nodejs-desktop-main/App/authConfig.js . Reemplace el valor de la siguiente manera:

El archivo debe ser similar al siguiente:

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

1. Extraiga el archivo ZIP en una carpeta local cerca de la raíz del disco, por ejemplo, C:\Azure-Samples.

2. Abra el proyecto en Visual Studio.

3. Edite active-directory-wpf-msgraph-v2/App.xaml.cs y reemplace los valores de los campos ClientId y Tenant por el código siguiente:

   private static string ClientId = "Enter_the_Application_Id_here";
   private static string Tenant = "Enter_the_Tenant_Info_Here";
   

Donde:

• Enter_the_Application_Id_here: es el identificador de aplicación (cliente) de la aplicación que registró.

  Para encontrar el valor de ID. de aplicación (cliente), vaya a la página de información general de la aplicación en el Centro de administración de Microsoft Entra.

• Enter_the_Tenant_Info_Here : se establece en una de las siguientes opciones:

  • Si la aplicación admite cuentas de en este directorio organizativo, reemplace este valor por el Id. de Tenant de o por el nombre de Tenant de (por ejemplo, contoso.microsoft.com).

  • Si la aplicación admite cuentas de en cualquier directorio organizativo, reemplace este valor por organizations

  • Si la aplicación admite cuentas de en cualquier directorio organizativo y cuentas personales de Microsoft, reemplace este valor por common.

    Para buscar los valores de id. de directorio (inquilino) y tipos de cuenta admitidos, vaya a la página información general de la aplicación en el Centro de administración de Microsoft Entra.

1. Deberá instalar las dependencias de este ejemplo una vez:

   cd ms-identity-javascript-nodejs-desktop-main
   npm install
   

2. A continuación, ejecute la aplicación a través del símbolo del sistema o la consola:

   npm start
   

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 aplicación.

Para compilar y ejecutar la aplicación de ejemplo en Visual Studio, siga estos pasos:

1. Seleccione el menú Depurar>Iniciar depuración, o presione la tecla F5. Se muestra MainWindow de la aplicación.
2. Seleccione el botón Llamar a Microsoft Graph API .
3. Inicie sesión con su cuenta de Microsoft Entra (cuenta profesional o educativa) o las credenciales de la cuenta Microsoft (live.com, outlook.com).
4. Si ejecuta la aplicación por primera vez, se le pedirá que proporcione su consentimiento para permitir que la aplicación acceda a su perfil de usuario e inicie sesión. Después de dar su consentimiento a los permisos solicitados, la aplicación muestra que ha iniciado sesión correctamente.

Debería ver información básica de token y datos de usuario obtenidos de la llamada a Microsoft Graph API.

Para más información sobre el desarrollo de aplicaciones de escritorio de Electron con MSAL Node, consulte el tutorial:

Pruebe el tutorial de escritorio de Windows para obtener una guía paso a paso completa sobre la creación de aplicaciones y nuevas características, incluida una explicación completa de este inicio rápido.

• Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones móviles y de escritorio . 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
• Node.js
• Visual Studio Code u otro editor de código*

• Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones móviles y de escritorio . 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: msal{client_id}://auth donde {client_id} es el identificador de aplicación (cliente) de la aplicación.
• SDK de .NET 7.0 o posterior
• Visual Studio 2022 con la carga de trabajo de MAUI instalada:
  • Instrucciones para Windows
  • Instrucciones para macOS
• Adición de la aplicación al flujo de usuario

• Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones móviles y de escritorio . 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 redireccionamiento personalizado: https://login.microsoftonline.com/common/oauth2/nativeclient. Debe escribirse manualmente.
• Visual Studio Code u otro editor de código
• .NET 7.0 o posterior
• Adición de la aplicación al flujo de usuario

Para obtener el código de ejemplo de la aplicación de escritorio, descargue el archivo .zip o clone la aplicación web de ejemplo de GitHub ejecutando el siguiente comando:

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

Si decide descargar el archivo .zip, extraiga el archivo de la aplicación de ejemplo en una carpeta donde la longitud total de la ruta de acceso no tenga más de 260 caracteres.

Instalación de dependencias del proyecto

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

   cd 1-Authentication\3-sign-in-electron\App
   

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

   npm install && npm update
   

Para obtener el código de ejemplo de la aplicación de escritorio de .NET MAUI, descargue el archivo .zip o clone la aplicación de escritorio de. NET MAUI de ejemplo desde GitHub mediante la ejecución del siguiente comando:

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

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.

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

2. Busque el marcador de posición:

   1. Enter_the_Application_Id_Here y reemplázalo por el ID de cliente (aplicación) de la aplicación que registraste anteriormente.

   2. 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.

1. En Visual Studio, abra el archivo ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json.
2. Busque el marcador de posición:
   1. 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.
   2. Enter_the_Application_Id_Here y reemplázalo por el ID de cliente (aplicación) de la aplicación que registraste anteriormente.

1. Abra el proyecto en su IDE (como Visual Studio o Visual Studio Code) para configurar el código.

2. En el editor de código, abra el archivo appsettings.json en la carpeta ms-identity-ciam-dotnet-tutorial>1-Authentication>5-sign-in-dotnet-wpf .

3. Sustituya Enter_the_Application_Id_Here con el ID de aplicación (cliente) de la aplicación que registró anteriormente.

4. Reemplace Enter_the_Tenant_Subdomain_Here por el subdominio del directorio (inquilino). Por ejemplo, si el dominio principal es contoso.onmicrosoft.com, reemplace Enter_the_Tenant_Subdomain_Here por contoso. Si no tiene el dominio principal, obtenga información sobre cómo leer los detalles del inquilino.

Ahora puede probar la aplicación de escritorio Electron de ejemplo. Después de ejecutar la aplicación, la ventana de la aplicación de escritorio aparece automáticamente:

1. Ejecute el comando siguiente en el terminal:

   npm start
   

   

2. En la ventana de escritorio que aparece, seleccione el botón Iniciar sesión o Registrarse. Se abre una ventana del explorador y se le pide que inicie sesión.

3. En la página de inicio de sesión del explorador, 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.

4. Si elige la opción de registro, después de rellenar el correo electrónico, el código de acceso de un solo uso, la nueva contraseña y más detalles de la cuenta, completará 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. En la página se muestran las notificaciones de identificador de token.

   

Las aplicaciones .NET MAUI están diseñadas para ejecutarse en varios sistemas operativos y dispositivos. Deberá seleccionar el destino con el que quiere probar y depurar la aplicación.

Establezca el Destino de depuración en la barra de herramientas de Visual Studio en el dispositivo con el que desea depurar y probar. En los siguientes pasos se muestra cómo establecer el Destino de depuración en Windows:

1. Seleccione la lista desplegable Destino de depuración.
2. Seleccione el Marco de trabajo
3. Seleccione net7.0-windows...

Ejecute la aplicación presionando F5 o seleccionando el botón reproducir situado en la parte superior de Visual Studio.

1. Ahora puede probar la aplicación de escritorio de .NET MAUI de ejemplo. Después de ejecutar la aplicación, la ventana de la aplicación de escritorio aparece automáticamente:

   

2. En la ventana de escritorio que aparece, seleccione el botón Iniciar sesión. Se abre una ventana del explorador y se le pide que inicie sesión.

   

   Durante el proceso de inicio de sesión, se le pedirá que conceda varios permisos (para permitir que la aplicación acceda a los datos). Después de iniciar sesión correctamente y dar su consentimiento, la pantalla de la aplicación muestra la página principal.

   

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

   cd 1-Authentication\5-sign-in-dotnet-wpf
   

2. En el terminal, ejecute la aplicación mediante la ejecución del siguiente comando:

   dotnet run
   

3. Después de iniciar el ejemplo, debería ver una ventana con un botón para Iniciar sesión. Haga clic en el botón Inicial sesión.

   

4. En la página de inicio de sesión, escriba la dirección de correo electrónico de su cuenta. Si no tiene una cuenta, seleccione ¿No tiene una cuenta? Cree una, que inicia el flujo de registro. Siga este flujo para crear una nueva cuenta e iniciar sesión.

5. Una vez que inicie sesión, verá una pantalla en la que se muestra el inicio de sesión correcto y la información básica sobre la cuenta de usuario almacenada en el token recuperado. La información básica se muestra en la sección Información del token de la pantalla de inicio de sesión.

• Habilite el restablecimiento de contraseña.
• Personalice la marca predeterminada.
• Explore el código de ejemplo de la aplicación de escritorio Electron.

• Tutorial: Creación de una aplicación MAUI de .NET.
• Habilite el restablecimiento de contraseña.
• Personalice la marca predeterminada.

• Tutorial: Autenticación de usuarios en la aplicación de escritorio de WPF
• Habilite el restablecimiento de contraseña.
• Personalice la marca predeterminada.