メインコンテンツにジャンプ
Capgoロゴ
チュートリアル

Capacitorでサポートされるソーシャルログインプラグインを使用してSupabase認証をセットアップする

Capgoでサポートされるソーシャルログインプラグインを使用して、Google、Apple、Facebook認証を含む、Capacitorアプリの認証を簡単に統合する方法を学びます。

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター
Setup Supabase Authentication with Capacitor Social Login Plugin

モバイルアプリの認証設定は複雑ですが、Supabaseと__CAPGO_KEEP_0__ Social Login プラグインを組み合わせると簡単になります。このチュートリアルでは、Supabaseと__CAPGO_KEEP_0__アプリにGoogle、Apple、Facebookのソーシャル認証を統合する方法を説明します。 Supabaseとソーシャルログインの組み合わせの利点は何ですか? Supabaseは、ビルトインの認証機能を備えた強力なバックエンドサービスを提供し、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginプラグインは、iOS、Android、Webプラットフォームでネイティブなソーシャル認証を提供します。両者を組み合わせると、以下の機能が提供されます。 Capgo Social Login plugin makes it straightforward. This tutorial will guide you through integrating social authentication (Google, Apple, Facebook) with Supabase in your Capacitor app.

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__ Supabase @capgo/capacitor-social-login @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login

  • Why Use Supabase with Social Login?
  • Setting up authentication in mobile apps can be complex, but combining
  • クロスプラットフォーム互換性
  • リアルタイムデータベース統合
  • 組み込みユーザー管理

前提条件

開始する前に、次のことを確認してください。

  • Capacitor プロジェクトが設定されている
  • Supabase アカウントとプロジェクト
  • 選択したソーシャル プロバイダーの開発者アカウント (Google、Apple、Facebook)

ステップ 1: ソーシャル ログイン プラグインのインストールと設定

最初に Capgo ソーシャル ログイン プラグインをインストールしてください。

npm install @capgo/capacitor-social-login
npx cap sync

ステップ 2: Supabase プロジェクトの設定

