Datadogを使った不正ログインのモニタリング実装

<html><head></head><body>こんにちは、エンジニアの <a href="https://tech.plaid.co.jp/author/takanori_koga">@koga</a> です。 
今回は開発でよく使うGitHubとSlackのスレッドを同期する仕組みの取り組みと実装例を紹介します。プレイドでは、社内開発した Slack App 「<a href="https://issit.plaid.co.jp/" target="_blank" rel="noreferrer">issit</a>」を使って、SlackメッセージからGitHub issueを作成し日々のタスク管理などに活用しています。
「issit」とは、Slack上で流れていってしまうやりとりをGitHub issueにすることで、フロー情報をストック情報に変換するためのアプリです。このアプリにより、SlackからGitHub Issueへストックする流れができました。 
<img src="https://ik.imagekit.io/plaid/d00392d8-4759-4a64-867d-00fc66afafaa/issit-1.png" alt="issit-1.png">
2022年8月のPLAIDのデータを確認すると、作成されたissueの約5.8%が「issit」からの作成であることが分かりました。 
しかし、やっていくうちに課題も出てきました。
<h2 id="見えてきた課題">見えてきた課題</h2>
GitHub issueのコメントに気付けないことがある。ということが見えてきました。
issueはclosedにしているけれど、Slackで終わったか確認している会話を見かけたり、issueにコメントを書いた後、Slackで「issueにコメントしました！」という会話も見かけることがありました。 
Slackでコメントしている理由は簡単で、GitHubへのコメントでは気づかれないからです。
<h2 id="解決した方法">解決した方法</h2>
この課題を解決するために、GitHub issueのコメントやステータスをSlackに反映する仕組みを<a href="https://docs.github.com/ja/get-started/customizing-your-github-workflow/exploring-integrations/about-webhooks" target="_blank" rel="noreferrer">GitHub webhook</a>を使って実装しました。 
これによって “新しいissitの図” のように、SlackとGitHubで双方向の流れができ、issueのコメントに気づけるような仕組みにすることができます。 
<img src="https://ik.imagekit.io/plaid/1d84ef34-c593-464c-8a11-ee4dd7957a18/issit-2.png" alt="issit-2.png">
<h2 id="解決した実例紹介">解決した実例紹介</h2>
「issit」はSlackのメッセージショートカットからGitHub issueを作成することができます。 
メッセージショートカットを実行するとモーダルが表示され、GitHub webhookの設定もモーダルでおこなえます。
GitHub webhookの設定項目は２つあります。
<ul>
<li>issueのcloseをSlackのスレッドへ通知する設定</li>
<li>issueコメントをSlackスレッドへSyncする設定</li>
</ul>
<img src="https://ik.imagekit.io/plaid/0c63f389-b0a8-4098-b0d6-75ad44dba515/issit-example-1.png" alt="issit-example-1.png">
issue作成したあとにGitHub webhook設定を変更することも可能です。 
「issit」の投稿で、Slackのメッセージショートカット「issitのGitHub webhook設定」を実行するとモーダルが表示されます。 
<img src="https://ik.imagekit.io/plaid/7cdb2bc4-d46d-460e-861b-9f6248a4020b/issit-example-2.png" alt="issit-example-2.png">
そのモーダル内で各項目を変更し保存することでGitHub wobhook設定を変更することができます。 
<img src="https://ik.imagekit.io/plaid/e933315f-a74b-4c2f-ab96-3e3c2146a249/issit-example-3.png" alt="issit-example-3.png">
defaultのGitHub webhookを設定しておくことも可能です。 
設定したいチャンネルで <code>/issit</code>とコマンドを実行するとチャンネルで設定したリポジトリ一覧が表示されます。 
<img src="https://ik.imagekit.io/plaid/816fb676-7717-4995-9d9e-4a4c4e302045/issit-example-4.png" alt="issit-example-4.png">
リポジトリの「Settings」を押すと、issue作成時のdefault値を設定できるモーダルが表示され設定することができます。 
<img src="https://ik.imagekit.io/plaid/16f45527-0f48-431e-ab62-bf7ebd74d4fe/issit-example-5.png" alt="issit-example-5.png">
<h2 id="実装の紹介">実装の紹介</h2>
「issit」は<a href="https://github.com/slackapi/bolt-js" target="_blank" rel="noreferrer">slack/bolt</a>を使用して実装しているため、GitHub webhookを受け付ける実装もboltに対応している必要があります。Expressを使用したサンプルはよく見かけますが、slack/boltでのサンプルはなかなかありませんでした。
ただ、slack/boltには <a href="https://slack.dev/bolt-js/reference#app-options" target="_blank" rel="noreferrer">receiver</a> という機能があり、外部からのアクセスを受け取ることができます。このreceiver機能を使用することでGitHub webhookを受け取るようにしました。
<pre><code class="language-typescript hljs">// Bolt.ts
const receiver = new ExpressReceiver({
 signingSecret: credentials.SLACK_SIGNING_SECRET,
})

