Inicio rápido: Introducción a la extensión Id. externa de Microsoft Entra para Visual Studio Code (versión preliminar)

Se aplica a: inquilinos de Workforce inquilinos externos (más información)

Integrar la autenticación en sus aplicaciones para consumidores y clientes empresariales es esencial para asegurar los recursos y los datos de los clientes. La extensión Id. externa de Microsoft Entra para Visual Studio Code le permite agregar rápidamente la autenticación a las aplicaciones para escenarios de administración de identidades y acceso de clientes (CIAM). Con los ejemplos de aplicaciones proporcionados, puede ver cómo configurar una experiencia de inicio de sesión personalizada y de marca para los usuarios externos de la aplicación sin salir del entorno de desarrollo.

Esta extensión proporciona una configuración básica que crea automáticamente un inquilino para las aplicaciones y lo prepara para los usuarios. También simplifica el flujo de trabajo rellenando automáticamente valores como los identificadores de aplicación en el archivo de configuración para facilitar el proceso de configuración.

Id. externa es un servicio que se puede agregar a una suscripción de Azure. Si ya tiene uno, puede incluir fácilmente Id. externa. De lo contrario, configure una prueba gratuita de Id. externa de Microsoft Entra en Visual Studio Code y empiece por configurar una aplicación de ejemplo.

Instale la extensión

La extensión Id. externa de Microsoft Entra está disponible en Visual Studio Code Marketplace.

1. Si aún no tiene Visual Studio Code instalado, descargue Visual Studio Code y complete los pasos de instalación.
2. Instale la extensión de Id. externa de Microsoft Entra para Visual Studio Code desde aka.ms/ciam/vscode/marketplace.

Una vez instalada la extensión, puede acceder a ella mediante el icono de la barra de actividad.

También puede abrir la extensión desde la página principal de Visual Studio Code: seleccioneAyuda>Página principal y, a continuación, en Tutoriales, seleccione Introducción a Id. externa de Microsoft Entra. Es posible que tenga que seleccionar Más... para expandir la lista de extensiones.

Introducción a la configuración de Id. externa

La extensión Id. externa de Microsoft Entra crea un inquilino en una configuración externa, que contiene la aplicación orientada al cliente y el directorio de usuarios externos. Puede agregar este nuevo inquilino a la suscripción de Azure existente. O bien, si no tiene una suscripción de Azure, cree un inquilino de prueba que no requiera uno (más información).

• En la página principal Introducción a Id. externa de Microsoft Entra, elija una opción:

  • Si aún no tiene una cuenta de Azure, seleccione Configurar una prueba gratuita.
  • Si ya tiene una cuenta de Azure, seleccione Usar suscripción de Azure.

Configurar una prueba gratuita

1. Seleccione Configurar una prueba gratuita.

2. En el mensaje de confirmación de inicio de sesión, seleccione Permitir.

3. Se abre una nueva ventana del explorador. Inicie sesión con su cuenta personal, cuenta Microsoft (MSA) o cuenta de GitHub. Una vez que haya iniciado sesión, cierre la ventana del explorador.

4. Vuelva a Visual Studio Code. En el menú ¿Dónde debe ubicarse el inquilino?, seleccione una ubicación para los datos del inquilino. Esta selección no se puede cambiar más adelante.

5. Escriba un nombre para el inquilino.

   

6. La extensión crea el inquilino de prueba. Para ver el progreso, abra la ventana Ver>salida. Una vez completado el proceso, aparece Se ha creado el inquilino.

Uso de la suscripción

1. Seleccione Usar mi suscripción.

2. Si hay varios inquilinos asociados a su cuenta, aparece el menú Elegir un directorio. Seleccione el directorio (inquilino) asociado a la suscripción que desea usar.

   

   Nota:

   Si aparece el mensaje No hay suscripciones disponibles, puede configurar una evaluación gratuita en su lugar.

3. Se abre una página del explorador donde puede iniciar sesión en su cuenta. Después de iniciar sesión, vuelva a Visual Studio Code.

4. En el menú Agregar una suscripción, seleccione la suscripción.

5. En el menú Seleccionar un grupo de recursos, elija un grupo de recursos.

6. En el menú ¿Dónde debe ubicarse el inquilino?, seleccione una ubicación para los datos del inquilino. Esta selección no se puede cambiar más adelante.

7. Escriba un nombre para el inquilino y, a continuación, seleccione Enter para crear el inquilino.

   

   Nota:

   El proceso de creación de inquilinos puede tardar hasta 30 minutos. Una vez creado el inquilino, puede acceder a él tanto en el Centro de administración de Microsoft Entra como en Azure Portal.

Configuración del inicio de sesión para los usuarios

Puede configurar la aplicación para permitir que los usuarios inicien sesión con su correo electrónico y una contraseña o un código de acceso de un solo uso. También puede diseñar la apariencia de la experiencia del usuario agregando el logotipo de la empresa, cambiando el color de fondo o ajustando el diseño del inicio de sesión. Estos cambios se aplican a la apariencia de todas las aplicaciones de este nuevo inquilino.

