Agregar sso a tab & aplicación de extensión de mensaje - Teams

El inicio de sesión único de Microsoft Entra (Microsoft Entra SSO) ayuda a autenticar a los usuarios en Teams.

Aspectos clave del inicio de sesión único de Microsoft Entra:

Permite al usuario iniciar sesión automáticamente después del primer inicio de sesión.
Permite al usuario iniciar sesión en otros dispositivos sin volver a escribir las credenciales.
Obtiene el token para el usuario que ha iniciado sesión.

Esta guía paso a paso le ayuda a crear pestañas y extensiones de mensajes que habilitan la autenticación de Inicio de sesión único de Microsoft Entra. Verá la siguiente salida:

Captura de pantalla de la pestaña y la extensión de mensaje con la salida de autenticación sso después de completar correctamente la guía paso a paso.

Requisitos previos

17 minutos restantes

Asegúrese de instalar las herramientas siguientes y de configurar el entorno de desarrollo:

	Instalar	Para usar...
	Microsoft Teams	Microsoft Teams para colaborar con todos los usuarios con los que trabaje a través de aplicaciones para chat, reuniones y llamadas en un solo lugar.
	Cuenta de desarrollador de Microsoft 365	Acceso a la cuenta de Teams con los permisos adecuados para instalar una aplicación.
	SDK de .NET Core	Enlaces personalizados para la depuración local y las implementaciones de aplicaciones de Azure Functions. Si no ha instalado la versión más reciente, instale la versión portátil.
	Visual Studio 2022	Puede instalar la versión empresarial en Visual Studio 2022 e instalar las cargas de trabajo ASP.NET y desarrollo web. Use la versión más reciente.
	Túnel de desarrollo	Las características de aplicaciones de Teams (bots conversacionales, extensiones de mensajes y webhooks entrantes) necesitan conexiones entrantes. Un túnel conecta el sistema de desarrollo a Teams. Dev tunnel es una herramienta eficaz para abrir de forma segura tu host local a Internet y controlar quién tiene acceso. El túnel de desarrollo está disponible en Visual Studio 2022, versión 17.7.0 o posterior. o también puede usar ngrok como túnel para conectar el sistema de desarrollo a Teams. No es necesario para las aplicaciones que solo incluyen pestañas. Este paquete se instala en el directorio del proyecto (mediante npm `devDependencies`).

Nota:

Después de descargar ngrok, regístrese e instale authtoken.

Configuración del entorno local

16 minutos restantes

Abra Microsoft-Teams-Samples.
Seleccione Código.
En el menú desplegable, seleccione Abrir con GitHub Desktop.
Seleccione Clonar.

Registro de la aplicación Microsoft Entra

15 minutos restantes

Los pasos siguientes le ayudan a crear y registrar el bot en Azure Portal:

Cree y registre la aplicación de Azure.
Cree un secreto de cliente para habilitar la autenticación sso del bot.
Agregue el canal de Teams para implementar el bot.
Cree un túnel a los puntos de conexión del servidor web mediante el túnel de desarrollo (recomendado) o ngrok.
Agregue el punto de conexión de mensajería al túnel de desarrollo que ha creado.

Agregar registro de aplicación

Acceda a Portal Azure.
Seleccione Registros de aplicaciones.
Seleccione + Nuevo registro.
Escriba el nombre de la aplicación.
Seleccione Cuentas en cualquier directorio organizativo (cualquier inquilino de Microsoft Entra ID: multiinquilino).
Seleccione Registrar.

La aplicación está registrada en Microsoft Entra ID. Aparece la página de información general de la aplicación.

Nota:

Guarde el identificador de la aplicación desde el identificador de aplicación (cliente) y el identificador de directorio (inquilino) para su uso posterior.

Creación de un túnel

túnel de desarrollo
ngrok

Abra Visual Studio.
Seleccione Crear un nuevo proyecto.
En el cuadro de búsqueda, escriba ASP.NET. En los resultados de la búsqueda, seleccione ASP.NET Core Web App.
Seleccione Siguiente.
Escriba Nombre del proyecto y seleccione Siguiente.
Seleccione Crear.

Aparece una ventana de información general.
En la lista desplegable de depuración, seleccione Túneles de desarrollo (sin túnel activo)>Crear un túnel....

