Bitbucketでログイン
プロジェクトでBitbucket認証を有効にするには、Bitbucket OAuthアプリケーションを設定し、Supabaseダッシュボードでそのアプリケーションの認証情報を追加する必要があります。
概要
アプリケーションにBitbucketログインを設定するための手順は、3つのパートで構成されています。
- BitbucketでBitbucket OAuthコンシューマーを作成・設定
- SupabaseプロジェクトにBitbucket OAuthコンキューマー・キーを追加
- SupabaseのJSクライアント・アプリにログインのコードを追加
手順
Bitbucketのアカウントへアクセス
- bitbucket.orgにアクセスします。
- 右上の
Login
をクリックしてログインします。
コールバックURLを入手
次の手順で、次のようなコールバックURLが必要になります。
https://<project-ref>.supabase.co/auth/v1/callback
- Supabaseプロジェクトのダッシュボードにアクセスします。
- 左サイドバーの下部にある
Settings
アイコンをクリックします。 - リストの中の
API
をクリックします。 Config
のURL
の下にAPI URLがあるので、Copy
をクリックしてクリップボードにコピーします。- 末尾に
/auth/v1/callback
を追加することで、完全なOAuth Redirect URI
を取得できます。
Bitbucket OAuthアプリを作成
- 左下の自分のプロフィールアイコンをクリックします。
All Workspaces
をクリックします。- ワークスペースを選択し、クリックして選択します。
- 左側の
設定
をクリックします。 - 左側の
アプリと機能
の下にあるOAuth consumers
をクリックします(一番下に近い)。 - 上部の
コンシューマーキーを追加
をクリックします。 Name
にアプリの名前を入力します。コールバックURL
に、アプリのコールバックURLを入力します。- 必要な権限にチェックを入れます(Eメール、読み取りで十分です)。
- 下部の
保存
をクリックします。 - アプリの名前(新しいOAuthコンシューマーの名前)をクリックします。
鍵
(client_key
)とシークレット
(client_secret
)のコードをコピーします。
SupabaseのプロジェクトにBitbucketの認証情報を追加
- Supabaseプロジェクトのダッシュボードに移動します。
- 左側のサイドバーで、
Authentication
アイコンをクリックします(上部付近)。 - リストから
Settings
をクリックし、Authentication Settings
ページを表示します。 Site URL
にアプリの最終的な(ホストされた)URLを入力します(これは重要です)。External OAuth Providers
でBitbucket Enabled
をONにします。- 前の手順で保存した
client_id
とclient_secret
を入力します。 Save
をクリックします。
クライアント・アプリにログインのコードを追加
JavaScriptのクライアント・コードはこちらに記載:Supabase OAuthクライアントコード
const { user, session, error } = await supabase.auth.signIn({
provider: 'bitbucket',
})
ボタン、リンク、またはUI要素から呼びだすための関数を追加します。
async function signInWithBitbucket() {
const { user, session, error } = await supabase.auth.signIn({
provider: 'bitbucket',
})
}
ログアウトするには次の関数を使います。
async function signout() {
const { error } = await supabase.auth.signOut()
}