Supabase プロジェクトを作成して設定する

  1. Supabaseプロジェクトを作成する:

    • Go to https://supabase.com とサインアップ/サインイン
    • Click “新しいプロジェクト”
    • 組織を選択
    • プロジェクト名を入力 (例： “MyApp Auth”) データベースパスワードを設定
    • __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ (安全に保存してください)
    • Select your 地域 (ユーザーに近い場所から選択してください)
    • Click “Create new project”

  2. プロジェクトのクレデンシャルを取得する:

    • プロジェクトが作成されたら、 設定 > API
    • プロジェクトのURLをコピーする (例えば、 (e.g., https://your-project-ref.supabase.co)
    • Copy your anon public API key
    • Save these for later use in your app

Configure Authentication Settings

  1. Setup general authentication settings:

    • Go to Authentication > Settings
    • Under General settings:
      • Set サイトURLを設定 アプリのURLに追加 (例: https://yourdomain.com または http://localhost:3000 開発用に追加
      • リダイレクトURL 必要に応じて: メール設定 
        http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)

  2. (オプションながら推奨): 以下

    • SMTP設定 メールプロバイダを設定メール確認とパスワードリセットを有効化
    • __CAPGO_KEEP_0__
    • For development, you can use the built-in email service

Social Authentication Provider を有効にする

  1. プロバイダー セクションにアクセスする:
    • Go to 認証 > プロバイダー Supabase ダッシュボードで
    • 利用可能なソーシャル プロバイダーの一覧が表示されます
    • 各プロバイダーには 有効 と設定オプションがあります

各ソーシャル プロバイダーを詳細に設定するには

Step 3: Supabase でソーシャル プロバイダーを設定する

Google認証の設定アップ (Supabase)

最初に、Google OAuthのクレデンシャルを取得してください:

詳細なGoogleのセットアップガイドを参照してください: Google認証のセットアップ

このガイドでは、以下の内容をカバーします:

  • Google Cloud Projectの作成
  • Web、iOS、Android向けのOAuth 2.0クレデンシャルを設定
  • 承認画面の設定
  • 必要なクライアントIDとシークレットを取得

Googleのセットアップを完了した後、Supabaseで設定してください:

  1. SupabaseでGoogleプロバイダーを有効にします:
    • Supabaseのダッシュボードに移動してください: 認証 > プロバイダー
    • 検索 Google それをオンに切り替え オン
    • 設定を入力してください:
      • クライアントID: Google OAuth のクライアントID Web Google Cloud Console から取得したクライアントID
      • クライアントシークレット: Google OAuth のクライアントシークレット Web __CAPGO_KEEP_0__
      • __CAPGO_KEEP_0__: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
    • Click 保存

重要: 使う Web Client ID と Web Client Secret は、Supabaseで使います。モバイルアプリを開発している場合でも、Web Client IDはプラグインの設定で別途使います。

__CAPGO_KEEP_0__のApple認証設定

Apple認証の取得:

Appleの詳細設定ガイドを参照してください: Apple認証設定

このガイドでは、以下の内容をカバーします。

  • Apple Developerアカウントの設定
  • App IDとService IDの作成
  • Sign in with Apple機能の設定
  • 必要なプライベートキーの生成
  • iOS、Android、Web向けのプラットフォーム固有の設定

Appleの設定が完了したら、Supabaseで設定を構成してください:

  1. SupabaseでAppleプロバイダを有効化:
    • Go to 認証 > プロバイダー と切り替え Apple ON
    • 設定を入力してください：
      • クライアントID：サービスID識別子（例えば com.yourapp.signin)
      • クライアントシークレット：Appleのプライベートキーを使用してJWTを生成してください（ Supabase Apple ドキュメント でJWTの形式を参照してください）
      • URLのリダイレクト: https://your-project-ref.supabase.co/auth/v1/callback （自動入力）
    • クリック 保存

注意: Apple認証設定は、Service ID、プライベートキー、JWT生成のAppleの要件により最も複雑です。各プラットフォームのドキュメントを丁寧に参照してください。

SupabaseでFacebook認証を設定する

Facebook 認証情報を入力してください。

Facebook セットアップの完全ガイドを参照ください。 Facebook Authentication セットアップ

このガイドでは、以下の内容について説明します。

  • Facebook開発者アカウントとアプリを作成します。
  • Facebook ログイン製品を追加する
  • OAuth リダイレクト URI を設定する
  • App ID、App Secret、Client Token を取得する
  • iOS と Android 用のプラットフォーム固有の設定

Facebook の設定を完了した後、Supabase で設定する:

  1. Supabase で Facebook プロバイダーを有効にする:
    • 以下の手順に従う 認証 > プロバイダー Facebook をオンにします 設定値を入力する: __CAPGO_KEEP_0__
    • __CAPGO_KEEP_1__
      • クライアントID: Facebook アプリ ID
      • クライアントシークレット: Facebook アプリ シークレット
      • リダイレクト URL: https://your-project-ref.supabase.co/auth/v1/callback (自動入力)
    • クリック “Save”

重要: Facebook アプリに Supabase のコールバック URL (https://your-project-ref.supabase.co/auth/v1/callback) を追加するように確認してください。 : Facebook アプリの有効な OAuth リダイレクト URI Facebook ログイン設定内に移動してください。

重要な Supabase 設定ノート

Row Level Security (RLS):

  • 認証設定後、各テーブルで RLS を有効にします
  • Go to データベース > テーブル と Enable RLS 各テーブルに適用してください
  • 認証ユーザーにデータアクセスを制御するポリシーを作成してください

ユーザー管理:

  • 認証ユーザーの一覧を表示してください Authentication > ユーザー
  • __CAPGO_KEEP_0__の認証イベントを監視する Authentication > ログ
  • __CAPGO_KEEP_0__のメールテンプレートを設定する Authentication > メールテンプレート

設定のテスト:

  • Supabaseの組み込み認証テストツールを使用する
  • Go to Authentication > ユーザー とクリックする “ユーザーを招待” 認証フローのテスト
  • 確認 ログ セクションで、認証エラーが発生しているかどうかを確認してください

ステップ 4: ソーシャル ログイン プラグインを設定する

スパバースが設定されたら、対応するクレデンシャルとともにソーシャル ログイン プラグインを設定する必要があります。 重要: プラグインには、 元のプロバイダー (スパバースではなく) から OAuth クレデンシャルが必要ですが、スパバースはサーバー側の認証を管理します。

認証フローのしくみ

設定に進む前に、フローのしくみを理解してください。

  1. プラグインが認証 ソーシャルプロバイダー (Google/Apple/Facebook) とネイティブに連携
  2. __CAPGO_KEEP_0__がトークンを受け取ります (アクセストークン、IDトークン) をプロバイダーから取得
  3. アプリはこれらのトークンを Capgoに送信します signInWithIdToken()
  4. Capgoはプロバイダーとトークンを検証し、ユーザーセッションを作成 Capgoはアプリの認証済みリクエスト用に独自のJWTトークンを返します
  5. Google プラグイン設定 プラグインにはWebクライアントIDが必要です

WebクライアントIDはプロバイダーに登録されているIDです

WebクライアントIDはプロバイダーに登録されているIDです WebクライアントIDはプロバイダーに登録されているIDです すべてのプラットフォームに対応し、オプションで iOS Client ID iOS用の機能のために:

import { SocialLogin } from '@capgo/capacitor-social-login';

await SocialLogin.initialize({
  google: {
    // Use the same Web Client ID you configured in Supabase
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: iOS Client ID for iOS-specific features
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: Request offline access for refresh tokens
    mode: 'offline'
  }
});

Googleのための重要なポイント

  • Use the Web Client ID (Android/iOSのクライアントIDではない) Web Client ID webClientId フィールド
  • プラグインは、Web Client IDだけでもすべてのプラットフォームで動作します
  • The iOSClientId はオプションで、iOS用のGoogle機能のみに使用されます

Apple Plugin Configuration

Apple の設定は iOS と Android で異なります:

iOS の場合 (ネイティブの Apple Sign-In):

await SocialLogin.initialize({
  apple: {
    // No additional configuration needed for iOS
    // The plugin uses the native Apple Sign-In capability
  }
});

Android/Web の場合 (Service ID が必要です):

await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
    redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
  }
});

