Zenn
Open3

「Sign in with Slack」で取得したアクセストークンやユーザー情報の管理について色々調べる

Slack
あおぽんたんあおぽんたん

なぜ調べる必要があるのか？

自分が所属しているオンラインサロン「IT KINGDOM」でプロジェクトのチーム開発をすることになりました。
調べる理由は、そのプロジェクトでSlackを使った認証をする機能を作成する必要があるためです。
機能について詳しく説明すると、ユーザーログインにSlack認証「Sign in with Slack」を使用し、ユーザー情報を取得する機能が必要。
Slack認証方法について調べると「OpenID Connect」と「OAuth 2.0」の２種類の認証方法があることが分かった。
また、Slack Node SDKを使って認証する方法もあったが、今回は使わずに行こうと思う。（やっぱ使うかもしれない）

Slack Appの設定

今日（2021年10月11日）Slack App マネージメントを開くとページが新しくなっており、「App Manifest」がベータ版から正式に使えるようになり、YAMLやJSONでアプリの編集を行えるようになっていた。
自分のアプリの構成↓

_metadata:
  major_version: 1
  minor_version: 1
display_information:
  name: dev-engivia-oauth
oauth_config:
  redirect_urls:
    - https://204d-240d-1c-e7-c800-f53a-2ced-d8d8-340b.ngrok.io/slack/oauth_redirect
  scopes:
    user:
      - identity.basic
      - identity.avatar
settings:
  org_deploy_enabled: false
  socket_mode_enabled: false
  token_rotation_enabled: false
あおぽんたんあおぽんたん

OpenID Connectを使ってアクセストークンを取得

Slack api公式ドキュメント「Sign in with Slack」を参考にして、アクセストークンを取得した。
(access_token, id_tokenは省略してある)

{
  "ok": true,
  "access_token": "xoxp-123...",
  "token_type": "Bearer",
  "id_token": "ABCDE.ABABA.SGFGDFSDG",
  "state": "asdaqwe",
  "response_metadata": {}
}

id_token を jwt.io でデコードすると、ユーザーの基本情報などのデータが表示された。

{
  "iss": "https://slack.com",
  "sub": "U02FFH2MY0P",
  "aud": "2552917408465.2589888084707",
  "exp": 1633955890,
  "iat": 1633955590,
  "auth_time": 1633955590,
  "nonce": "abcd",
  "at_hash": "UfrwRUS8xNqGHL6HSb8pUg",
  "https://slack.com/team_id": "T02G8SZC0DP",
  "https://slack.com/user_id": "U02FFH2MY0P",
  "locale": "ja-JP",
  "name": "aopontan0416",
  "picture": "https://secure.gravatar.com/avatar/e57b3678017c2e646e065d9803735508.jpg?s=512&d=https%3A%2F%2Fa.slack-edge.com%2Fdf10d%2Fimg%2Favatars%2Fava_0013-512.png",
  "given_name": "aopontan0416",
  "family_name": "",
  "https://slack.com/team_name": "開発用ワークスペース",
  "https://slack.com/team_domain": "w1632821360-sc4223483",
  "https://slack.com/team_image_230": "https://a.slack-edge.com/80588/img/avatars-teams/ava_0009-230.png",
  "https://slack.com/team_image_default": true
}
あおぽんたんあおぽんたん

OAuth 2.0 を使って取得

これも公式ドキュメント「Legacy: Sign in with Slack」を参考にして、アクセストークンを取得した。

{
    "ok": true,
    "app_id": "A02H59C93SS",
    "authed_user": {
        "id": "U02FFH2MY0P",
        "scope": "identity.basic,identity.avatar",
        "access_token": "xoxp-255-252-258-d42",
        "token_type": "user"
    },
    "team": {
        "id": "T02G8SZC0DP"
    },
    "enterprise": null,
    "is_enterprise_install": false,
    "response_metadata": {}
}

取得したアクセストークンを用いて users.identity API メソッドでユーザー情報を取得することができる
scopeに identity.email を含めるとユーザーのメールアドレスも取得することができる

{
    "ok": true,
    "user": {
        "name": "aopontan0416",
        "id": "U02FFH2MY0P",
        "image_24": "https://secure.gravatar.com/avatar/e57b3678017c2e646e065d9803735508.jpg?s=24&d=https%3A%2F%2Fa.slack-edge.com%2Fdf10d%2Fimg%2Favatars%2Fava_0013-24.png",
        "image_32": "https://secure.gravatar.com/avatar/e57b3678017c2e646e065d9803735508.jpg?s=32&d=https%3A%2F%2Fa.slack-edge.com%2Fdf10d%2Fimg%2Favatars%2Fava_0013-32.png",
        "image_48": "https://secure.gravatar.com/avatar/e57b3678017c2e646e065d9803735508.jpg?s=48&d=https%3A%2F%2Fa.slack-edge.com%2Fdf10d%2Fimg%2Favatars%2Fava_0013-48.png",
        "image_72": "https://secure.gravatar.com/avatar/e57b3678017c2e646e065d9803735508.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2Fdf10d%2Fimg%2Favatars%2Fava_0013-72.png",
        "image_192": "https://secure.gravatar.com/avatar/e57b3678017c2e646e065d9803735508.jpg?s=192&d=https%3A%2F%2Fa.slack-edge.com%2Fdf10d%2Fimg%2Favatars%2Fava_0013-192.png",
        "image_512": "https://secure.gravatar.com/avatar/e57b3678017c2e646e065d9803735508.jpg?s=512&d=https%3A%2F%2Fa.slack-edge.com%2Fdf10d%2Fimg%2Favatars%2Fava_0013-512.png"
    },
    "team": {
        "id": "T02G8SZC0DP"
    },
    "response_metadata": {
        "scopes": [
            "identity.basic",
            "identity.avatar"
        ],
        "acceptedScopes": [
            "identity.basic"
        ]
    }
}