Creación de conectores para Grupos de Microsoft 365

Con las aplicaciones de Microsoft Teams, puede agregar el conector existente para Grupos de Microsoft 365 o crear uno nuevo en Teams. Para obtener más información, vea compilación de su propio conector.

Vea el siguiente vídeo para obtener información sobre cómo crear conectores para Grupos de Microsoft 365:

Agregar un conector a la aplicación de Teams

Puede crear un paquete y publicar el conector como parte del envío de AppSource. Puede distribuir el conector registrado como parte del paquete de la aplicación de Teams. Para obtener información sobre los puntos de entrada de la aplicación de Teams, vea capacidades. También puede proporcionar el paquete directamente a los usuarios para cargarlo en Teams.

Para distribuir el conector, regístrelo en el Conectores Panel de control para desarrolladores.

Para que un conector funcione solo en Teams, siga las instrucciones para enviar el conector en la publicación de la aplicación en el artículo de Microsoft Teams Store . De lo contrario, un conector registrado funciona en todos los productos de Microsoft 365 que admiten aplicaciones, incluidos Outlook y Teams.

Cree la base de datos de configuración:

Los usuarios pueden completar toda la experiencia de configuración del conector sin tener que salir del cliente de Teams. Para obtener la experiencia, Teams puede insertar la página de configuración directamente en un iframe. La secuencia de operaciones es la siguiente:

1. El usuario selecciona su conector para iniciar el proceso de configuración.

2. El usuario interactúa con la experiencia web para completar la configuración.

3. El usuario selecciona Guardar, que desencadena una devolución de llamada en el código.

   Nota:

   • El código puede procesar el evento de guardado recuperando la configuración del webhook. El código almacena el webhook para publicar eventos más adelante.
   • La experiencia de configuración se carga en línea en Teams.

Puede reutilizar la experiencia de configuración web existente o crear una versión independiente para hospedarla específicamente en Teams. El código debe incluir la biblioteca TeamsJS. Esto proporciona a su código acceso a las API para realizar operaciones comunes, como obtener el contexto de usuario, canal o equipo, e iniciar flujos de autenticación.

Para integrar la experiencia de la configuración:

1. Inicialice TeamsJS llamando a app.initialize().

2. Llame a pages.config.setValidityState(true) para habilitar Guardar.

   Nota:

   Debe llamar a microsoftTeams.pages.config.setValidityState(true) como respuesta a la selección del usuario o a la actualización de campos.

3. Registre microsoftTeams.pages.config.registerOnSaveHandler() el controlador de eventos, al que se llama cuando el usuario selecciona Guardar.

4. Llame a microsoftTeams.pages.config.setConfig() para guardar la configuración del conector. La configuración guardada también se muestra en el cuadro de diálogo de configuración si el usuario intenta actualizar una configuración existente para el conector.

5. Llame a microsoftTeams.pages.getConfig() para capturar las propiedades de webhook, incluida la dirección URL.

   Nota:

   Debe llamar a microsoftTeams.pages.getConfig() cuando la página se cargue por primera vez en caso de reconfiguración.

6. Registre microsoftTeams.pages.config.registerOnRemoveHandler() controlador de eventos, al que se llama cuando el usuario quita el conector.

Este evento ofrece al servicio la oportunidad de realizar cualquier acción de limpieza.

El código siguiente proporciona un código HTML de ejemplo para crear una página de configuración del conector sin el servicio de atención al cliente y el soporte técnico:

<h2>Send notifications when tasks are:</h2>
<div class="col-md-8">
    <section id="configSection">
        <form id="configForm">
            <input type="radio" name="notificationType" value="Create" onclick="onClick()"> Created
            <br>
            <br>
            <input type="radio" name="notificationType" value="Update" onclick="onClick()"> Updated
        </form>
    </section>
</div>

<script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" integrity="sha384-Q2Z9S56exI6Oz/ThvYaV0SUn8j4HwS8BveGPmuwLXe4CvCUEGlL80qSzHMnvGqee" crossorigin="anonymous"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>

<script>
        function onClick() {
            pages.config.setValidityState(true);
        }

        await microsoftTeams.app.initialize();
        pages.config.registerOnSaveHandler(function (saveEvent) {
            var radios = document.getElementsByName('notificationType');

            var eventType = '';
            if (radios[0].checked) {
                eventType = radios[0].value;
            } else {
                eventType = radios[1].value;
            }

            await pages.config.setConfig({
                entityId: eventType,
                contentUrl: "https://YourSite/Connector/Setup",
                removeUrl:"https://YourSite/Connector/Setup",
                configName: eventType
                });

            pages.getConfig().then(async (config) {
                // We get the Webhook URL from config.webhookUrl which needs to be saved. 
                // This can be used later to send notification.
            });

            saveEvent.notifySuccess();
        });

        pages.config.registerOnRemoveHandler(function (removeEvent) {
            alert("Removed" + JSON.stringify(removeEvent));
        });