Aparecerá una ventana emergente.
Actualice los detalles siguientes en la ventana emergente:
1. Cuenta: escriba una cuenta de Microsoft o GitHub.
2. Nombre: escriba un nombre para el túnel.
3. Tipo de túnel: en la lista desplegable, seleccione Temporal.
4. Acceso: en la lista desplegable, seleccione Público.
Seleccione Aceptar.

Aparece una ventana emergente que muestra que el túnel de desarrollo se ha creado correctamente.
Seleccione Aceptar.

Puede encontrar el túnel que ha creado en la lista desplegable de depuración de la siguiente manera:
Seleccione F5 para ejecutar la aplicación en el modo de depuración.
Si aparece un cuadro de diálogo Advertencia de seguridad , seleccione Sí.

Aparecerá una ventana emergente.
Seleccione Continuar.

La página principal del túnel de desarrollo se abre en una nueva ventana del explorador y el túnel de desarrollo ya está activo.
Vaya a Visual Studio y seleccione Ver > salida.
En el menú desplegable Consola de salida , seleccione Túneles de desarrollo.

La consola de salida muestra la dirección URL del túnel de desarrollo.

Use ngrok o símbolo del sistema para crear un túnel a los puntos de conexión HTTPS disponibles públicamente del servidor web en ejecución local. Ejecute el siguiente comando en ngrok:

ngrok http --host-header=localhost 3978

Sugerencia

Si encuentra ERR_NGROK_4018, siga los pasos proporcionados en el símbolo del sistema para registrarse y autenticar ngrok. A continuación, ejecute el comando ngrok http --host-header=localhost 3978.

La ventana muestra la dirección URL HTTPS.

Captura de pantalla que muestra la dirección URL HTTPS de ngrok.

Adición de una autenticación web

En el panel izquierdo, en Administrar, seleccione Autenticación.
Seleccione Agregar una plataforma>web.
Escriba el URI de redireccionamiento de la aplicación anexando auth-end al nombre de dominio completo. Por ejemplo, https://your-devtunnel-domain/auth-end o https://your-ngrok-domain/auth-end.
En Flujos híbridos y de concesión implícita, seleccione las casillas Tokens de acceso y tokens de identificador .
Seleccione Configurar.
En Web, seleccione Agregar URI.
Escriba https://token.botframework.com/.auth/web/redirect.
Haga clic en Guardar.

Creación de un secreto de cliente

En el panel izquierdo, en Administrar, seleccione Certificados & secretos.
En Secretos de cliente, seleccione + Nuevo secreto de cliente.

Aparece la ventana Agregar un secreto de cliente .
Escriba Descripción.
Seleccione Agregar.
En Valor, seleccione Copiar en el Portapapeles para guardar el valor del secreto de cliente para su uso posterior.

Agregar permisos de API

En el panel izquierdo, seleccione Permisos de API.
Seleccione + Agregar un permiso.
Seleccione Microsoft Graph.
Seleccione Permisos delegados
SeleccioneUsuario.Lectura>.
Seleccione Agregar permisos.

Nota:

Si a una aplicación no se le concede el consentimiento del administrador de TI, los usuarios deben proporcionar su consentimiento la primera vez que usen una aplicación.
Los usuarios solo deben dar su consentimiento a los permisos de API si la aplicación Microsoft Entra está registrada en un inquilino diferente.

Agregar uri de identificador de aplicación

En el panel izquierdo, en Administrar, seleccione Exponer una API.
Junto a URI de id. de aplicación, seleccione Agregar.
Actualice el URI del identificador de aplicación en el api://your-devtunnel-domain/botid-{AppID} formato o api://your-ngrok-domain/botid-{AppID} y seleccione Guardar.

En la imagen siguiente se muestra el nombre de dominio:

Agregar un ámbito

En el panel izquierdo, en Administrar, seleccione Exponer una API.
Seleccione + Agregar un ámbito.
Escriba access_as_user como nombre del ámbito.
En ¿Quién puede dar su consentimiento?, seleccione Administradores y usuarios.
Actualice los valores del resto de los campos de la siguiente manera:
- Escriba Teams para acceder al perfil del usuario como nombre para mostrar del consentimiento del administrador.
- Entrar Permite a Teams llamar a las API web de la aplicación como el usuario actual como descripción del consentimiento del administrador.
- Escriba Teams para acceder al perfil de usuario y realizar solicitudes en nombre del usuario como nombre para mostrar del consentimiento del usuario.
- Escriba Habilitar Teams para llamar a las API de esta aplicación con los mismos derechos que el usuario que ladescripción del consentimiento del usuario.
Asegúrese de que Estado se establece en Habilitado.
Seleccione Agregar ámbito.

