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

Capacitorを使用したSupabase認証のセットアップ

Capgoのソーシャルログインプラグインを使用して、CapacitorアプリでスムーズなGoogle、Apple、Facebook認証を実装する方法を学びましょう。

記事のクレジット

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

ライター

バレリア

レビュアー

ジョーダン

エディター

CapacitorでCapacitorを使用したSupabaseの認証設定

モバイルアプリの認証設定は複雑になることがありますが、Supabaseと__CAPGO_KEEP_0__のSocial Loginプラグインを組み合わせると簡単になります。このチュートリアルでは、__CAPGO_KEEP_0__アプリでSupabaseと組み合わせて、Google、Apple、Facebookなどのソーシャル認証を実装する方法を紹介します。 Capacitor Capacitor Capgo makes it straightforward. This tutorial will guide you through integrating social authentication (Google, Apple, Facebook) with Supabase in your Capacitor app.

なぜSupabaseとSocial Loginを組み合わせるのですか?

Capacitor Supabaseは、組み込みの認証機能を備えた強力なバックエンドサービスを提供し、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginプラグインは、iOS、Android、Webプラットフォームでネイティブなソーシャル認証を提供します。Supabaseとの統合を強化するために、 @capgo/capacitor-social-login Capacitor @capgo/capacitor-supabase @__CAPGO_KEEP_0__は、Supabaseと組み合わせて以下の機能を提供します。

  • ソーシャルログインのためのネイティブの認証ヘルパーとJWTアクセスを追加します。
  • ソーシャルログインのためのスムーズな認証
  • セキュアなトークン管理
  • クロスプラットフォーム互換性
  • リアルタイムデータベース統合

組み込みユーザーマネージメント

前提条件

  • A Capacitor project set up
  • Capacitorプロジェクトがセットアップされている
  • Supabaseアカウントとプロジェクトが用意されている

Step 1: Capacitorを使用したCapgoのSocial Loginプラグインのインストールと設定

最初に、Capgo Social Loginプラグインをインストールしてください:

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

Capacitorを使用したCapgoのSocial Loginプラグインの設定方法については、 Capacitorを使用したCapgoのSocial Loginプラグイン と Capacitorを使用したCapgoのSocial Loginプラグイン のプラグインページを参照してください。

Step 2: Supabaseプロジェクトの設定

Capacitorを使用したCapgoのSocial Loginプラグインの設定方法については、

  1. Capacitorを使用したCapgoのSocial Loginプラグインの設定方法については、:

    • Capacitorを使用したCapgoのSocial Loginプラグインの設定方法については、 Capacitorを使用したCapgoのSocial Loginプラグインの設定方法については、 とサインアップ/サインイン
    • Click “New Project”
    • Choose your organization
    • Enter a Project Name (e.g., “MyApp Auth”)
    • Set a Database Password (save this securely)
    • Select your Region （ユーザーに最も近いものを選択してください）
    • クリック “Create new project”

  2. プロジェクトの資格情報を取得:

    • プロジェクトが作成されたら、 設定 > API
    • プロジェクトのURLをコピー （例： 匿名のパブリック https://your-project-ref.supabase.co)
    • __CAPGO_KEEP_0__ キーをコピー protectedTokens API key
    • この設定を後で使用するために保存します。

認証設定を構成します。

  1. 一般的な認証設定を設定します。:

    • ここに移動します。 認証 > 設定
    • 以下の 一般設定:
      • を サイトURL にアプリのURL (例えば、 https://yourdomain.com または http://localhost:3000 開発用に
      • 追加設定 リダイレクトURL 必要な場合: 
        http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)

  2. メール設定を構成する (オプションですが推奨される):

    • 以下の SMTP設定, メールプロバイダを構成する
    • メール確認とパスワードリセットを有効にする
    • 開発用途では、組み込みメールサービスを使用できます

ソーシャル認証プロバイダを有効にする

  1. プロバイダのセクションにアクセスする:
    • Capgo 設定 Supabaseダッシュボードの
    • Authentication > Providers
    • 利用可能なソーシャルプロバイダーのリスト 各プロバイダには 有効