export const app = new App({
 authorize: SlackInstaller.authorize,
 signingSecret: credentials.SLACK_SIGNING_SECRET,
 endpoints: '/slack/events',
 receiver,
})
</code></pre>
<pre><code class="language-typescript hljs">// index.ts
import { app } from "./Bolt"
// express router
import github from "./routes/GitHub"

// express routerのように使用できます
app.receiver.app.use('/github', github)
</code></pre>
GitHub webhookの実装には、<a href="https://github.com/octokit/webhooks" target="_blank" rel="noreferrer">octokit/webhooks</a>を使用することにしました。 
octokit/webhooksは、受け付けるwebhookのイベントとアクションごとに指定できるためとても便利です。 
参考: <a href="https://docs.github.com/ja/developers/webhooks-and-events/webhooks/webhook-events-and-payloads" target="_blank" rel="noreferrer">GitHub Webhook のイベントとペイロード</a>
<pre><code class="language-typescript hljs">// index.ts
import { createMiddlewareGitHubWebhooks } from './routes/github'

const middlewareGitHubWebhooks = await createMiddlewareGitHubWebhooks()
app.receiver.app.use(middlewareGitHubWebhooks)
</code></pre>
<pre><code class="language-typescript hljs">// routes/github.ts
import { Webhooks, createNodeMiddleware } from '@octokit/webhooks'

import { IssueClosedUseCase } from './IssueClosedUseCase'
import { IssueCommentCreatedUseCase } from './IssueCommentCreatedUseCase'
import { IssueCommentEditdUseCase } from './IssueCommentEditdUseCase'
import { IssueCommentDeletedUseCase } from './IssueCommentDeletedUseCase'

export const createMiddlewareGitHubWebhooks = async () =&gt; {
 const webhooks = new Webhooks({
 secret: credentials.GITHUB_WEBHOOK_SECRET_TOKEN,
 })

 webhooks.on('issues.closed', IssueClosedUseCase)
 webhooks.on('issue_comment.created', IssueCommentCreatedUseCase)
 webhooks.on('issue_comment.edited', IssueCommentEditdUseCase)
 webhooks.on('issue_comment.deleted', IssueCommentDeletedUseCase)

 return createNodeMiddleware(webhooks, { path: '/github-webhooks' })
}
</code></pre>
<h2 id="GitHub App の設定">GitHub App の設定</h2>
「Issit」のGitHub連携は、<a href="https://docs.github.com/ja/developers/apps/building-github-apps/creating-a-github-app" target="_blank" rel="noreferrer">GitHub App</a> を作成しGitHub Organizationへインストールすることで実現しています。
GitHub webhookを使用するためにはGitHub Appの設定でwebhookを有効にする必要があります。設定する項目は以下の３つです。
<ul>
<li>App settings画面 「General」でWebhookをActiveにし受け付けるURL を指定する。 
<img src="https://ik.imagekit.io/plaid/baa5e133-0c24-4823-9c44-e14157b5048f/github-app-setting-1.png" alt="github-app-setting-1.png"></li>
<li>App settings画面 「Permissions &amp; events」にて、webhookで受け取りたいイベントの権限を付与する
<ul>
<li>Issue: Read and write - Issueの作成、Issueのコメントを取得するため</li>
</ul>
</li>
<li>App settings画面 「Permissions &amp; events」の Subscribe to events で、受け取りたいイベントにチェックを入れる
<ul>
<li>Issues: Issueの変更内容やCloseされたことを検知するため</li>
<li>Issues comment: Issueのコメントの作成・変更・削除を検知するため 
<img src="https://ik.imagekit.io/plaid/8cb82e50-5293-468a-b0fb-fbfc77decb11/github-app-setting-2.png" alt="github-app-setting-2.png"></li>
</ul>
</li>
</ul>
Permissionsを指定した状態でGitHub Marketplaceへ公開した場合、Subscribe to eventsの変更はリリース申請なしに変更することができました。「issit」の場合も、issueの作成と読み込みの権限を指定しGitHub Marketplaceへ公開していたため、Subscribe to eventsの変更は申請なしに使用することができました。
<h2 id="「issit」での動作確認">「issit」での動作確認</h2>
Slack App「Issit」をSlackワークスペースへインストールし、GitHub Appの「<a href="https://github.com/apps/issit-app" target="_blank" rel="noreferrer">issit-app</a>」をGitHub Organizationへインストールすることで、SlackとGitHub間で相互に連携できるようになりました。
<img src="https://ik.imagekit.io/plaid/68f0b2f5-3b39-4837-8e7d-44b83f4881c2/issit-comment-sync-3.png" alt="issit-comment-sync-3.png">
<h2 id="まとめ">まとめ</h2>
SlackからGitHubへの一方向ではなく、GitHubからSlackの双方向にすることで、issueの状態をSlackでも確認しやすくすることができました。GitHubやSlackはAPIやwebhookが充実していますので、職場やプロジェクトの運用にあったAppを実装してみるのも良いのではないでしょうか。
実装が難しい場合は、 「<a href="https://issit.plaid.co.jp/" target="_blank" rel="noreferrer">issit</a>」 の導入も検討していただけたら嬉しいです。
</body></html>

GitHub issueとSlackスレッドを同期する仕組みと「issit」での実装例