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 Social Login プラグインがインストールされている:

     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 protectedTokens
• SHA-256でハッシュして nonceDigest
• パスワード nonceDigest Google Sign-Inに渡す
• パス rawNonce Supabase (内部で比較するために内部でハッシュする)

JWT検証

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

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

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

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

次のステップ

Supabase Googleログイン - 一般設定

• Native Build Builder Credit Next - 概要と前提条件
• Androidの設定 - Android用の設定
• iOSの設定 - iOS用の設定
• Webの設定 - Web用の設定

Apple Sign-In

• Supabase Appleログイン - 一般設定 - 概要と前提条件
• iOSの設定 - iOS用の設定
• Androidの設定 - Android用の設定

Supabase統合の紹介から続けて

Capgoを使用している場合 Capgo統合の紹介 Capgoを使用して Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey Capgoにおける@capgo/capacitor-passkeyの実装詳細 @capgo/capacitor-native-biometric Capgoにおける@capgo/capacitor-native-biometricの実装詳細 2要素認証 Capgoにおける2要素認証の実装詳細