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

モバイルアプリの認証設定は複雑ですが、Supabaseと__CAPGO_KEEP_0__ソーシャルログインプラグインを組み合わせると Supabase __CAPGO_KEEP_0__ソーシャルログインプラグイン Capgo Social Login plugin 簡単に実行できます。このチュートリアルでは、Capacitor アプリに Google、Apple、Facebook などの社会的認証を Supabase と統合する方法を紹介します。

Supabase と社会ログインを使用する理由

Supabase 提供するのは、組み込み認証機能を備えた強力なバックエンドサービスです。@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login プラグインは、iOS、Android、Web プラットフォームでネイティブの社会的認証を提供します。 @capgo/capacitor-social-login セキュアなトークン管理

• クロスプラットフォーム互換性
• リアルタイムデータベース統合
• 組み込みユーザー管理
• 前提条件
• targetLanguage

Japanese

開始する前に、以下を確認してください:

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

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

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

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

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

Supabaseプロジェクトの作成と設定

1. Supabaseプロジェクトの作成:

   • 以下のURLにアクセスしてください: https://supabase.com サインアップまたはサインインしてください
   • Click “New Project”
   • Choose your organization
   • Enter a Project Name (e.g., “MyApp Auth”)
   • Set a Database Password (save this securely)
   • Select your Region (choose closest to your users)
   • クリック “Create new project”

2. Get your project credentials:

   • Once created, go to Settings > API
   • Copy your Project URL (e.g., https://your-project-ref.supabase.co)
   • Copy your anon public API key
   • Save these for later use in your app

認証設定を構成する

3. 一般的な認証設定を設定する:

   • ここに移動する 認証 > 設定
   • 以下 一般設定:
     • を設定する サイトURL あなたのアプリのURL (例えば https://yourdomain.com または http://localhost:3000 開発用
     • 追加する リダイレクト URL __CAPGO_KEEP_0__

       http://localhost:3000
       https://yourdomain.com
       capacitor://localhost (for mobile apps)

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

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

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

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

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

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

SupabaseでGoogle認証を設定する

まず、Google OAuthのクレデンシャルを取得する

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

このガイドでは、

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

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

1. SupabaseでGoogleプロバイダを有効にする:
   • Supabaseダッシュボードで、 認証>プロバイダ
   • を探す Google をオン/オフにする ON
   • 設定を入力してください:
     • クライアントID: Google OAuth のクライアントID Web Google Cloud Console から取得するクライアントID
     • クライアントシークレット: Google OAuth のクライアントシークレット Web Google Cloud Console から取得するクライアントシークレット
     • リダイレクトURL: https://your-project-ref.supabase.co/auth/v1/callback (自動入力)
   • クリック “Save”

重要: 以下のWeb Client IDとWeb Client SecretをSupabaseに設定してください。モバイルアプリを開発している場合でも、Web Client IDとWeb Client SecretはSupabaseに設定する必要があります。モバイルクライアントIDはプラグイン設定で別途使用されます。 Apple認証をSupabaseに設定する Apple認証の取得: 詳細なApple設定ガイドを参照してください: Apple認証設定

Apple認証設定

Apple認証設定

Apple認証設定 Apple認証設定

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

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

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

1. AppleプロバイダーをSupabaseで有効にする:
   • Go to 認証 > プロバイダー Appleプロバイダーをオンにします __CAPGO_KEEP_0__ ON
   • __CAPGO_KEEP_0__
     • __CAPGO_KEEP_1____CAPGO_KEEP_2__ com.yourapp.signin)
     • __CAPGO_KEEP_3__サービスIDの識別子（例えば、 __CAPGO_KEEP_4__ Appleのプライベートキーを使用してJWTを生成する（AppleのJWT形式については
     • SupabaseのAppleドキュメント: https://your-project-ref.supabase.co/auth/v1/callback リダイレクトURL
   • 自動入力 「保存」をクリック

注意: 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 をオンにします Facebook オン
   • 以下の設定を入力する
     • クライアント ID: Facebook アプリ ID
     • : Facebook アプリ シークレット__CAPGO_KEEP_0__
     • URLのリダイレクト: https://your-project-ref.supabase.co/auth/v1/callback （自動入力）
   • クリック 保存

大切な情報です。Supabase コールバック URL を追加してください。https://your-project-ref.supabase.co/auth/v1/callback)をあなたのFacebookアプリに OAuth リダイレクト URI Facebook ログイン設定にアクセスします。

重要な Supabase 設定に関する注意事項

Row Level Security (RLS):

• 認証を設定した後、テーブルにRLSを有効にします。
• Go to データベース > テーブル とスイッチ 各テーブルにRLSを有効にする 認証済みユーザーに基づいてデータアクセスを制御するポリシーを作成する
• ユーザー管理:

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

• 認証 > ユーザー 認証イベントを監視する
• 認証 > ログ メールテンプレートを設定する
• __CAPGO_KEEP_0__ 認証 > メールテンプレート

設定をテストする:

• Supabaseの組み込み認証テストツールを使用してください
• ここに 認証 > ユーザー をクリックしてください “Invite user” メールフローのテストに使用するためにユーザーを招待してください
• 認証エラーの確認のため ログ セクションを確認してください

Step 4: Social Login プラグインの設定

Supabaseが設定されたら、対応するクレデンシャルとともにSocial Loginプラグインを設定する必要があります。 重要: プラグインは、Supabaseではなく、 元のプロバイダー からOAuthクレデンシャルを受け取ります。Supabaseはサーバーサイドの認証を取り扱います。

認証フローのしくみ

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

1. プラグインは プラグインは
2. プロバイダーから アクセストークン、IDトークンを取得します。
3. アプリはこれらのトークンを送信します Supabase を使用して signInWithIdToken()
4. Supabase は プロバイダーとトークンを検証し、ユーザー セッションを作成します
5. Supabase は アプリの認証済みリクエスト用に自身の JWT トークンを返します

Google プラグイン設定

プラグインにはすべてのプラットフォーム向けに Web クライアント ID オプションで iOS 向けの機能向けに iOS クライアント 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 の重要な点

• ウェブクライアントIDを使用してください __CAPGO_KEEP_0__ ウェブクライアントID（Android/iOSクライアントIDではありません）を使用してください webClientId __CAPGO_KEEP_0__
• ウェブクライアントIDのみで、すべてのプラットフォームでプラグインが動作することを保証します
• __CAPGO_KEEP_1__ iOSClientId iOS向けのGoogle機能のみに使用されます

iOS向けのApple設定

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

iOS向け (ネイティブAppleサインイン):

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

Android/Web向け (requires 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は、Apple Developer Portalで設定したものと同じService IDを使用して、Sign in with Appleをネイティブで使用します (追加の設定は必要ありません)
• Android/Webでは、Apple Developer Portalで作成したService IDを使用します
• The redirectUrl Apple Developer PortalとSupabaseで設定したものと同じService IDを使用する必要があります

Facebookプラグイン設定

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のBasic Settingsから取得できます
• Facebookのプライバシーに焦点を当てたLimited Login機能 (iOSのみ) を有効にします
• limitedLogin: true __CAPGO_KEEP_0__
• 注意事項: {targetLanguage}の 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_1__} 提供元を選択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);
  }
}

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