切り替えスイッチと設定オプション

各ソーシャルプロバイダーの詳細な設定について説明します:

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

SupabaseでGoogle認証を設定する

Google OAuth認証情報を取得するには、以下の手順に従ってください。 Google Authentication Setup

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

  • Google Cloud Project の作成
  • Web、iOS、Android向けのOAuth 2.0資格情報の設定
  • consent画面の設定
  • 必要なクライアントIDとシークレットの取得

Google設定を完了した後、Supabaseで設定する

  1. SupabaseでGoogleプロバイダを有効にする:
    • Supabaseダッシュボードで、 認証 > プロバイダ
    • 検索 Google とスイッチを切り替えます オン
    • 設定を入力してください
      • クライアントID: Google OAuth Web Google Cloud Consoleから取得するクライアントID
      • クライアントシークレット: Google OAuth Web Google Cloud Consoleから取得するクライアントシークレット
      • リダイレクトURL: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
    • Click “Save”

注意重要 Web Client ID and Web Client Secret Supabaseで、モバイルアプリを開発している場合でも、使用できます。モバイルクライアントIDはプラグインの設定で別途使用されます。

Apple認証の設定

Apple認証の設定のためのクレデンシャルを取得する

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

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

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

Apple設定を完了した後、Supabaseで設定する

  1. SupabaseでAppleプロバイダを有効にする:
    • Authentication > プロバイダに移動 と切り替える Authentication > プロバイダ アップル ON
    • 設定値を入力してください:
      • クライアントID: サービスID識別子 (例えば、 com.yourapp.signin)
      • クライアントシークレット: Appleのプライベートキーを使用してJWTを生成します ( Appleのドキュメントを参照してください JWTの形式)
      • リダイレクトURL: https://your-project-ref.supabase.co/auth/v1/callback (自動入力)
    • クリック “セーブ”

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

SupabaseにFacebook認証を設定する

Facebookのクレデンシャルを取得する

Facebookの設定ガイドを完全に参照してください: Facebook認証の設定

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

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

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

  1. SupabaseでFacebookプロバイダーを有効にする:
    • を参照してください 認証>プロバイダー Facebookを ON に切り替え
    • 設定値を入力してください
      • Client ID: FacebookアプリID
      • Client Secret: Facebook App Secret
      • Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
    • Click “Save”

Important: SupabaseのコールバックURLをFacebookアプリのhttps://your-project-ref.supabase.co/auth/v1/callbackValid OAuth Redirect URIs Facebook Loginの設定 Important Supabase Configuration Notes

Row Level Security (RLS):

Row Level Security (RLS):

  • Capgoを設定した後、RLSをテーブルに有効にする
  • Go to データベース > テーブル と テーブルごとに データアクセスを制御するポリシーを作成する
  • ユーザー管理:

認証済みユーザーを表示する

  • 認証 > ユーザー 認証イベントを表示する
  • 認証 > ログ Enable RLS for each table
  • Capgoでメールテンプレートを設定する 認証 > メールテンプレート

設定のテスト:

  • Capgoの組み込み認証テストツールを使用する
  • 以下の手順に従ってください 認証 > ユーザー 「ユーザーを招待」をクリック メールフローのテスト ログ
  • エラーが発生した場合、ログセクションを確認してください エラーが発生した場合、ログセクションを確認してください エラーが発生した場合、ログセクションを確認してください

Step 4: Capacitorを使用したCapgoのSocial Loginプラグインの設定

Capacitorを使用したCapgoのSocial Loginプラグインの設定 重要:Capacitorを使用したCapgoのSocial Loginプラグインの設定で必要なのは、 元のサービス (Capacitorを使用したCapgoのSocial Loginプラグインの設定で使用する)

Capacitorを使用したCapgoのSocial Loginプラグインの設定の流れ

Capacitorを使用したCapgoのSocial Loginプラグインの設定の流れ

  1. プラグインは プラグインは
  2. サービスプロバイダー (Google/Apple/Facebook) と直接通信 プラグインは、サービスプロバイダーからトークンを受信します
  3. あなたのアプリはこれらのトークンを送信します を使用してSupabaseに送信します signInWithIdToken()
  4. Supabaseはプロバイダーとトークンを検証し、ユーザーセッションを作成します Supabaseは認証されたリクエスト用にあなたのアプリのJWTトークンを返します
  5. Google プラグイン設定 プラグインにはすべてのプラットフォーム用にあなたの

