Slackでログイン
プロジェクトでSlack認証を有効にするには、Slack OAuthアプリケーションを設定し、Supabaseダッシュボードでそのアプリケーションの認証情報を追加する必要があります。
概要
アプリケーションにSlackログインを設定するための手順は、3つのパートで構成されています。
- Slack開発者ダッシュボードでSlackプロジェクトとアプリを作成、設定
- SupabaseプロジェクトにSlackの
API Key
とAPI Secret Key
を追加 - SupabaseのJSクライアント・アプリにログインのコードを追加
手順
Slack開発者アカウントへアクセス
- api.slack.com にアクセスします。
- 右上の
Your Apps
をクリックしてログインします。
コールバックURLを入手
次の手順では、次のようなコールバックURLが必要になります。
https://<project-ref>.supabase.co/auth/v1/callback
- Supabaseプロジェクトのダッシュボードにアクセスします。
- 左サイドバーの下部にある
Settings
アイコンをクリックします。 - リストの中の
API
をクリックします。 Config
のURL
の下に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 Providers
でSlack 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()
}