iOS 設定

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

• Google iOS 設定 - URL スキーム、Info.plist 設定
• Apple iOS 設定 - Sign in with Apple 機能の設定
• Facebook iOS 設定 (一般的な Facebook ガイド) - Facebook SDK 設定

概要 - 追加 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>

Xcode プロジェクト設定を含む iOS 設定方法については、以下のリンク先のガイドを参照してください。

Android 設定

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

• Google Android 設定 - SHA-1指紋、Google Play Services 設定
• Apple Android 設定 - Android用サービスIDの設定
• Facebook Android 設定 (一般的なFacebookガイド) - Facebook SDK統合

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>

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

ステップ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. 機密鍵をクライアントに暴露しない in your client code
2. __CAPGO_KEEP_0__ 環境変数を使用して設定
3. セキュリティ レベルを有効にする Supabase に
4. トークンを検証する 必要に応じてバックエンドで
5. トークンを自動的に更新する Supabase と

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

トークン一致エラー

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

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

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

認証フローの中断

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

まとめ

Supabase の強力なバックエンドとネイティブのソーシャルログイン機能を組み合わせた完全な認証システムを持つようになりました。この設定では、以下の機能が提供されます。

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

Supabase と Capgo Social Login プラグインの組み合わせは、Capacitor アプリのための強力でスケーラブルな認証ソリューションを提供します。

Cloudflare、GitHub、npm、bun、CLI、SDK、API、code、Capacitor、Capgo などの機能を含むより高度な機能については 多要素認証 または カスタムクレームを確認するSupabase ドキュメントをご確認ください および Social Login プラグイン ドキュメントをご確認ください 著者.