OAuthフローを実装して、Slackアプリをワークスペースにインストールする

Slack アプリを Web アプリと連携すると、Web アプリ上の操作に応じて Slack へ通知を送れるため、より便利に活用できます。
現在、acomo では申請や承認時など、必要なタイミングで Slack 通知を自動で送信する機能を開発中です。

この連携を実現するには、Web アプリから Slack アプリをインストールし、必要な権限（スコープ）を付与するための認可が必要です。

そこで今回は OAuthフロー を実装して、Slack アプリをインストールする方法をご紹介します！

シーケンス図

今回実装する、OAuth 認可コードフローのシーケンス図は以下の通りです。

実装手順

以下の手順で、作成した Slack アプリをワークスペースにインストールできます。

1. Slack アプリを作成する
2. Slack アプリを設定する
3. Web アプリケーションから認可リクエストを送信する
4. Slack の認証画面でユーザーがアプリに対してアクセスを許可する
5. Slack 認証後のコールバック URL から認可コードを受け取る
6. 取得した認可コードを使用してアクセストークンを取得するリクエストを送信する

---

1. Slackアプリを作成する

Slackアプリコンソール から Slack 連携に使用するアプリを作成します。
ここでは作成の仕方は割愛します。

2. Slack アプリを設定する

1. [Basic Information]からClient IdとClient Secretをメモします
   ※秘匿情報なので取り扱いには注意してください。
   

2. [OAuth & Permissions]からリダイレクトURLを設定します

   • リダイレクト URL は、Slack 認証後にユーザーが戻される Web アプリケーションのエンドポイントです。
   • 認証処理が完了すると、Slack はこの URL にリダイレクトし、認可コードなどの認証情報を URL パラメータとして含めます。
     

3. [OAuth & Permissions]からOAuth Scopeを設定します

   • Scope はアプリに応じて必要な権限を追加してください。
     

3. Webアプリケーションから認可リクエストを送信する

ここからは実際に Slack と連携する Web アプリの実装に進みます。
Web アプリから Slack と OAuth で認証するには Slack の認可エンドポイントに以下の GET リクエストを送信します。

GET https://slack.com/oauth/v2/authorize
{
  response_type: 'code',
  client_id: clientId, // 2.1 でメモしたClient Id
  redirect_uri: redirectUri, // 2.2 で設定したリダイレクトURL
  scope: scope, // 2.3 で設定したScope
}

4. Slackの認証画面でユーザーがアプリに対してアクセスを許可する

Slack からユーザーに許可を促す画面がでるので許可します。

5. Slack認証後のコールバックURLから認可コードを受け取る

リダイレクト先に遷移するので URL パラメータから認可コード(code)を受け取ります。

6. 取得した認可コードを使用してアクセストークンを取得するリクエストを送信する

Slack のトークンエンドポイントに以下の POST リクエストを送信します。

POST https://slack.com/api/oauth.v2.access
{
  grant_type: 'authorization_code',
  code: code, // 5. で取得した認可コード
  client_id: clientId, // 2.1 でメモしたClient Id
  client_secret: clientSecret, // 2.1 でメモしたClient Secret
  redirect_uri: redirectUri, // 2.2 で設定したリダイレクトURL
}

レスポンスとしてアクセストークンなどの情報が返却され、インストールが完了します。

まとめ

このように Web アプリケーションに OAuth フローを実装することで、Slack アプリをワークスペースにインストールできます。

acomo では Slack 通知機能を開発中ですので、ぜひご期待ください。