Supabase統合の紹介

__CAPGO_KEEP_0__

概要

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

学びます

Supabase認証の設定方法
Supabase AuthとCapacitor ソーシャルログインプラグインを統合する方法
Android、iOS、Web用のプラットフォーム固有の設定
Supabaseのnonceを安全に処理する方法

必要なもの

始める前に、次のことを確認してください:

Supabase Project
- プロジェクトを作成する Supabase ダッシュボード
- Google OAuth プロバイダーを有効にする
- Supabase プロジェクトの URL と anon キーを取得する
Supabase JS SDK
- プロジェクトに Supabase をインストールする:
  ターミナル画面
```
npm install @supabase/supabase-js
```
A Capacitor Project
- An existing Capacitor application
- Capacitor ソーシャルログインプラグインインストール:
  ターミナルウィンドウ
```
npm install @capgo/capacitor-social-login
npx cap sync
```
プラットフォーム固有のGoogleセットアップ
- ターゲットプラットフォーム用にGoogleサインインセットアップを完了してください:

例のアプリケーション

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

Code リポジトリ: You can find the code repository here

例のアプリは以下を実装しています

Supabaseによるメール/パスワード認証
Android、iOS、Web向けのGoogle Sign-In統合
Supabase PostgreSQLテーブルの単純なキー値ストア
ユーザー固有のデータの保存にRow Level Security (RLS)を使用

キーの実装詳細

ノンスの取り扱い

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

認証コードを生成する rawNonce __CAPGO_KEEP_0__
SHA-256でハッシュして nonceDigest
パスワード nonceDigest Google Sign-Inに渡す
パスワード rawNonce Supabase (内部でハッシュして比較する) に渡す

JWT検証

JWT検証の例実装には、以下の条件を確認する機能が含まれています。

トークンの受信者が、設定済みのGoogle Client IDと一致している
nonceが予期されるハッシュと一致している
__CAPGO_KEEP_0__ (iOS の場合、特に重要)

__CAPGO_KEEP_1__

__CAPGO_KEEP_3____CAPGO_KEEP_4__ - トークンキャッシュが nonce の問題を引き起こす可能性があるため、実装はこれを自動的に処理します。
__CAPGO_KEEP_5____CAPGO_KEEP_6__ を呼び出す必要があります。 isLoggedIn() __CAPGO_KEEP_7__
__CAPGO_KEEP_8____CAPGO_KEEP_9__

__CAPGO_KEEP_10__

セットアップガイドを続行してください：

Supabase Google ログイン - 一般設定 - 概要と前提条件
Android セットアップ - Android固有の設定
iOS セットアップ - iOS固有の設定
Web セットアップ - Web固有の設定

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

Supabase Integration Introductionから続けてください

Capgoを使用している場合 Supabase Integration Introduction 認証とアカウントフローの計画に使用し、Capgoと接続する 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/capacitor-passkey を参照してください。 @capgo/capacitor-native-biometric 実装詳細については @capgo/capacitor-native-biometric を参照してください。 2要素認証 2要素認証の実装詳細についてはこちらを参照してください。