En la imagen siguiente se muestran los campos y los valores:

Nota:

El nombre del ámbito debe coincidir con el URI del identificador de aplicación con /access_as_user anexado al final.

Agregar aplicación cliente

En el panel izquierdo, en Administrar, seleccione Exponer una API.

En Aplicaciones cliente autorizadas, identifique las aplicaciones que desea autorizar para la aplicación web de la aplicación.
Seleccione + Agregar una aplicación cliente.
Agregue aplicaciones web de Teams para dispositivos móviles o de escritorio y Teams.
1. Para equipos móviles o de escritorio de Teams: escriba el identificador de cliente como 1fec8e78-bce4-4aaf-ab1b-5451cc387264.
2. En Web de Teams: escriba el identificador de cliente como 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.
Active la casilla Ámbitos autorizados .
Seleccione Agregar aplicación.

En la imagen siguiente se muestra el identificador de cliente:

Actualizar el manifiesto

En el panel izquierdo, seleccione Manifiesto.
Establezca el valor de en accessTokenAcceptedVersion2 y seleccione Guardar.

Creación del bot

10 minutos restantes

Creación de un recurso de bot de Azure

Nota:

Si ya está probando el bot en Teams, cierre la sesión de esta aplicación y Teams. Para ver este cambio, vuelva a iniciar sesión.

Ve a Inicio.
Seleccione + Crear un recurso.
En el cuadro de búsqueda, escriba Azure Bot.
Seleccione Introducir.
Seleccione Bot de Azure.
Seleccione Crear.
Escriba el nombre del bot en Identificador de bot.
Seleccione su Suscripción en la lista desplegable.
Seleccione el Grupo de recursos en la lista desplegable.

Si no tiene un grupo de recursos existente, puede crear un nuevo grupo de recursos. Para crear un nuevo grupo de recursos, siga estos pasos:
1. Seleccione Crear nuevo.
2. Escriba el nombre del recurso y seleccione Aceptar.
3. Seleccione una ubicación en la lista desplegable Nueva ubicación del grupo de recursos .
En Precios, seleccione Cambiar plan.
Seleccione FO FreeSelect (Seleccionar libre> de FO).
En Id. de aplicación de Microsoft, seleccione Tipo de aplicación como multiinquilino.
En Tipo de creación, seleccione Usar registro de aplicación existente.
Escriba el identificador de aplicación.

Nota:

No puede crear más de un bot con el mismo identificador de aplicación de Microsoft.
Seleccione Revisar y crear.
Una vez superada la validación, seleccione Crear.

El bot tarda unos minutos en aprovisionarse.
Seleccione Ir a recursos.

Ha creado correctamente el bot de Azure.

Agregar un canal de Teams

En el panel izquierdo, seleccione Canales.
En Canales disponibles, seleccione Microsoft Teams.
Active la casilla para aceptar los Términos de servicio.
Seleccione Aceptar.
Seleccione Aplicar.

Para agregar un punto de conexión de mensajería

túnel de desarrollo
ngrok

Use la dirección URL del túnel de desarrollo en la consola de salida como punto de conexión de mensajería.
En el panel izquierdo, en Configuración, seleccione Configuración.
Actualice el punto de conexión de mensajería con el formato https://your-devtunnel-domain/api/messages.
Seleccione Aplicar.

Ha configurado correctamente un bot en Azure Bot Service.

Nota:

Si la clave de instrumentación de Application Insights muestra un error, actualice con el identificador de aplicación.

En ngrok, copie la dirección URL HTTPS.

Nota:

La dirección URL HTTPS de ngrok es el nombre de dominio completo. WebAppDomain es un nombre de dominio completo que no incluye https:// en él.
En el panel izquierdo, en Configuración, seleccione Configuración.
Actualice el punto de conexión de mensajería con el formato https://your-ngrok-domain/api/messages.
Seleccione Aplicar.

Ha configurado correctamente un bot en Azure Bot Service.

Nota:

Si la clave de instrumentación de Application Insights muestra una actualización de error con el identificador de aplicación.

Agregar una configuración de conexión de OAuth

