🔒

SuperTokensでSlackログインを実装する

に公開
Slack
OAuth
認証
OIDC
supertokens
tech

1. はじめに

SuperTokens は、オープンソースの認証サービスで、ソーシャルログインやセッション管理を簡単に実装できるのが特徴です。

本記事では、SuperTokens を使って Slack ログインを実装する方法を紹介します。

SuperTokens の基本的なセットアップが完了していることを前提に、Slack の OAuth 設定からフロントエンド・バックエンドの実装までを説明します。

なお、SuperTokens では Google や GitHub など主要なソーシャルログインプロバイダがデフォルトで用意されていますが、Slack は標準プロバイダとしては提供されていません。

そのため、本記事では SuperTokens のカスタムプロバイダ機能を用いて、Slack ログインを実装する方法を解説します。

対象読者

  • SuperTokens の初期設定が完了している方
  • SuperTokens を使用して Slack や Google などサードパーティアプリのログインを実装したい方

2. 認証用 Slack アプリの設定

まず、以下の手順に沿って認証に使用する Slack アプリを設定します。

1. Slack アプリを作成

2. クライアント ID とクライアントシークレットを取得

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

外観

3. リダイレクト URL の設定

  • [OAuth & Permissions]から以下の Redirect URL を設定します
  • 認証が完了すると、Slack はこの URL にリダイレクトします
  • リダイレクト後の処理は SuperTokens が行ってくれるため、特別な実装は不要です

外観

4. スコープの設定

  • [OAuth & Permissions]から以下の User Token Scopes を設定します
    • email
    • openid
    • profile

外観

3. SuperTokens の Slack プロバイダ設定

SuperTokens 初期化処理のレシピに Slack を認証プロバイダとして追加します。
Slack は SuperTokens がデフォルトで設定している組み込みプロバイダに含まれないため、カスタムプロバイダとして独自に設定します。

フロントエンドの設定

import SuperTokens from 'supertokens-auth-react';
import ThirdParty from 'supertokens-auth-react/recipe/thirdparty';

SuperTokens.init({
  appInfo: {
    appName: 'MyApp',
    apiDomain: '<https://your-backend.com>',
    websiteDomain: '<https://yourfrontend.com>',
  },
  recipeList: [
    ThirdParty.init({
      signInAndUpFeature: {
        providers: [
          { id: 'slack', name: 'Slack' },
        ],
      },
    }),
  ],
});

バックエンドの設定

認証は OpenID Connect(OIDC)を使用します。

import ThirdParty from 'supertokens-node/recipe/thirdparty';

ThirdParty.init({
  ... // レシピ部分以外は省略しています
  recipeList: [
    ThirdParty.init({
      signInAndUpFeature: {
        providers: [
          {
            config: {
              thirdPartyId: 'slack',
              name: 'Slack',
              clients: [
                {
                  // 作成したSlackアプリのクライアントID
                  clientId: process.env.SLACK_AUTH_CLIENT_ID,
                  // 作成したSlackアプリのクライアントシークレット
                  clientSecret: process.env.SLACK_AUTH_CLIENT_SECRET,
                  // 作成したSlackアプリのスコープ
                  scope: ['openid', 'profile', 'email'],
                },
              ],
              oidcDiscoveryEndpoint: 'https://slack.com/.well-known/openid-configuration',
              userInfoMap: {
                fromIdTokenPayload: {
                  userId: 'https://slack.com/user_id',
                  email: 'email',
                  emailVerified: 'email_verified',
                },
              },
            },
          },
        ],
      },
    }),
  ],
});

4. ログイン処理の実装

Slack のログインボタンを設置します。
ログイン処理の記述に必要なものとしては、サードパーティ ID とリダイレクト URL の設定のみで、実際の認証部分は SuperTokens によって処理されます。

import ThirdParty from 'supertokens-auth-react/recipe/thirdparty'

const onSignInUpWithSlack = async () => {
  const authUrl = await ThirdParty.getAuthorisationURLWithQueryParamsAndSetState({
    thirdPartyId: 'slack',
    frontendRedirectURI: 'https://yourdomain.com/auth/callback/slack',
  })
  navigateTo(authUrl, { external: true })
}

<v-btn :prepend-icon="mdiSlack" @click="onSignInUpWithSlack()">
  Slackで続ける
</v-btn>

ログインフォーム例

外観

5. SuperTokens のダッシュボード確認

追加した Slack プロバイダは SuperTokens のダッシュボードで確認できます。
以下のようにダッシュボード上に表示されていれば問題なく登録できています。

外観
外観

6. まとめ

本記事では、SuperTokens を使用して Slack ログインを実装しました。今後、他の OAuth プロバイダ（Google, GitHub など）との統合や、ログイン後のカスタム処理を追加することで、より高度な認証機能を実現できます。

ぜひ、皆さんのアプリに SuperTokens を活用してみてください！

Discussion