SlackAppのアイコン変更とDjangoを使った認証方法の備忘録

SlackのYourAppsで作成したBOTをSlackのワークスペースに追加させるためのボタンを作成します。
裏側ではSlackのAppとのOAuth認証が動きます。

本記事のコンテンツはこちら。

・SlackのYourAppsで作成したアプリの画像を変更する
・Djangoを使って、作成したアプリをワークスペースに追加するためのOAuth認証

言語はPython、フレームワークにはDjangoを使っています。

今回はあくまでSlackのYourAppsで作成したアプリをユーザのワークスペースに追加できるようにするまでの認証周りの話になります。
これからSlackアプリの開発を始めるにあたってのファーストステップ的な記事です。

また、今回はDjangoを利用するので、認証の部分に関しては最低限のDjangoアプリの環境を構築できることを前提としています。
環境構築については、以前書いた備忘録が以下にまとまっているので、良ければ読んでください。

【Django環境備忘録】僕のDjango開発環境構築まとめ PythonのフルスタックWEBフレームワークであるDjangoをたまに使うのですが、使うたびに環境構築の方法を調べなおしていて非常に...

SlackのYourAppsで作成したアプリの画像を変更する

作成したSlackAppのアイコン画像を変更する方法がわからず、また参考になるリンクも無かったため、一時間以上の時間を無駄にしました…。
SlackAppのアイコンとは、以下の画像のようなデフォルトのアイコンのことです。

ネットでアイコンの替え方を調べても、出てくるのは大抵インバウンドAPIに送信するペイロードに絵文字やアイコンを含める方法ばかりで非常に困りました…。
「アイコンより絵文字の方が優先度が高いので、絵文字とアイコン両方送信すると絵文字が表示されるよ！」とかどうでもいいんですよ…。

というわけでここでは、同じような被害者？が一人でも減るよう、Slackで作成したアプリのアイコンの変更方法についてまとめます。

手順はこの3ステップ！

1.Slack Your Appsから自分の作成したアプリをクリック！

2.表示された[Basic Information]の一番下にある[Display Information]で画像を変更！

3.右下の[Save Changes]をクリック！

なんでこんな簡単な手順にすら気づかなかったんですかね…。
結局ネットに参考になる記事が見つからなかったのも、誰もこんなところでつまづかなかったからなのでしょう。

つらい。

作成したアプリをワークスペースに追加するためのOAuth認証を実装する

さて、気を取りなおしてここからは、作成したアプリをワークスペースに追加するためのボタンを作成します。
別にこんなボタンを作成しなくても自分のワークスペースに追加することは簡単にできるのですが…。

SlackAppとのOAuth認証のGettingStartとしてちょうどいいのでまとめておきます。

認証ボタンをクリックすると、こんな感じの画面に遷移できるようになります。

SlackBOTの学習については、以下のサイトを大いに参考にさせてもらっていました。
感謝も込めてリンクを張っておきます。

英語のサイトですが、非常にわかりやすくまとめられているのでおすすめです。

Slack Bot With a Django Backend — 101 Tutorial

というわけで、すでにDjango環境はある程度構築済みの環境であるという認識で進めていきます。

以下のステップで実行できます。

1.作成したBOTのSLACK_CLIENT_IDとSLACK_CLIENT_SECRETを確認する
　Slack Your Appsから自分のアプリの[Basic Information]を開きます。
　[App Credentials]のClient IDとClient Secretをそれぞれ確認してください。

2.確認したKeyをDjangoのlocalsettingsに追記してSettingsに反映する
　まず、settings.pyと同じディレクトリに、local_settings.pyを作り、.gitignoreでリポジトリから除外します。
　local_settingsには以下の2行を追記してください。

SLACK_CLIENT_ID = "[SLACK_CLIENT_ID]"
SLACK_CLIENT_SECRET = "[SLACK_CLIENT_SECRET]"

　次に、Djangoプロジェクトのsettings.pyの[IF DEBUG]の配下で、以下のようにlocal_settingsをインポートします。
　これは、シークレットをGithubなどにうっかり公開しないために必要な作業です。

if DEBUG:
    try:
        from .local_settings import *

    except ImportError:
        pass

3.UrlsとViewsを編集する
　そして、認証用のUrlsとViewsを編集します。

　まずはUrlsを以下のように編集。

from django.conf.urls import url
from . import views

urlpatterns = [
    url("", views.index),
]

　次にViewsは以下のように設定します。
　landing.htmlにはSlackへのApp追加ボタンが設置されており、そのテンプレートにClientIDを渡している流れになります。

from django.conf import settings
from django.shortcuts import render

def index(request):
    client_id = settings.SLACK_CLIENT_ID
    return render(request, "[YourAppName]/landing.html", {"client_id": client_id})

　landing.htmlには以下のようなリンクを持ったボタンを設置します。

https://slack.com/oauth/authorize?scope=bot&client_id={{ client_id }}

4.共通テンプレートを作成して反映させる
　最後に共通テンプレートを設定します。
　まずは、プロジェクトディレクトリにtemplate/[YourAppName]ディレクトリを追加します。

　そして、SettingsのTEMPLATESの部分にos.path.join(BASE_DIR, ‘templates’)を追加します。
　これで、Djangoアプリケーション側からプロジェクトの共通のテンプレートにアクセスできるようになります。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'), #ここを追加！
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

5.Runserverしてアクセス！
　動かしてテンプレにアクセス！！