メインコンテンツまでスキップ

Slackでログイン

プロジェクトでSlack認証を有効にするには、Slack OAuthアプリケーションを設定し、Supabaseダッシュボードでそのアプリケーションの認証情報を追加する必要があります。

概要

アプリケーションにSlackログインを設定するための手順は、3つのパートで構成されています。

手順

Slack開発者アカウントへアクセス

  • api.slack.com にアクセスします。
  • 右上のYour Appsをクリックしてログインします。

Slack Developer Portal.

コールバックURLを入手

次の手順では、次のようなコールバックURLが必要になります。

https://<project-ref>.supabase.co/auth/v1/callback

  • Supabaseプロジェクトのダッシュボードにアクセスします。
  • 左サイドバーの下部にあるSettingsアイコンをクリックします。
  • リストの中のAPIをクリックします。
  • ConfigURLの下にAPI URLがあるので、Copyをクリックしてクリップボードにコピーします。
  • 末尾に/auth/v1/callbackを追加することで、完全なOAuth Redirect URIを取得できます。

Slack OAuthアプリの作成

  • api.slack.com にアクセスします。
  • Create an Appをクリックします。

Create an app...の下にある次の手順を行います。

  • From scratchをクリックします。
  • App Nameにアプリの名前を入力します。
  • Select a workplaceからSlackのワークスペースを選択します。
  • Create Appをクリックします。

App Credentialsの下にある次の手順を行います。

  • 新たに生成したClient IDをコピーして保存します。
  • 新しく生成されたClient Secretをコピーして保存します。
  • Permissionsをクリックします。

Redirect URLsをクリックします。

  • Add New Redirect URLをクリックします。
  • コールバックURLを貼り付け、Addをクリックします。
  • Save URLsをクリックします。

SupabaseプロジェクトにSlackの認証情報を入力します

  • Supabaseプロジェクトのダッシュボードに移動します。
  • 左側のサイドバーで、Authenticationアイコンをクリックします(上部付近)。
  • リストからSettingsをクリックし、Authentication Settingsページを表示します。
  • Site URLにアプリの最終的な(ホストされた)URLを入力します(これは重要です)。
  • External OAuth ProvidersSlack Enabledをオンにします。
  • 前の手順で保存したClient ID(client_id)とAPI Secret Key(client_secret)を入力します。
  • Saveをクリックします。

クライアント・アプリにログインのコードを追加

JavaScriptのクライアント・コードはこちらに記載:Supabase OAuthクライアントコード

const { user, session, error } = await supabase.auth.signIn({
provider: 'slack',
})

ボタン、リンク、またはUI要素から呼びだすための関数を追加します。

async function signInWithSlack() {
const { user, session, error } = await supabase.auth.signIn({
provider: 'slack',
})
}

ログアウトするには次の関数を使います。

async function signout() {
const { error } = await supabase.auth.signOut()
}

リソース