コンテンツにスキップ
Capgo - Capacitor アプリ向けリアルタイム更新 Capgo

Supabase統合の紹介

概要

概要

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

学習内容

ソーシャルログインプラグインとSupabase Authの統合方法
  • Android、iOS、Web向けのプラットフォーム固有の設定
  • How to integrate Capacitor Social Login plugin with Supabase Auth
  • 必要なもの
  • 開始する前に、以下の条件を満たしてください。

Supabaseプロジェクト

Supabaseプロジェクト

Supabaseプロジェクト

  1. Supabaseプロジェクト

    • プロジェクトを作成する 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セットアップ

例のアプリケーション

「例のアプリケーション」のセクション

リポジトリに含まれる完全な実行可能な例が利用可能です。

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

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

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

実装の詳細

実装の詳細

ノンスの取り扱い

ノンスの取り扱い

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

  • 生成 rawNonce (URL安全のランダム文字列)
  • SHA-256 でハッシュして nonceDigest
  • パスワード nonceDigest Google Sign-In にパス
  • パス rawNonce Supabase (内部でハッシュして比較するため)

JWT 検証

JWT 検証

検証を含む例実装には、以下の条件を確認するために使用されます。

  • Google Client ID を設定した場合に、トークンの受信者が一致する
  • 予想されるダイジェストと一致する非接続
  • iOS の場合、検証失敗時の自動リトライ (iOS に特有の考慮事項)

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

プラットフォーム固有の考慮事項
  • iOS: トークンキャッシュが nonce 問題を引き起こす可能性があるため、実装は自動的にこれを処理します
  • Web: mount 時に呼び出す必要があります isLoggedIn() Android
  • : SHA-1 フィンガープリントの構成を使用した標準実装次のステップ

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

セットアップガイドを続けてください:

Supabase Google ログイン - 一般設定

アサイコタタス

アサイコタタス、アサイコタタスを下不だです