カテゴリー
自宅Slackサーバーの作り方〜Bolt-js(Bolt for Javascript)で試す
※ 当ページには【広告/PR】を含む場合があります。
2022/01/30

Slackサーバー
Slackアプリを設定する
Create App



First Slack App

OAuth
①ユーザートークン:
認証したユーザーに成り代わってAPIメソッドを呼び出す。
1つのワークスペース対して複数のユーザートークンが存在してもよい
②ボットトークン:
ボットユーザーに関連づけられ、1つのワークスペースで一度だけ発行される。
ほとんどのSlackアプリに適用させる基本のトークン
③アプリレベルトークン:
アカウントで利用している全ての組織を横断して利用できるアプリを代理できる。
例として大多数のWebSocketコネクションを確立するためのアプリに利用できる
[Oauth & Permissoins] > [Scopes] > [Bot Token Scopes]

[Add an OAuth Scope]
chat:write

Install App
[Settings] > [Install App]
[Install to Workspace]



xoxb-...
Slackアプリの中身をTypecriptで実装してみる
TypescriptでSlackアプリプロジェクトを作成する
git clone
$ git clone https://github.com/tacoskingdom/example_first_slack_app.git
yarn install
main.ts
import { App } from '@slack/bolt';
const app = new App({
signingSecret: process.env.SLACK_SIGNING_SECRET,
token: process.env.SLACK_BOT_TOKEN,
});
//☆この位置にイベント処理をコーディング
(async () => {
await app.start(process.env.PORT || 3000);
console.log('⚡️ Slack Bolt now is serving!');
})();
app.message('hello', async ({ message, say }) => {
await say(`<@${(message as any).user}> はん、まいどおおきに!`);
});
hello
Credentials(サイン認証キーとボットトークン)を変数に設定
[Basic Information] > [App Credentials]
[Signing Secret]

$ export SLACK_SIGNING_SECRET="サイン認証キー"
$ export SLACK_BOT_TOKEN="ボットトークン(xoxbから始まるもの)"
$ echo $SLACK_SIGNING_SECRET
<サイン認証キー...>
$ echo $SLACK_BOT_TOKEN
<ボットトークン...>
Slackアプリの起動テスト
$ yarn build && yarn start
$ node dist/index.js
⚡️ Bolt app is running!
Slackサーバーの動作確認を行う
リモートでSlackのサブスクリプションを有効にする
$ ngrok http 3000
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Session Expires 1 hour, 55 minutes
Version 2.3.40
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://xxxx-xxx-xxx-xxx-xx.ngrok.io -> http://localhost:3000
Forwarding http://xxxx-xxx-xxx-xxx-xx.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p90
1 0 0.00 0.00 5.02 5.02
[Event Subscriptions] > [Enable Events]をOn > [Request URL]
https://xxxx-xxx-xxx-xxx-xxx.ngrok.io/slack/events
Verified

ボットに権限スコープを仕込む

[Event Subscriptions] > [Subscribe to bot events]
ワークスペースでボットを使ってみる!
First Slack App
App
チャンネル
+
first-slack-app

App
First Slack App
[チャンネルにこのアプリを追加する]

hello

まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー