Par un traducteur: nous publions pour vous
un article de Tomomi Imura sur la façon de développer une application intégrée avec Slack
Les actions permettent aux utilisateurs de Slack d'interagir avec votre application à l'aide de messages: signaler un problème avec un bogue, envoyer une demande au service d'assistance ou faire autre chose. Cette fonctionnalité est similaire aux fonctionnalités intégrées telles que les commentaires ou le partage.
Ce didacticiel vous guidera tout au long du processus de création d'une application en direct.
Skillbox recommande: Cours pratique de deux ans "Je suis un développeur Web PRO . "
Nous vous rappelons: pour tous les lecteurs de «Habr» - une remise de 10 000 roubles lors de l'inscription à un cours Skillbox en utilisant le code promo «Habr».
Le didacticiel sera utile à tous ceux qui souhaitent apprendre l'API Slack. Lors du développement de l'application, Node.js est utilisé, donc si vous voulez répéter le sujet de la conversation, installez-le.
Le projet terminé se trouve sur
GitHub , avec une version simplifiée sur
Glitch .
ClipIt! pour mouNous allons développer l'application Slack pour l'application imaginaire ClipIt! Imaginons que nous gérons un service Web qui vous permet de «déposer» une partie d'une page Web en la stockant dans une base de données. Les utilisateurs peuvent accéder au contenu stocké à partir d'un appareil mobile ou d'un PC, le service est multi-plateforme. Et aussi ClipIt! vous permet de joindre du texte dans un environnement de message Slack à l'aide d'Action.
Voici un gif montrant comment fonctionne l'application.
Et voici l'algorithme d'interaction utilisateur avec ClipIt! de Slack:
- L'utilisateur survole le message et sélectionne Couper le message dans le menu déroulant.
- Un dialogue s'ouvre, ce qui donne plus d'opportunités.
- L'utilisateur confirme l'action.
- ClipIt! pour Slack exporte le message dans la base de données ClipIt !.
- ClipIt! pour Slack envoie un DM à l'utilisateur avec confirmation.
Personnalisez l'application
Connectez-vous à votre compte Slack et créez l'application en utilisant
ce lien . Saisissez son nom et sa portée.
Cliquez sur le bouton Créer une application, puis sur Informations de base, faites défiler jusqu'à Informations d'identification de l'application.
Après cela, ouvrez Signing Secret et copiez le code à utiliser comme variable d'environnement SLACK_SIGNING_SECRET dans votre fichier .env dans le nœud racine. Je vais vous expliquer ce que c'est et comment tout utiliser, dans la section «Demande de vérification», un peu plus bas.
SLACK_SIGNING_SECRET = 15770a ...
Faites défiler un peu plus loin pour remplir les informations d'affichage avec l'icône et la description de votre application.
Activez maintenant l'interactivité dans les composants interactifs. En faisant cela, vous verrez plus de champs sur la page.
Il est temps de saisir l'URL de demande - c'est l'adresse à laquelle Slack envoie les données correspondantes lorsque l'utilisateur démarre l'action.
Il doit s'agir de l'URL de votre serveur sur lequel le code d'application s'exécute. Par exemple, si vous avez publié tout cela dans Glitch, votre URL ressemblerait à
example.glitch.me/actions . Si vous utilisez le tunneling lorsque vous travaillez avec des services comme ngrok, utilisez l'URL du service (par exemple,
example.ngrok.io , puis ajoutez / actions).
Une fois que vous avez entré l'URL de demande, faites défiler vers le bas jusqu'à Actions et cliquez sur Créer une nouvelle action. Remplissez le formulaire:
Cliquez sur Créer, puis sur Enregistrer les modifications.
Ensuite, accédez à Utilisateurs de robots. Cliquez sur Ajouter un utilisateur de bot et nommez le bot d'application.
Maintenant, cliquez sur Ajouter un utilisateur Bot et enregistrez.
L'étape suivante consiste à accéder à OAuth & Permissions et à cliquer sur Installer l'application sur Workspace. Une fois l'installation terminée, la page vous ramènera à OAuth & Permission avec des jetons d'accès. Copiez le jeton de bot et enregistrez le tout dans le fichier .env.
SLACK_ACCESS_TOKEN = xoxb-214 ...
De plus, les portées devront être activées sur la même page. Après cela, assurez-vous que le bot et la commande sont mis en surbrillance.
Maintenant que tous les paramètres sont prêts, nous commençons à créer - nous écrivons une application.
Création d'application
Comme mentionné ci-dessus, lors de la création de l'application, Node.js et ExpressJS sont utilisés. Afin de travailler avec tout cela, installez les dépendances ExpressJS, bodyParser et autre chose. Donc, j'utilise le client de requête HTTP axios avec qs.
$ npm installe l'analyseur de corps express axios qs dotenv --save
Commençons par le plus important. Nous changerons le code plus tard lorsque nous ajouterons plus de fonctionnalités. Créez d'abord le fichier index.js. Dans ce fichier, nous configurons le serveur pour écouter sur le port correspondant:
require('dotenv').config();
Avant de continuer, jetons un œil au schéma décrivant les principes de fonctionnement de tout ce dont nous parlons.
Chaque thread est initialisé lorsque l'utilisateur effectue des actions situées dans le menu des messages. Dès que l'événement message_action se déclenche, Slack envoie l'application de charge utile à l'URL de demande qui a été enregistrée précédemment.
Le point de terminaison peut être écrit comme suit:
app.post('/actions', (req, res) => { const payload = JSON.parse(req.body.payload); const {type, user, submission} = payload;
Si le type d'événement est message_action, l'application ouvre une boîte de dialogue.
Ensuite, nous ajoutons le code qui définit la structure du contenu du dialogue, avec son ouverture dans le client Slack, en utilisant la méthode dialog.open:
const dialogData = { token: process.env.SLACK_ACCESS_TOKEN, trigger_id: payload.trigger_id, dialog: JSON.stringify({ title: 'Save it to ClipIt!', callback_id: 'clipit', submit_label: 'ClipIt', elements: [ { label: 'Message Text', type: 'textarea', name: 'message', value: payload.message.text }, { label: 'Importance', type: 'select', name: 'importance', value: 'Medium ', options: [ { label: 'High', value: 'High ' }, { label: 'Medium', value: 'Medium ' }, { label: 'Low', value: 'Low ️' } ], }, ] }) };
Ici, nous utilisons le module axios pour exécuter une requête POST à Slack; après cela, la méthode dialog.open ouvre une boîte de dialogue en envoyant un état HTTP de 200.
Le point final est également activé si le dialogue est initié par l'utilisateur. Dans le code d'extrait 2, vous devez répondre avec une demande HTTP 200 vide afin que Slack sache que la vue a été reçue.
Enfin, nous envoyons un message de confirmation à l'utilisateur à l'aide de la méthode chat.postMessage.
else if (type === 'dialog_submission') { res.send('');
Maintenant, exécutons le code et voyons comment l'application fonctionne en intégration avec Slack. Si tout va bien, faites le dernier pas.
Demande de vérification
Maintenant, prenons soin de la sécurité des applications et ajoutons la vérification des demandes. Vérifiez toujours toutes les demandes de Slack avant de les emmener au travail.
Pour ce faire, revenez à l'extrait 1, qui se trouve tout en haut. Remplacez l'endroit où il y a un commentaire // Les deux lignes suivantes seront modifiées plus tard, avec ceci:
const rawBodyBuffer = (req, res, buf, encoding) => { if (buf && buf.length) { req.rawBody = buf.toString(encoding || 'utf8'); } }; app.use(bodyParser.urlencoded({verify: rawBodyBuffer, extended: true })); app.use(bodyParser.json({ verify: rawBodyBuffer }));
J'ai déjà
activé la cryptographie dans
verifySignature.js , il suffit donc d'ajouter une fonction au début de index.js:
const signature = require('./verifySignature');
Maintenant, nous effectuons la vérification:
if(!signature.isVerified(req)) {
Je recommande de vérifier les demandes chaque fois que votre application les reçoit de Slack.
Nous exécutons à nouveau le code, et si tout fonctionne comme il se doit, vous pouvez célébrer le succès! Félicitations!