Web クライアントID

が必要です。iOS用にオプションで iOS クライアントID が必要です。 iOS用の機能 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の重要なポイント:

  • Web Client ID Web Client ID のフィールド webClientId Web Client IDのみで、すべてのプラットフォームで機能します。
  • はオプションであり、iOS専用のGoogle機能のみに使用されます。
  • Apple Plugin Configuration iOSClientId Appleの設定はiOSとAndroidで異なります。

iOS

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

Use the Web Client ID

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が必要です
  • はApple Developer PortalとSupabaseで設定したものと一致するようにしてください redirectUrl Facebookプラグインの設定

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

Facebookの重要なポイント:

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
  }
});

Supabaseで設定したApp IDを使用してください

  • Client TokenはFacebook Appの基本設定で見つけることができます
  • Key points for Google:
  • limitedLogin: true Facebookのプライバシーに焦点を当てたLimited Login機能を有効にします（iOSのみ）
  • 重要: 以下の 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__
  • この資格情報は、 元のプロバイダーではなく、Supabase
  • プロバイダー資格情報がSupabaseで設定したものと一致していることを確認してください

ステップ 5: Supabase クライアントの設定

Supabase クライアントをインストールする

npm install @supabase/supabase-js

Supabase サービスを作成する

// 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,
  },
});

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

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

// 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();

ステップ 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セットアップ手順については、プラットフォーム固有のガイドを参照してください。

クイックサマリー - 追加 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を設定 - Googleに追加 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"/>

to Live Updateのダイナミックラベル 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>

Google Play Servicesの設定やパッケージ名の設定など、完全なAndroidの設定については、各プラットフォームのガイドを参照してください。

Step 9: Supabase Databaseの使用と認証済みユーザー

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

// 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. 機密鍵をあなたのクライアントに __CAPGO_KEEP_0__ in your client code
  2. Use environment variables 設定用のための
  3. 行レベルのセキュリティを有効にする Supabase
  4. トークンを検証する 必要に応じてバックエンドで
  5. トークンを自動的に更新する Supabase

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

トークン一致エラー

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

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

  • iOS: Apple Developer の設定と bundle ID を確認してください
  • Android: Google Console に SHA1 の fingerprint を正しく追加してください

Authentication Flow Interruptions

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

Conclusion

Capacitor と Supabase を組み合わせた、完全な認証システムを実装しました。このセットアップは次の機能を提供します:

  • セキュアなソーシャル認証
  • トークンの管理がスムーズ
  • リアルタイムデータベース統合
  • クロスプラットフォーム互換性

The combination of Supabase and the Capgo Social Login plugin offers a powerful, scalable authentication solution for your Capacitor apps.

Capgoの高度な機能 多要素認証 または Capacitorライブアップデートの代替Capacitorライブアップデートの代替 Capawesomeの比較 Capawesomeの比較 コンサルティングサービス.

Keep going from Setup Supabase Authentication with Capacitor Social Login Plugin

Capgoの高度な機能 Setup Supabase Authentication with Capacitor Social Login Plugin カスタムクレームの詳細については、以下のドキュメントを参照してください。 @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, 2要素認証 2要素認証の実装の詳細 SSO (Enterprise) SSO (Enterprise)の実装の詳細

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

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

マーティンによる人間のサポート

今すぐ始めよう

最新の記事

Capgo は、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。

2方向の通信機能を備えたCapacitor アプリ
開発 モバイル +1
2025年4月26日

Capacitorアプリの2方向通信

OTA更新の5つの一般的なミスを避ける
開発 セキュリティ +1
2025年4月13日

OTA更新の5つの一般的なミスを避ける

モバイルアプリのライブ更新の5つのセキュリティ上のベストプラクティス
開発 モバイル +1
2025年1月14日

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

すべてのブログ記事を表示