1. En Configurar el inicio de sesión para los usuarios, seleccione Configurar inicio de sesión y personalización de marca.

   

2. Se le pedirá que inicie sesión en el nuevo inquilino. Seleccione Permitir y, en la ventana del explorador que se abre, elija la cuenta que usa actualmente e inicie sesión. Vuelva a Visual Studio Code.

3. En el menú ¿Cómo desea que los usuarios inicien sesión? de la parte superior, elija el método de inicio de sesión que desea poner a disposición de los usuarios: correo electrónico y contraseña o correo electrónico y código de acceso de un solo uso.

   

4. Seleccione Aceptar.

5. Elija dónde desea que aparezca la página de inicio de sesión en la ventana del explorador, si alineada al centro o alineada a la derecha.

   

6. Seleccione un color de fondo para la página de registro.

   

7. A continuación, se abre una ventana del Explorador de archivos para que pueda agregar el logotipo de la empresa. Vaya al archivo del logotipo de la empresa y seleccione Cargar.

   Nota:

   Los requisitos de imagen son los siguientes:

   • Tamaño de imagen 245 x 36 píxeles
   • Tamaño máximo de archivo de 50 KB
   • Tipo de archivo: PNG transparente o JPEG

8. Aparece el mensaje Configuración del flujo de inicio de sesión. Puede ver el progreso en la ventana Salida. Una vez finalizada la configuración, aparece el mensaje La configuración del flujo de usuarios ha finalizado.

Configuración y ejecución de una aplicación de ejemplo

La extensión contiene varios ejemplos de código que muestran cómo se implementa la autenticación en diferentes tipos de aplicaciones y lenguajes de desarrollo. Se incluyen ejemplos para aplicaciones de página única (JavaScript, React, Angular) y aplicaciones web (Node.js Express, ASP.NET Core, Python Django, Python Flask). Elija un ejemplo desde la extensión y esta configurará automáticamente la aplicación con la experiencia de inicio de sesión.

1. En Configurar y ejecutar una aplicación de ejemplo, seleccione el botón Configurar aplicación de ejemplo.

   

2. En el menú, seleccione el tipo de aplicación que desea descargar. Si se le pide que vuelva a seleccionar su cuenta, elija la misma cuenta que ha estado usando.

   

3. Se abre una ventana del Explorador de archivos para que pueda elegir dónde desea guardar el repositorio de ejemplo. Seleccione una carpeta y, a continuación, seleccione Descargar repositorio aquí.

4. Una vez completada la descarga, se abre un nuevo área de trabajo del proyecto de Visual Studio Code con la carpeta de la aplicación descargada que se muestra en el Explorador.

5. Abra un nuevo terminal en la ventana de Visual Studio Code.

6. En el menú superior, seleccione Ejecutar>Ejecutar sin depurar. La consola de depuración muestra el progreso del script de inicio. Hay un breve retraso mientras se configura el proyecto y se ejecuta el script de compilación.

Cuando la extensión descarga la aplicación, actualiza automáticamente la configuración de la Biblioteca de autenticación de Microsoft (MSAL) para conectarse al nuevo inquilino y usar la experiencia configurada. No se necesita ninguna configuración adicional; puede ejecutar la aplicación en cuanto se compile el proyecto. Por ejemplo, en el archivo authConfig, el clientId se establece en el identificador de aplicación y la autoridad se establece en el subdominio del nuevo inquilino.

Ejecución de la experiencia

Una vez completada la instalación, pruebe la experiencia de inicio de sesión escribiendo el URI de redirección del host local para la aplicación en un explorador. La dirección URL de redireccionamiento está disponible en el archivo README.md de la aplicación.

Uso de la vista Explorador

La vista Explorador muestra las aplicaciones registradas y los flujos de usuario de autenticación en el inquilino. Puede ver información de configuración o navegar directamente al Centro de administración de Microsoft Entra para configurar o administrar aún más el recurso. Para acceder a la vista Explorador, abra la extensión Id. externa de Microsoft Entra seleccionando el icono de la barra de actividades.

Administrar recursos

Para ver los recursos del proyecto, expanda los nodos en el panel izquierdo en Administrar recursos.

En la vista Explorador, puede seleccionar un recurso e ir directamente al Centro de administración de Microsoft Entra para administrarlo o configurarlo. Por ejemplo, haga clic con el botón derecho en una aplicación y seleccione Abrir en el Centro de administración. Se le pedirá que inicie sesión y, a continuación, el Centro de administración de Microsoft Entra se abrirá directamente en la página de registro de la aplicación para esa aplicación.

Acciones de Introducción

En la sección Introducción, puede acceder a la documentación de la prueba gratuita o ir directamente a la configuración de la experiencia de inicio de sesión o a páginas de descarga de aplicaciones de ejemplo sin abrir el tutorial de la extensión.

Pasos siguientes

Obtenga más información sobre los inquilinos de prueba gratuita de Id. externa.