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

Bitbucketでログイン

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

概要​

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

手順​

Bitbucketのアカウントへアクセス​

  • bitbucket.orgにアクセスします。
  • 右上のLoginをクリックしてログインします。

Bitbucket Developer Portal.

コールバック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()
}

リソース​