Crear una pestaña personal con ASP.NET Core

En este tutorial, veremos cómo crear una pestaña personal personalizada con páginas principales de Razor y C# y ASP.Net. También usaremos App Studio para Microsoft Teams para finalizar el manifiesto de la aplicación e implementar la pestaña en Teams.

Requisitos previos

  • Para completar este tutorial, necesitará un inquilino de Microsoft 365 y un equipo configurado con la opción permitir cargar aplicaciones personalizadas habilitadas. Para obtener más información, vea preparar el inquilino de Microsoft 365.

    • Si actualmente no tiene una cuenta de Microsoft 365, puede registrarse para obtener una suscripción gratuita a través del programa de desarrolladores de Microsoft. La suscripción permanecerá activa siempre que la use para el desarrollo continuado.
  • Usará App Studio para importar la aplicación a Microsoft Teams. Para instalar App Studio, Apps seleccione aplicación de la  tienda de aplicaciones en la esquina inferior izquierda de la aplicación Teams y busque App Studio. Una vez que encuentre el icono, selecciónelo y elija instalar en el cuadro de diálogo ventana emergente.

Además, este proyecto requiere que tenga instalado lo siguiente en el entorno de desarrollo:

  • La versión actual del IDE de Visual Studio con la carga de trabajo multiplataforma del núcleo de .net instalada. Si todavía no tiene Visual Studio, puede descargar e instalar la versión más reciente de la comunidad de Microsoft Visual Studio Community de forma gratuita.

  • La herramienta de proxy inverso de ngrok . Usará ngrok para crear un túnel a los puntos de conexión HTTPS del servidor Web que se ejecutan de forma local. Puede descargarla aquí.

Obtener el código fuente

Abra un símbolo del sistema y cree un nuevo directorio para el proyecto de pestañas. Proporcionamos un proyecto sencillo para empezar. Para recuperar el código fuente, puede descargar la carpeta ZIP y extraer los archivos o clonar el repositorio de muestra en el nuevo directorio:

git clone https://github.com/OfficeDev/microsoft-teams-sample-tabs.git

Una vez que tenga el código fuente, abra Visual Studio y seleccione abrir un proyecto o solución. Navegue hasta el directorio de la aplicación de la pestaña y Abra PersonalTab. sln.

Para compilar y ejecutar la aplicación, presione F5 o elija iniciar depuración en el menú depurar . En un explorador, navegue a las siguientes direcciones URL para comprobar que la aplicación se cargó correctamente:

  • http://localhost:44325/
  • http://localhost:44325/personal
  • http://localhost:44325/privacy
  • http://localhost:44325/tou

Revisar el código fuente

Startup.cs

Este proyecto se creó a partir de una plantilla vacía de la aplicación Web de ASP.NET Core 2,2 con la casilla de verificación Advanced-configure for https seleccionada en la instalación. Los servicios MVC se registran mediante el método del marco de inserción de dependencias ConfigureServices() . Además, la plantilla vacía no habilita el servicio de contenido estático de forma predeterminada, por lo que el middleware de archivos estáticos se agrega al Configure() método:

public void ConfigureServices(IServiceCollection services)
  {
      services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

carpeta wwwroot

En ASP.NET Core, la carpeta Web raíz es donde la aplicación busca archivos estáticos.

Index. cshtml

ASP.NET Core trata los archivos denominados index como página principal o predeterminada del sitio. Cuando la dirección URL del explorador apunta a la raíz del sitio, se mostrará index. cshtml como la Página principal de la aplicación.

Carpeta AppManifest

Esta carpeta contiene los siguientes archivos de paquete de la aplicación obligatorios:

  • Un icono de color completo que mide 192 x 192 píxeles.
  • Un icono de contorno transparente que mide 32 x 32 píxeles.
  • Un manifest.jsen archivo que especifica los atributos de la aplicación.

Estos archivos deben comprimirse en un paquete de la aplicación que se usará para cargar la pestaña en Teams. Microsoft Teams cargará el contentUrl especificado en el manifiesto, lo incrustará en un <iframe > y lo representará en la pestaña.

. csproj

En la ventana Explorador de soluciones de Visual Studio, haga clic con el botón secundario en el proyecto y seleccione Editar archivo de proyecto. En la parte inferior del archivo, verá el código que crea y actualiza la carpeta ZIP cuando se genera la aplicación:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Actualizar la aplicación

_Layout. cshtml

Para que la pestaña aparezca en Microsoft Teams, debe incluir el SDK del cliente de JavaScript para Microsoft Teams e incluir una llamada a microsoftTeams.initialize() después de que se cargue la página. Así es como la pestaña y la aplicación Microsoft Teams se comunican:

  • Navegue hasta la carpeta compartida , Abra _Layout. cshtmly agregue lo siguiente a la <head> sección Etiquetas:
`<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>`
`<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>`

PersonalTab. cshtml

Abra PersonalTab. cshtml y actualice las etiquetas <script> insertadas llamando microsoftTeams.initialize()a.

Asegúrese de guardar la PersonalTab. cshtmlactualizada.

Establecer un túnel seguro a la pestaña

Microsoft Teams es un producto basado en la nube completamente y requiere que el contenido de la pestaña esté disponible en la nube con puntos de conexión HTTPS. Teams no permite el hospedaje local. Tendrá que publicar su pestaña en una dirección URL pública o usar un proxy que expondrá el puerto local a una dirección URL accesible desde Internet.

Para probar la pestaña, use ngrok. Los puntos de conexión web del servidor estarán disponibles mientras se ejecuta ngrok en el equipo local. Si cierra ngrok, las direcciones URL serán distintas la próxima vez que la inicie.

  • Abra un símbolo del sistema en la raíz del directorio del proyecto y ejecute el siguiente comando:
ngrok http https://localhost:44325 -host-header="localhost:44325"
  • Ngrok escuchará las solicitudes de Internet y las dirigirá a la aplicación cuando se ejecute en el puerto 44325. Debe ser similar https://y8rPrT2b.ngrok.io/ a donde y8rPrT2b se reemplaza por su dirección URL https alfanumérica de ngrok.

  • Asegúrese de mantener el símbolo del sistema con ngrok en ejecución y tome nota de la dirección URL, que lo necesitará más adelante.

  • Compruebe que ngrok se está ejecutando y que funciona correctamente abriendo el explorador y yendo a la página de contenido a través de la dirección URL https ngrok que se proporcionó en la ventana del símbolo del sistema.

Sugerencia

Debe tener la aplicación en Visual Studio y ngrok en ejecución para completar este inicio rápido. Si necesita detener la ejecución de la aplicación en Visual Studio para trabajar en ella, mantenga ngrok en ejecución. Seguirá escuchando y reanudará el enrutamiento de la solicitud de la aplicación cuando se reinicie en Visual Studio. Si tiene que reiniciar el servicio ngrok, devolverá una nueva dirección URL y tendrá que actualizar todos los sitios que usen esa dirección URL.

Ejecutar la aplicación

  • En Visual Studio, presione F5 o elija iniciar depuración en el menú depurar de la aplicación.

Cargar la pestaña en Teams con App Studio

Nota

Usamos App Studio para editar el archivo manifest. JSON y cargar el paquete completado en Teams. También puede editar manifest. JSON manualmente si lo prefiere. Si lo hace, asegúrese de volver a crear la solución para crear el archivo . zip de pestañas que se va a cargar.

  • Abra el cliente de Microsoft Teams. Si usa la versión basada en Web , puede inspeccionar el código Front-end con las herramientas de desarrollode su explorador.

  • Abra App Studio y seleccione la pestaña Editor de manifiestos .

  • Seleccione el icono importar una aplicación existente en el editor de manifiestos para empezar a actualizar el paquete de la aplicación de la pestaña. El código fuente incluye su propio manifiesto parcialmente completado. El nombre del paquete de la aplicación es Tab. zip. Se debe encontrar aquí:

/bin/Debug/netcoreapp2.2/Tab.zip
  • Cargue la ficha. zip en App Studio.

Actualizar el paquete de la aplicación con el editor de manifiestos

Una vez que haya cargado el paquete de la aplicación en App Studio, tendrá que finalizar la configuración.

  • Seleccione el icono de la pestaña recién importada en el panel derecho de la página de bienvenida del editor de manifiestos.

Hay una lista de pasos en la parte izquierda del editor de manifiestos y, a la derecha, una lista de propiedades que deben tener valores para cada uno de estos pasos. La gran parte de la información se ha proporcionado en manifest. JSON , pero hay algunos campos que debe actualizar:

Detalles: detalles de la aplicación

En la sección detalles de la aplicación :

  • En identificación , seleccione generar para generar un nuevo identificador de aplicación para la aplicación.

  • En información para desarrolladores , actualice la dirección URL del sitio web con la dirección URL https de ngrok .

  • En direcciones URL de aplicaciones **** https://<yourngrokurl>/privacy , actualice la declaración de privacidad y las https://<yourngrokurl>/tou condiciones de uso para>.

Capacidades: pestañas

En la sección de tabulaciones :

  • En Agregar una pestaña personal , seleccione Agregar. Aparecerá una ventana emergente de cuadro de diálogo.

  • Complete el campo nombre .

  • Complete el campo identificador de entidad .

  • Actualice el campo dirección URL de contenido https://<yourngrokurl>/personalTabcon el.

  • Deje en blanco el campo dirección URL del sitio web .

  • Haga clic en Guardar.

Finalizar: dominios y permisos

En la sección dominios y permisos , los dominios del campo de pestañas deben contener la dirección URL de ngrok sin el <yourngrokurl>.ngrok.io/prefijo https.

Finalizar: probar y distribuir

Importante

En el campo Descripción de la derecha, verá la siguiente ADVERTENCIA:

⚠ "la matriz ' validDomains ' no puede contener un sitio de túnel..."

Esta advertencia puede omitirse mientras se prueba la pestaña.

En la sección probar y distribuir :

  • Haga clic en Instalar.

  • En la ventana emergente, asegúrese de que Agregar para usted está establecido en y Agregar a un equipo o chat está establecido en no.

  • Haga clic en Instalar.

  • En la siguiente ventana emergente, seleccione abrir y se mostrará la pestaña.

Ver su pestaña personal

  • En la barra de navegación ubicada en la parte más a la izquierda de la aplicación Teams, seleccione el ... menú. Se le mostrará una lista de aplicaciones personales.

  • Seleccione la pestaña de la lista para ver.