En el panel izquierdo, seleccione Configuración.
Seleccione el botón Agregar ajustes de conexión de OAuth en la pantalla Configuración.
En Nueva configuración de conexión, actualice los detalles siguientes:
- Nombre: escriba un nombre para la nueva configuración de conexión. Puede usar el nombre en la configuración del código de bot service.
- Proveedor de servicios: en la lista desplegable, seleccione Azure Active Directory v2.
- Id. de cliente: actualice el identificador de aplicación de Microsoft.
- Secreto de cliente: actualice el valor de los secretos de cliente.
- Dirección URL de Intercambio de tokens: actualice el URI del identificador de aplicación.
- Identificador de inquilino: escriba Común.
- Ámbitos: escriba User.Read.
Haga clic en Guardar.

Configuración de la aplicación

5 minutos restantes

Vaya al archivo appsettings.json en el repositorio clonado.
Abra el archivo appsettings.json en Visual Studio.
Actualice la siguiente información:
- Reemplace por "MicrosoftAppId" el identificador de aplicación de Microsoft del bot.
- Reemplace por "MicrosoftAppPassword" el valor de los secretos de cliente del bot.
- Reemplace por "SiteUrl" la dirección URL de ngrok.
- Reemplace por "ConnectionName" el nombre de la configuración de conexión de OAuth.
- Reemplace por "TenantId" el identificador de inquilino del inquilino donde se usa la aplicación.
- Reemplace por "ClientId" el identificador de aplicación de Microsoft del bot.
- Reemplace por "AppSecret" el valor de los secretos de cliente del bot.
- Reemplace "ApplicationIdURI" en forma de api://*******.ngrok.io/botid-{AppID}.

Configuración del archivo de manifiesto

4 minutos restantes

Vaya al archivo manifest.json en el repositorio clonado.
Abra el archivo manifest.json en Visual Studio y realice los siguientes cambios:
- Reemplace por DOMAIN-NAME la dirección URL de ngrok.
- Reemplace por YOUR-MICROSOFT-APP-ID el identificador de aplicación de Microsoft del bot.
  
  Nota:
  
  Dependiendo del escenario [YOUR-MICROSOFT-APP-ID] y [DOMAIN-NAME] puede producirse varias veces.
- Reemplace resource como api://*******.ngrok.io/botid-{AppID}.

Compilación y ejecución del servicio

3 minutos restantes

Para compilar y ejecutar el servicio, use Visual Studio o la línea de comandos.

Visual Studio
Línea de comandos

Abra Visual Studio.
Seleccione Archivo>Abrir>proyecto o solución....
En la carpeta csharp , seleccione Archivo Sample.csproj del inicio de sesión único de la aplicación .
Pulse F5 para ejecutar el proyecto.
Seleccione Sí si aparece el siguiente cuadro de diálogo:

Aparece una página web con un mensaje El bot está listo.

Vaya a la carpeta csharp en una ventana del símbolo del sistema y escriba el siguiente comando:

dotnet run

Dotnet

Carga de una aplicación de SSO en Teams

2 minutos restantes

En el repositorio clonado, vaya a csharp>App SSO Sample>TeamsAppManifest.
Cree un archivo .zip con los siguientes archivos presentes en la carpeta Manifiesto :
- manifest.json
- icon-outline.png
- icon-color.png
En el cliente de Teams, seleccione el icono Aplicaciones .
Seleccione Administrar las aplicaciones.
Seleccione Cargar una aplicación.
Busque la opción Cargar una aplicación personalizada. Si ve la opción , la carga de aplicaciones personalizada está habilitada.

Nota:

Póngase en contacto con el administrador de Teams si no encuentra la opción de cargar una aplicación personalizada.
Seleccione Abrir para cargar el archivo .zip que creó en la carpeta Manifiesto .
Seleccione Agregar.
Envíe un mensaje al bot.
El bot realiza el inicio de sesión único y muestra la tarjeta de perfil junto con la solicitud de opción para ver el token.
Seleccione Sí para ver el token o No para continuar con el chat.
Si no se realiza el inicio de sesión único, el bot realiza el método de autenticación predeterminado para la pestaña.
Para iniciar sesión, si no se realiza el inicio de sesión único:
1. En el panel izquierdo de Teams, seleccione Más aplicaciones agregadas (●●●).
2. Seleccione la nueva aplicación sso.
3. Seleccione Iniciar sesión.
4. Escriba sus credenciales en la ventana Iniciar sesión y seleccione Siguiente.
5. Seleccione Aceptar.
6. Seleccione el perfil en el cuadro de búsqueda. Verá la siguiente salida:
Envíe https://profile.botframework.com a la aplicación para obtener una tarjeta de perfil.