Apple に関する重要な点

  • iOS では、Sign in with Apple を使用します (追加の設定は必要ありません)
  • Android/Web では、Apple Developer Portal で作成した Service ID が必要です
  • The redirectUrl 両方の Apple Developer Portal と Supabase で設定したものと一致するようにしてください

Facebook プラグインの設定

Facebook では、App ID と Client Token が必要です:

await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_FACEBOOK_APP_ID',        // From Facebook Developer Dashboard
    clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
    
    // Optional: Use Facebook Limited Login (for enhanced privacy)
    limitedLogin: false // See our Facebook setup guide for important Limited Login details
  }
});

Facebookの重要ポイント:

  • Supabaseで設定したApp IDを使用してください
  • Facebook Appの基本設定でClient Tokenを見つけることができます
  • limitedLogin: true iOSのみでFacebookのプライバシーに焦点を当てたLimited Login機能を有効にします
  • 重要: 以下の Facebookの設定ガイド 詳細なLimited Login情報、包括的なATT考慮事項については、以下を参照してください

プラグインの初期化を完了

すべてのプロバイダーを一度に初期化する方法はこちらです

import { SocialLogin } from '@capgo/capacitor-social-login';

export async function initializeSocialLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      mode: 'offline'
    },
    facebook: {
      appId: 'YOUR_FACEBOOK_APP_ID',
      clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
    },
    apple: {
      // iOS: no config needed
      // Android/Web: uncomment the lines below
      // clientId: 'YOUR_SERVICE_ID',
      // redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
    }
  });
}

重要な注意:

  • 呼び出し initialize() 初回起動時のみ __CAPGO_KEEP_0__アプリが起動したとき、ログインする前ではなく
  • __CAPGO_KEEP_0__必要なのは、使用する予定のプロバイダーを設定するだけです
  • __CAPGO_KEEP_0__ここに記載されているクレデンシャルは、Supabaseではなく元のプロバイダーから取得したものです Supabaseで設定したプロバイダーと一致するようにしてくださいステップ 5: Supabase Clientの設定
  • Supabase Clientをインストールする:

Supabaseサービスを作成する:

