Supabase統合導入から続けて

概要

このチュートリアルでは、Capacitor Social Login プラグインと Supabase Authentication を設定する方法について説明します。この統合により、Google、Apple、Facebook、Twitterなどのネイティブのソーシャルログインプロバイダーをモバイルプラットフォームで使用し、バックエンドの認証とPostgreSQLのデータストレージを利用することができます。

What You’ll Learn

• Supabase Authenticationを設定する方法
• Capacitor Social Login プラグインと Supabase Auth を統合する方法
• Android、iOS、Web向けのプラットフォーム固有の設定
• Supabaseで安全にハンドルする方法

What You’ll Need

このチュートリアルを始める前に、以下のことが必要です。

1. Supabase Project

   • プロジェクトを作成する Supabase ダッシュボード
   • Google OAuth プロバイダーを有効にする
   • Supabase プロジェクトの URL と anon キーを取得する

2. Supabase JS SDK

   • プロジェクトに Supabase をインストールする:

     npm install @supabase/supabase-js

3. A Capacitor プロジェクト

   • 既存の Capacitor アプリケーション
   • Capacitor ソーシャルログイン プラグインがインストールされている:

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

4. プラットフォーム固有のGoogleセットアップ

   • 対象プラットフォーム用のGoogleサインインセットアップを完了してください
     • GoogleログインAndroidセットアップ
     • GoogleログインiOSセットアップ
     • GoogleログインWebセットアップ

サンプルアプリケーション

リポジトリで利用可能な完全な実行可能なサンプルが用意されています

Code リポジトリ: code リポジトリはこちらでご確認いただけます

サンプルアプリケーションでは以下の機能が実装されています

• Supabaseによるメール/パスワード認証
• Google Sign-Inの統合 (Android、iOS、Web)
• Supabase PostgreSQLテーブルの単純なキー値ストア
• 行レベルセキュリティ（RLS）を使用したユーザー固有のデータストレージ

キーの実装詳細

ノンスの取り扱い

セキュリティのために、Supabaseには特別なノンスの取り扱いが必要です。実装はReact Native Google Sign Inドキュメントに従っています。 生成する:

• (URL安全のランダム文字列) rawNonce email/passwordによるSupabase認証
• __CAPGO_KEEP_0__をSHA-256でハッシュ化して nonceDigest
• __CAPGO_KEEP_1__を渡す nonceDigest Google Sign-Inに渡す
• __CAPGO_KEEP_2__を渡す rawNonce Supabase (内部で比較するためにSupabaseが内部でハッシュ化する)

JWT検証

例の実装には、次のことを確認するためにJWT検証が含まれています。

• トークンの受信者が設定済みのGoogle Client IDと一致する
• nonceが期待どおりのダイジェストと一致する
• 検証失敗時の自動リトライ (iOSの場合に特に重要)

プラットフォーム固有の考慮事項

• iOS: トークンキャッシュが非効率性を引き起こす可能性があるため、nonceの問題が発生する可能性があります - これを自動的に処理する実装が用意されています
• Web: mount時に呼び出す必要があります isLoggedIn() Android
• : SHA-1指紋の設定を含む標準的な実装次のステップ

プラットフォーム固有の考慮事項

Supabase Googleログイン - 一般的なセットアップ

• 次のステップ - Android用のセットアップ
• Androidの設定 - Android用の設定
• iOS用のセットアップ iOSの設定
• - iOS用の設定 Web用のセットアップ

- Web用の設定

• Apple Sign-In SupabaseのAppleログイン - 一般設定
• - Android用のセットアップ - iOS用の設定
• Androidの設定 - Android用の設定

Supabase統合の紹介から続けて

Capacitorで Capacitorを使用して Capacitorで Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-passkey Capgoにおける@capgo/capacitor-passkeyの実装詳細について @capgo/capacitor-native-biometric Capgoにおける@capgo/capacitor-native-biometricの実装詳細について、 2要素認証 2要素認証の実装詳細について