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

Googleでログイン

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

概要

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

手順

Google Cloud Platformアカウントにアクセス

  • cloud.google.com にアクセスします。
  • 右上のSign inをクリックしてログインします。

Google Developer Portal.

Google Cloud Platformプロジェクトを作成

  • 左上のプロジェクトを選択をクリックします。
    • (または、現在プロジェクトが選択されている場合は、左上の現在のプロジェクト名をクリックします)。
  • 右上のプロジェクトを作成をクリックします。
  • アプリの情報を入力して、作成をクリックします。
    • (この作業には数分かかることがあります)。
  • これで、新しいプロジェクトのダッシュボードが表示されます。

プロジェクトのOAuthキーを作成

プロジェクトのダッシュボード画面から次の手順を行います。

  • 上部のプロダクトとリソースの検索と書かれた検索バーにOAuthと入力します。
  • 結果のリストからOAuth同意画面をクリックします。
  • OAuth同意画面ページで外部を選択します。
  • 作成をクリックします。

アプリ情報の編集

  • アプリ登録の編集ページで、アプリの情報を入力します。
  • 下部の保存して次へをクリックします。

コールバックURLを入手

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

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

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

認証情報の作成

  • 左側の認証情報をクリックして、認証情報ページに移動します。
  • 上部の認証情報を作成をクリックし、OAuthクライアントIDを選択します。
  • OAuthクライアントIDの作成ページで、アプリケーションの種類を選択します。よくわからない場合は、ウェブアプリケーションを選択します。
  • アプリ名を入力します。
  • 下部の承認済みのリダイレクトURIURIを追加をクリックします。
  • 下部の承認済みのリダイレクトURIにコールバックURIを入力します。
  • URIボックスにコールバックURIを入力します。
  • 作成をクリックします。

新しいOAuth認証情報をコピーします。

  • OAuth クライアントを作成しましたというボックスが表示されます。
  • クライアントIDクライアントシークレットの値をコピーして保存します。

Supabase ProjectにGoogleの認証情報を入力

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

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

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

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

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

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

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

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

リソース