ステップ 6: 認証フローの実装

npm install @supabase/supabase-js

両方の認証サービスを組み合わせた認証サービスを作成する:

// services/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Step 7: Authentication Flowの実装

Create an authentication service that combines both:

// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';

export class AuthService {
  
  async initializeSocialLogin() {
    await SocialLogin.initialize({
      google: {
        webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      },
      facebook: {
        appId: 'YOUR_FACEBOOK_APP_ID',
        clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
      },
      apple: {} // iOS configuration
    });
  }

  async signInWithGoogle() {
    try {
      const result = await SocialLogin.login({
        provider: 'google',
        options: {
          scopes: ['email', 'profile']
        }
      });

      const googleResult = result.result;
      if (!googleResult) {
        throw new Error('Google login failed');
      }

      // GoogleLoginResponse is a union type - check responseType to determine flow
      if (googleResult.responseType === 'online') {
        // Online mode: use idToken directly with Supabase
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'google',
          token: googleResult.idToken!,
        });
        if (error) throw error;
        return data;
      } else {
        // Offline mode: exchange serverAuthCode on your backend
        // Your backend should exchange the code for tokens and create a Supabase session
        const response = await fetch('/api/auth/google', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
        });
        return response.json();
      }
    } catch (error) {
      console.error('Google sign-in error:', error);
      throw error;
    }
  }

  async signInWithApple() {
    try {
      const result = await SocialLogin.login({
        provider: 'apple',
        options: {
          scopes: ['email', 'name']
        }
      });

      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: result.result?.identityToken!,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Apple sign-in error:', error);
      throw error;
    }
  }

  async signInWithFacebook() {
    try {
      const result = await SocialLogin.login({
        provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile']
        }
      });

      const fbResult = result.result;
      if (!fbResult?.accessToken?.token) {
        throw new Error('Facebook login failed - no access token received');
      }

      // Facebook uses accessToken for Supabase authentication
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'facebook',
        token: fbResult.accessToken.token,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Facebook sign-in error:', error);
      throw error;
    }
  }

  async signOut() {
    // Sign out from Supabase
    await supabase.auth.signOut();
    
    // Optionally sign out from social providers
    await SocialLogin.logout({
      provider: 'google' // or 'apple', 'facebook'
    });
  }

  getCurrentUser() {
    return supabase.auth.getUser();
  }

  onAuthStateChange(callback: (event: string, session: any) => void) {
    return supabase.auth.onAuthStateChange(callback);
  }
}

export const authService = new AuthService();

Step 7: アプリに実装する

サービスを初期化し、認証を処理する:

// main.ts or app component
import { authService } from './services/auth';

async function initializeApp() {
  await authService.initializeSocialLogin();
  
  // Listen to auth state changes
  authService.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_IN') {
      console.log('User signed in:', session.user);
      // Redirect to authenticated area
    } else if (event === 'SIGNED_OUT') {
      console.log('User signed out');
      // Redirect to login
    }
  });
}

initializeApp();

ログインボタンをUIに作成する:

// Login component
async function handleGoogleLogin() {
  try {
    const user = await authService.signInWithGoogle();
    console.log('Signed in with Google:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleAppleLogin() {
  try {
    const user = await authService.signInWithApple();
    console.log('Signed in with Apple:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleFacebookLogin() {
  try {
    const user = await authService.signInWithFacebook();
    console.log('Signed in with Facebook:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleLogout() {
  try {
    await authService.signOut();
    console.log('Signed out successfully');
  } catch (error) {
    console.error('Logout failed:', error);
  }
}

Step 8: プラットフォーム固有の設定

iOS設定

詳細なiOS設定方法については、プラットフォーム固有のガイドを参照してください。

Quick summary - 追加 ios/App/App/Info.plist:

<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

iOS の完全なセットアップ手順については、Xcode プロジェクト設定のためのリンクされたガイドを参照してください。

Android 設定

詳細な Android セットアップ手順については、プラットフォーム固有のガイドを参照してください。

Androidの基本設定:

1. SHA-1の指紋を取得する (Googleの場合、必須)

# For debug builds (development)
cd android
./gradlew signingReport

# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client

2. AndroidManifest.xmlを設定する - 追加する android/app/src/main/AndroidManifest.xml:

<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Facebook configuration -->
<meta-data 
  android:name="com.facebook.sdk.ApplicationId" 
  android:value="@string/facebook_app_id"/>
<meta-data 
  android:name="com.facebook.sdk.ClientToken" 
  android:value="@string/facebook_client_token"/>

3. Facebookのリソースを追加する を android/app/src/main/res/values/strings.xml:

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>

Androidの完全な設定、Google Play Servicesのセットアップ、およびパッケージ名の設定については、関連するプラットフォームガイドを参照してください。

ステップ9: 認証済みユーザーとSupabaseデータベースを使用する

ユーザーが認証されたら、行レベルセキュリティ(RLS)を使用してSupabaseのデータベースを使用できます。

// Example: Fetch user profile
async function getUserProfile() {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', user.user.id)
      .single();
    
    return data;
  }
}

// Example: Update user profile
async function updateUserProfile(updates: any) {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .update(updates)
      .eq('id', user.user.id);
    
    return data;
  }
}

重要なセキュリティ上の考慮事項

  1. 機密キーを暴露しない クライアントの code 内
  2. 環境変数を使用 構成
  3. Row Level Security を有効 Supabase
  4. トークンを検証 必要に応じてバックエンドで
  5. トークンを自動的に更新 Supabase

トラブルシューティングの一般的な問題

トークン一致エラー

  • OAuth プロバイダーの設定を、ソーシャルログインプラグインと Supabase の間で一致させる
  • リダイレクト URL が正しく設定されていることを確認する

プラットフォーム固有の問題

  • iOS: バンドル ID が Apple Developer の設定と一致していることを確認する
  • Android: Google Console に SHA1 の指紋が正しく追加されていることを確認する

認証フローの中断

  • ネットワークの問題に対する適切なエラーハンドリングを実装する
  • 認証中にローディング状態を追加する

まとめ

Supabase の強力なバックエンドとネイティブのソーシャルログイン機能を組み合わせた完全な認証システムを実装した

  • この設定により、以下の機能が提供される
  • セキュアなネイティブソーシャル認証
  • リアルタイムデータベース統合
  • クロスプラットフォーム互換性

CapgoとCapacitorアプリケーション向けの強力かつスケーラブルな認証ソリューションを提供する、SupabaseとCapgoソーシャルログインプラグインの組み合わせ

より高度な機能である 2要素認証 または カスタムクレームについては、 Supabaseドキュメント と ソーシャルログインプラグインドキュメント.

セットアップSupabase認証とCapacitorソーシャルログインプラグインから続けてください

あなたが CapgoのCapacitor Social Login プラグインを使用して 認証とアカウントフローを計画する場合、__CAPGO_KEEP_0__ Social Login プラグインを @capgo/capacitor-social-login Capgoのcapgo Social Login プラグインの実装詳細は@capgo/capacitor-social-login @capgo/capacitor-passkey Capgoのcapgo Passkeyの実装詳細は@capgo/capacitor-passkey @capgo/capacitor-native-biometric Capgoのcapgo Native Biometricの実装詳細は@capgo/capacitor-native-biometric 二要素認証 二要素認証の実装詳細は SSO (Enterprise) __CAPGO_KEEP_0__ (エンタープライズ) の実装詳細について。

Capacitor アプリのリアルタイム更新

Capgo を使用して、ウェブ層のバグが生じた場合、修正をアプリストアの承認待ちの日数を待たずに配信することができます。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通じて残ります。

今すぐ始めましょう

ブログの最新記事

Capgo を使用すると、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を得ることができます。

Capacitor アプリで 2 つの方向のコミュニケーション
開発、モバイル、アップデート
2025 年 4 月 26 日

Capacitor アプリで 2 つの方向のコミュニケーション

5つのOTAアップデートの誤りを避けること
開発、セキュリティ、更新
2025年4月13日

5つのOTAアップデートの誤りを避けること

モバイルアプリライブアップデートのセキュリティのベストプラクティス
開発、モバイル、更新
2025年1月14日

モバイルアプリライブアップデートのセキュリティのベストプラクティス

ブログからすべてを参照