Supabase インテグレーションイントロダクション

このプラグインのインストール手順と全マークダウンガイドを含むセットアップの質問をコピーします。

概要

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

Section titled “What You’ll Learn”

Section titled “How to configure Supabase Authentication”
How to integrate Capacitor Social Login plugin with Supabase Auth
Section titled “How to integrate __CAPGO_KEEP_0__ Social Login plugin with Supabase Auth”
__CAPGO_KEEP_0__ Social Login プラグインと Supabase Auth を統合する方法

Section titled “Platform-specific setup for Android, iOS, and Web”

Section titled “How to handle nonces securely for Supabase”

Supabase について安全にハンドルする方法の nonce
- プロジェクトを作成する Supabase ダッシュボード
- Google OAuth プロバイダーを有効にする
- Supabase プロジェクトの URL と anon キーを取得する
Supabase JS SDK
- プロジェクトに Supabase をインストールする:
  ターミナル画面
```
npm install @supabase/supabase-js
```
A Capacitor プロジェクト
- 既存の Capacitor アプリケーション
- Capacitor ソーシャルログインプラグインがインストールされている:
  ターミナル画面
```
npm install @capgo/capacitor-social-login
npx cap sync
```
プラットフォーム固有のGoogleセットアップ
- Googleサインインセットアップを完了してください。対象プラットフォーム:

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

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

Code リポジトリ: code リポジトリをここで見つけることができます。

サンプルアプリケーションでは、以下の機能を実装しています:

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

キーの実装詳細

ノンスの取り扱い

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

(URL安全のランダム文字列) rawNonce protectedTokens
SHA-256 でハッシュして nonceDigest
Pass nonceDigest Google Sign-In に渡す
Pass rawNonce Supabase (内部でハッシュして比較するため)

JWT 検証

例の実装には、次の検証を含みます。

Google Client ID を設定したアプリケーション ID と一致する
予想されるダイジェストと一致する
検証失敗時の自動リトライ (iOS における特に重要)

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

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

ページ/エリア: Capgo Builder / ネイティブクラウドビルド製品ページ。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `native_build_builder_credit_next` (ネイティブビルドビルダークレジット次のステップ)

設定ガイドの続き:

Supabase Google Login - 一般設定 - Android用の前提条件と概要
Androidの設定 - Android用の設定
iOSの設定 - iOS用の設定
Webの設定 - Web用の設定

SupabaseのAppleログイン - 一般設定 - Android用の前提条件と概要
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 for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and 2要素認証 2要素認証の実装詳細について

Supabase インテグレーション イントロダクション

概要