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で安全にハンドルするためのnonceの方法

必要なもの

始める前に、以下のことを確認してください。

1. Supabase Project

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

2. Supabase JS SDK

   • プロジェクトに Supabase をインストールしてください:

     npm install @supabase/supabase-js

3. Capacitor プロジェクト

   • 既存の Capacitor アプリケーション
   • Capacitor Social Login プラグインがインストールされています:

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

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

   • ターゲット プラットフォーム向けに Google Sign-In セットアップを完了してください:
     • Google Login Android Setup
     • Google Login iOS Setup
     • Google Login Web Setup

Example Application

A complete working example is available in the repository:

Code Repository: You can find the code repository here

The example app demonstrates:

• The example app demonstrates:
• Email/password authentication with Supabase
• Google Sign-In integration (Android, iOS, and Web)
• ユーザー固有のデータストレージとRow Level Security (RLS)

Key Implementation Details

Nonce の取り扱い

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

• Generate a rawNonce URL 安全のランダム文字列
• Hash it with SHA-256 を実行して nonceDigest
• Pass nonceDigest Google Sign-In に
• Pass rawNonce を Supabase (内部で比較するためにハッシュする)

JWT 検証

例の実装には、次のことを確認するために JWT 検証を含みます:

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

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

• iOS: トークンキャッシュが nonce の問題を引き起こす可能性があるため、実装は自動的にこれを処理する
• Web: __CAPGO_KEEP_0__ isLoggedIn() -mount での OAuth リダイレクトを処理するには、on mount を呼び出す必要があります。
• Android: SHA-1 フィンガープリントの構成を含む標準実装

次のステップ

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

• - 概要と前提条件 Android セットアップ
• - Android固有の構成 Next Steps
• iOS セットアップ - iOS に関する構成
• Web セットアップ - Web に関する構成

Apple サインイン

• Supabase Apple ログイン - 一般的なセットアップ - 概要と前提条件
• iOS セットアップ - iOS に関する構成
• Android セットアップ - Android に関する構成

Supabase統合の続き

Capgoを使用している場合 Supabase統合の続き 認証とアカウントフローの計画に使用する場合、Capgoを @capgo/capacitor-social-login @capgo/capacitor-social-loginのネイティブ機能 @capgo/capacitor-social-login @capgo/capacitor-social-loginの実装詳細 @capgo/capacitor-passkey @capgo/capacitor-passkeyの実装詳細 @capgo/capacitor-native-biometric 実装詳細については @capgo/capacitor-native-biometric に参照してください。 2要素認証 実装詳細については 2要素認証 に参照してください。