</script>

Para autenticar al usuario como parte de la carga de la página, consulte flujo de autenticación para las pestañas para integrar el inicio de sesión cuando la página está incrustada.

getConfig Propiedades de la respuesta

En la tabla siguiente se proporcionan los parámetros y los detalles de las propiedades de respuesta getConfig:

Controlar ediciones

El código debe controlar los usuarios que vuelven para editar una configuración de conector existente. Para ello, llame a microsoftTeams.pages.config.setConfig() durante la configuración inicial con los parámetros siguientes:

• entityId es el identificador personalizado que representa lo que el usuario ha configurado y comprendido por el servicio.
• configName es un nombre que el código de configuración puede recuperar.
• contentUrl es una dirección URL personalizada que se carga cuando un usuario edita una configuración de conector existente.

Esta llamada se realiza como parte del controlador de eventos de guardado. A continuación, cuando se carga, el código debe llamar getConfig() a para rellenar previamente cualquier configuración o formulario en la contentUrl interfaz de usuario de configuración.

Control de eliminaciones

Opcionalmente, puede ejecutar un controlador de eventos cuando el usuario quita una configuración de conector existente. Para registrar este controlador, llame a microsoftTeams.pages.config.registerOnRemoveHandler(). Este controlador se usa para realizar operaciones de limpieza, como quitar entradas de una base de datos.

Incluir el conector en el manifiesto de la aplicación

Descargue el manifiesto de aplicación generado automáticamente (anteriormente denominado manifiesto de aplicación de Teams) desde el Portal para desarrolladores. Realice los pasos siguientes antes de probar o publicar la aplicación:

1. Incluya dos iconos.
2. Modifique la icons parte del archivo de manifiesto de la aplicación para incluir los nombres de archivo de los iconos en lugar de las direcciones URL.

El siguiente ejemplo de manifest.json contiene los elementos necesarios para probar y enviar la aplicación:

Ejemplo de manifest.json con conector

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  "id": "e9343a03-0a5e-4c1f-95a8-263a565505a5",
  "version": "1.0",
  "developer": {
    "name": "Publisher",
    "websiteUrl": "https://www.microsoft.com",
    "privacyUrl": "https://www.microsoft.com",
    "termsOfUseUrl": "https://www.microsoft.com"
  },
  "description": {
    "full": "This is a small sample app we made for you! This app has samples of all capabilities Microsoft Teams supports.",
    "short": "This is a small sample app we made for you!"
  },
  "icons": {
    "outline": "sampleapp-outline.png",
    "color": "sampleapp-color.png"
  },
  "connectors": [
    {
      "connectorId": "e9343a03-0a5e-4c1f-95a8-263a565505a5",
      "scopes": [
        "team"
      ]
    }
  ],
  "name": {
    "short": "Sample App",
    "full": "Sample App"
  },
  "accentColor": "#FFFFFF",
  "needsIdentity": "true"
}

Pruebe su conector

Para probar el conector, cárguelo en un equipo con cualquier otra aplicación. Puede crear un paquete de .zip mediante el archivo de manifiesto de la aplicación desde los dos archivos de icono y el Panel para desarrolladores de conectores, modificados como se indica en Incluir el conector en el manifiesto de la aplicación.

Después de cargar la aplicación, abra la lista Conectores desde cualquier canal. Desplácese hasta la parte inferior para ver la aplicación en la sección Cargada.

Para comprobar que HttpPOST acción funciona correctamente, envíe mensajes al conector.

Siga la guía paso a paso para crear y probar los conectores en Teams.

Distribución de webhook y conector

1. Cree webhooks entrantes directamente para su equipo.

2. Agregue una página de configuración y publique el webhook entrante en un conector para Grupos de Microsoft 365.

3. Empaqueta y publica el conector como parte del envío de AppSource.

Ejemplo de código

En la tabla siguiente se proporciona el nombre de ejemplo y su descripción:

Guía paso a paso

Siga la guía paso a paso para crear y probar el conector en Teams.

Vea también

• Webhooks y conectores
• Creación de webhooks entrantes
• Crear webhooks salientes
• Crear y enviar mensajes
• Cómo pueden los administradores habilitar o deshabilitar conectores
• Cómo pueden los administradores publicar conectores personalizados en su organización
• Esquema del manifiesto de la aplicación