モバイルアプリの認証設定は複雑になることがありますが、 Supabase と Capgo Social Login プラグイン makes it straightforward. This tutorial will guide you through integrating social authentication (Google, Apple, Facebook) with Supabase in your Capacitor app.
__CAPGO_KEEP_0__
アプリに Google、Apple、Facebook @capgo/capacitor-social-login なぜSupabaseとSocial Loginを組み合わせるのですか? @capgo/capacitor-supabase は、組み込み認証機能を備えた強力なバックエンドサービスを提供し、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginプラグインは、iOS、Android、Webプラットフォームでネイティブな社会的認証を提供します。より緊密なSupabase統合のために、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-supabaseはネイティブな認証ヘルパーとJWTアクセスを追加します。
- ソーシャル認証の無負荷実装
- セキュアなトークン管理
- クロスプラットフォーム互換性
- リアルタイムデータベース統合
- 組み込みユーザー管理
前提条件
開始する前に、以下を確認してください:
- A Capacitor project set up
- Supabaseアカウントとプロジェクト
- 選択したソーシャルプロバイダーの開発者アカウント (Google、Apple、Facebook)
ステップ 1: ソーシャルログインプラグインのインストールと設定
First, install the Capgo Social Login plugin:
npm install @capgo/capacitor-social-login
npx cap syncCapgoの Social Login と Supabase プラットフォームごとの設定用の
Step 2: Supabaseプロジェクトの設定
プロジェクトを作成して設定する
-
プロジェクトを作成する:
- を supabase.com でサインアップ/サインインする
- をクリックする “新プロジェクト”
- 組織を選択してください
- Enter a プロジェクト名 (例： “MyApp Auth”)
- データベースパスワードを設定 (安全に保存してください) 地域を選択
- (ユーザーに近いものを選択してください) クリック (choose closest to your users)
- Click 「新しいプロジェクトを作成する」
-
プロジェクトの資格情報を取得する:
- プロジェクトが作成されたら、 設定 > API
- コピーする プロジェクトURL (例えば、
https://your-project-ref.supabase.co) - anon 公開 __CAPGO_KEEP_0__ キー API key
- 認証設定を構成する
設定 > __CAPGO_KEEP_0__
-
Capgo:
- Capacitor Capacitor
- Capacitor Capacitor:
- Capacitor Capacitor Capacitor
https://yourdomain.comCapacitorhttp://localhost:3000Capacitor - Capacitor Capacitor 必要に応じて:
http://localhost:3000 https://yourdomain.com capacitor://localhost (for mobile apps)
- Capacitor Capacitor Capacitor
-
メール設定を構成する (オプションですが、推奨される):
- 以下の SMTP設定, メールプロバイダを設定する
- メール確認とパスワードリセットを有効にする
- 開発環境では、組み込みメールサービスを使用できます
社会認証プロバイダを有効にする
- プロバイダのセクションにアクセスする:
- 以下の 認証>プロバイダ Supabaseのダッシュボードで
- 利用可能なソーシャルプロバイダのリストが表示されます
- 各プロバイダには 有効 切り替えスイッチと設定オプション
各ソーシャルプロバイダの詳細な設定については
Step 3: Supabaseでソーシャルプロバイダを設定する
SupabaseでGoogle認証を設定する
Google OAuthのクレデンシャルを取得する
Googleの設定ガイドをご覧ください Google認証の設定
このガイドでは
- Google Cloud Project の作成
- Web、iOS、Android向けのOAuth 2.0資格情報の設定
- consent screen の設定
- 必要な Client ID とシークレットの取得
Google の設定が完了したら、Supabase に設定する
- Supabase で Google プロバイダーを有効にする:
- Supabase ダッシュボードに移動し、 Authentication > Providers
- Google を見つける ON に切り替える __CAPGO_KEEP_0__ __CAPGO_KEEP_1__
- 設定を入力してください:
- クライアントID: Google OAuth のクライアントID Web Google Cloud Console から取得するクライアントID
- クライアントシークレット: Google OAuth のクライアントシークレット Web クライアントシークレット
- リダイレクトURL:
https://your-project-ref.supabase.co/auth/v1/callback(自動入力)
- クリック “Save”
重要Cloudflare Capacitor GitHub Capgo code
API
SDK
CLI npm
bun
- Apple開発者アカウントの設定
- App IDとService IDの作成
- Sign in with Apple機能の設定
- 必要なプライベートキーを生成
- iOS、Android、Web向けのプラットフォーム固有の設定
Appleの設定を完了した後、Supabaseで設定する
- AppleプロバイダをSupabaseで有効にする:
- Authentication > プロバイダに移動 Appleをオンに切り替え __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ __CAPGO_KEEP_2__
- 設定を入力してください:
- クライアントID: サービスID識別子 (例:
com.yourapp.signin) - クライアントシークレット: Appleプライベートキーを使用してJWTを生成してください (see Supabase Appleドキュメント のJWT形式)
- リダイレクトURL:
https://your-project-ref.supabase.co/auth/v1/callback(自動入力)
- クライアントID: サービスID識別子 (例:
- Click 「保存」
注意: Apple authentication setup is the most complex due to Apple’s requirements for Service IDs, private keys, and JWT generation. Follow our documentation carefully for each platform.
Facebook Authentication in Supabaseの設定
Facebookのクレデンシャルを取得する
Facebookの設定ガイドを完全に参照してください Facebook Authenticationの設定
このガイドでは以下の内容をカバーしています。
- Facebook Developerアカウントとアプリの作成
- Facebook Login製品の追加
- OAuthリダイレクトURIの設定
- App ID、App Secret、Client Tokenの取得
- iOSとAndroid向けのプラットフォーム固有の設定
Facebookの設定が完了したら、Supabaseで設定を構成する
- Facebook プロバイダーを Supabase で有効にします。:
- 以下の手順に従ってください。 Authentication > プロバイダー プロバイダーを有効/無効にします。 Facebook オン
- 以下の設定を入力してください。
- クライアント ID: Facebook アプリ ID を入力してください。
- クライアント シークレット: Facebook アプリ シークレットを入力してください。
- リダイレクト URL:
https://your-project-ref.supabase.co/auth/v1/callback(auto-filled)
- Click “Save”
Important: Make sure to add the Supabase callback URL (https://your-project-ref.supabase.co/auth/v1/callback) to your Facebook app’s Valid OAuth Redirect URIs in the Facebook Login settings.
Important Supabase Configuration Notes
Row Level Security (RLS):
- After setting up authentication, enable RLS on your tables
- Go to データベース > テーブル __CAPGO_KEEP_0__ 有効にする 各テーブル
- 認証済みユーザーに基づいてデータアクセスを制御するポリシーを作成する
ユーザー管理:
- 認証済みユーザーを表示する 認証 > ユーザー
- 認証イベントを監視する 認証 > ログ
- メールテンプレートを設定する 認証 > メールテンプレート
設定のテスト:
- Supabaseの組み込み認証テストツールを使用します。
- 以下の手順に従ってください。 認証 > ユーザー 「ユーザーを招待」をクリックします。 メールフローのテストを行います。 エラーが発生した場合は、
- ログ セクションを確認してください。 ステップ 4: ソーシャル ログイン プラグインの設定
Supabaseの設定が完了したら、ソーシャル ログイン プラグインの設定に進みます。
__CAPGO_KEEP_0__ 重要: プラグインには、 元のサービスプロバイダー (Supabaseではなく) からOAuthのクレデンシャルが必要です
認証フローのしくみ
設定に進む前に、流れを理解してください
- プラグインは ソーシャルプロバイダー (Google/Apple/Facebook) に
- プラグインはトークン (アクセストークン、IDトークン) を取得します
- アプリはこれらのトークンを Supabaseに送信します
signInWithIdToken() - Supabaseはトークンを検証し プロバイダーとユーザー セッションを作成します
- Supabaseは アプリの認証済みリクエスト用に
Google プラグイン設定
プラグインには すべてのプラットフォーム向けに Web クライアント ID iOS クライアント ID iOS固有の機能向けに
import { SocialLogin } from '@capgo/capacitor-social-login';
await SocialLogin.initialize({
google: {
// Use the same Web Client ID you configured in Supabase
webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
// Optional: iOS Client ID for iOS-specific features
iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
// Optional: Request offline access for refresh tokens
mode: 'offline'
}
});Googleの重要なポイント
- 使用する Web クライアント ID (Android/iOS クライアント IDではない) Web クライアント ID
webClientIdフィールド - Capacitor プラグインは、Web クライアント IDのみで、すべてのプラットフォームで動作します。
- Capacitor プラグイン
iOSClientIdオプションであり、iOS固有のGoogle機能のみに使用されます。
Apple プラグイン設定
Apple設定はiOSとAndroidで異なります。
iOSの場合 (ネイティブAppleサインイン):
await SocialLogin.initialize({
apple: {
// No additional configuration needed for iOS
// The plugin uses the native Apple Sign-In capability
}
});Android/Webの場合 (Service IDが必要です):
await SocialLogin.initialize({
apple: {
clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
}
});Appleの重要なポイント:
- iOSは、Apple Developer Portalで設定したものと同じで、Sign in with Appleを使用します (追加の設定は必要ありません)
- Android/Webでは、Apple Developer Portalで作成したService IDが必要です
- 設定した
redirectUrlApple Developer PortalとSupabaseで設定したものと同じでなければなりません
Facebookプラグインの設定
Facebookでは、App IDとClient Tokenが必要です
await SocialLogin.initialize({
facebook: {
appId: 'YOUR_FACEBOOK_APP_ID', // From Facebook Developer Dashboard
clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
// Optional: Use Facebook Limited Login (for enhanced privacy)
limitedLogin: false // See our Facebook setup guide for important Limited Login details
}
});Facebookの重要なポイント:
- Supabaseで設定したApp IDを使用してください
- Client TokenはFacebook AppのBasic Settingsで見つけることができます
limitedLogin: trueFacebookのプライバシー重視のLimited Login機能をiOSのみで有効にします- 注意: Facebookの設定ガイド 詳細なLimited Login情報、包括してATTの考慮事項については、
プラグインの初期化を完了する
すべてのプロバイダーを初期化する方法はこちらです:
import { SocialLogin } from '@capgo/capacitor-social-login';
export async function initializeSocialLogin() {
await SocialLogin.initialize({
google: {
webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
mode: 'offline'
},
facebook: {
appId: 'YOUR_FACEBOOK_APP_ID',
clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
},
apple: {
// iOS: no config needed
// Android/Web: uncomment the lines below
// clientId: 'YOUR_SERVICE_ID',
// redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
}
});
}重要な注意:
- CapgoのUIから
initialize()アプリが起動したときに一度だけ呼び出してください、各ログイン前に呼び出すのではなく 使用する予定のプロバイダーだけを設定する必要があります - ここに記載されているクレデンシャルは
- 元のプロバイダーから __CAPGO_KEEP_0__, Supabase からではなく
- Supabase の設定に一致するようにプロバイダーの資格情報を確認してください
ステップ 5: Supabase クライアントの設定
Supabase クライアントをインストールしてください:
npm install @supabase/supabase-jsSupabase サービスを作成してください:
// services/supabase.ts
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';
export const supabase = createClient(supabaseUrl, supabaseKey, {
auth: {
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: false,
},
});ステップ 6: 認証フローの実装
両方の認証サービスを組み合わせた認証サービスを作成してください:
// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';
export class AuthService {
async initializeSocialLogin() {
await SocialLogin.initialize({
google: {
webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
},
facebook: {
appId: 'YOUR_FACEBOOK_APP_ID',
clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
},
apple: {} // iOS configuration
});
}
async signInWithGoogle() {
try {
const result = await SocialLogin.login({
provider: 'google',
options: {
scopes: ['email', 'profile']
}
});
const googleResult = result.result;
if (!googleResult) {
throw new Error('Google login failed');
}
// GoogleLoginResponse is a union type - check responseType to determine flow
if (googleResult.responseType === 'online') {
// Online mode: use idToken directly with Supabase
const { data, error } = await supabase.auth.signInWithIdToken({
provider: 'google',
token: googleResult.idToken!,
});
if (error) throw error;
return data;
} else {
// Offline mode: exchange serverAuthCode on your backend
// Your backend should exchange the code for tokens and create a Supabase session
const response = await fetch('/api/auth/google', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
});
return response.json();
}
} catch (error) {
console.error('Google sign-in error:', error);
throw error;
}
}
async signInWithApple() {
try {
const result = await SocialLogin.login({
provider: 'apple',
options: {
scopes: ['email', 'name']
}
});
const { data, error } = await supabase.auth.signInWithIdToken({
provider: 'apple',
token: result.result?.identityToken!,
});
if (error) throw error;
return data;
} catch (error) {
console.error('Apple sign-in error:', error);
throw error;
}
}
async signInWithFacebook() {
try {
const result = await SocialLogin.login({
provider: 'facebook',
options: {
permissions: ['email', 'public_profile']
}
});
const fbResult = result.result;
if (!fbResult?.accessToken?.token) {
throw new Error('Facebook login failed - no access token received');
}
// Facebook uses accessToken for Supabase authentication
const { data, error } = await supabase.auth.signInWithIdToken({
provider: 'facebook',
token: fbResult.accessToken.token,
});
if (error) throw error;
return data;
} catch (error) {
console.error('Facebook sign-in error:', error);
throw error;
}
}
async signOut() {
// Sign out from Supabase
await supabase.auth.signOut();
// Optionally sign out from social providers
await SocialLogin.logout({
provider: 'google' // or 'apple', 'facebook'
});
}
getCurrentUser() {
return supabase.auth.getUser();
}
onAuthStateChange(callback: (event: string, session: any) => void) {
return supabase.auth.onAuthStateChange(callback);
}
}
export const authService = new AuthService();ステップ 7: アプリケーションに実装
サービスを初期化し、認証を処理してください:
// main.ts or app component
import { authService } from './services/auth';
async function initializeApp() {
await authService.initializeSocialLogin();
// Listen to auth state changes
authService.onAuthStateChange((event, session) => {
if (event === 'SIGNED_IN') {
console.log('User signed in:', session.user);
// Redirect to authenticated area
} else if (event === 'SIGNED_OUT') {
console.log('User signed out');
// Redirect to login
}
});
}
initializeApp();UI にログインボタンを作成してください:
// Login component
async function handleGoogleLogin() {
try {
const user = await authService.signInWithGoogle();
console.log('Signed in with Google:', user);
} catch (error) {
console.error('Login failed:', error);
}
}
async function handleAppleLogin() {
try {
const user = await authService.signInWithApple();
console.log('Signed in with Apple:', user);
} catch (error) {
console.error('Login failed:', error);
}
}
async function handleFacebookLogin() {
try {
const user = await authService.signInWithFacebook();
console.log('Signed in with Facebook:', user);
} catch (error) {
console.error('Login failed:', error);
}
}
async function handleLogout() {
try {
await authService.signOut();
console.log('Signed out successfully');
} catch (error) {
console.error('Logout failed:', error);
}
}ステップ 8: プラットフォーム固有の設定
iOS 設定
iOSの詳細設定方法については、プラットフォーム固有のガイドを参照してください。
- Google iOS設定 - URLスキーム、Info.plistの設定
- Apple iOS設定 - Sign in with Appleの機能設定
- Facebook iOS設定 (一般的なFacebookガイド) - FacebookSDKの設定
クイックサマリー - 追加 ios/App/App/Info.plist:
<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>YOUR_REVERSED_CLIENT_ID</string>
</array>
</dict>
</array>
<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
<string>Default</string>
</array>Xcodeプロジェクトの設定を含むiOSの詳細設定方法については、リンクされたガイドを参照してください。
Androidの設定
Androidの詳細設定手順については、プラットフォーム固有のガイドを参照してください:
- Google Androidの設定 - SHA-1の指紋、Google Play Servicesの設定
- Apple Androidの設定 - Android用のサービスIDの設定
- Facebook Androidの設定 (一般的なFacebookガイド) - FacebookのSDK統合
Androidの基本設定:
1. SHA-1の指紋を取得する (Googleの場合):
# For debug builds (development)
cd android
./gradlew signingReport
# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client2. AndroidManifest.xmlを設定する - 追加 android/app/src/main/AndroidManifest.xml:
<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- Facebook configuration -->
<meta-data
android:name="com.facebook.sdk.ApplicationId"
android:value="@string/facebook_app_id"/>
<meta-data
android:name="com.facebook.sdk.ClientToken"
android:value="@string/facebook_client_token"/>3. Facebook リソースを追加 に android/app/src/main/res/values/strings.xml:
<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>Live Updateのダイナミックラベル
Google Play Servicesの設定とパッケージ名の設定を含むAndroidの完全な構成については、関連するプラットフォームガイドを参照してください。
Step 9: Supabaseデータベースの使用と認証済みユーザー
// Example: Fetch user profile
async function getUserProfile() {
const { data: user } = await supabase.auth.getUser();
if (user) {
const { data, error } = await supabase
.from('profiles')
.select('*')
.eq('id', user.user.id)
.single();
return data;
}
}
// Example: Update user profile
async function updateUserProfile(updates: any) {
const { data: user } = await supabase.auth.getUser();
if (user) {
const { data, error } = await supabase
.from('profiles')
.update(updates)
.eq('id', user.user.id);
return data;
}
}ユーザーが認証されたら、行レベルセキュリティ(RLS)を使用してSupabaseのデータベースを使用できます。
- 重要なセキュリティ上の考慮事項 in your client code
- __CAPGO_KEEP_0__ に暴露しない
- 環境変数を使用して構成 Supabase における
- トークンを検証する 必要に応じてバックエンドで
- トークンを自動的に更新する Supabase で
トラブルシューティングの一般的な問題
トークン一致エラー
- ソーシャルログインプラグインと Supabase の OAuth プロバイダーの設定が一致していることを確認する
- リダイレクト URL が正しく設定されていることを確認する
プラットフォーム固有の問題
- iOS: Apple Developer の設定と Bundle ID が一致していることを確認する
- Android: Google Console に SHA1 の指紋が正しく追加されていることを確認する
認証フロー中断
- ネットワーク問題のための適切なエラーハンドリングを実装する
- 認証中にローディング状態を追加する
結論
Capacitorのソーシャルログインプラグインと組み合わせたSupabaseの強力なバックエンドとネイティブのソーシャルログイン機能を組み合わせた完全な認証システムを持つようになりました。この設定では
- セキュアなネイティブソーシャル認証
- トークン管理のシームレス
- リアルタイムデータベース統合
- クロスプラットフォーム互換性
Capgoプラグインと組み合わせたSupabaseとCapacitorは、Capacitorアプリケーション向けに強力かつスケーラブルな認証ソリューションを提供します。
より高度な機能 マルチファクター認証 または カスタムクレーム、Capgoの Supabaseドキュメント と Social Loginプラグインドキュメント.
Keep going from Setup Supabase Authentication with Capacitor Social Login Plugin
Setup Supabase Authentication with __CAPGO_KEEP_0__ Social Login Plugin Setup Supabase Authentication with Capacitor Social Login Plugin Setup Supabase Authentication with __CAPGO_KEEP_0__ Social Login Plugin @capgo/capacitor-social-login CapgoのSetup Supabase Authentication with capgo Social Login Pluginを使用して認証とアカウントフローを計画し、@capgo/capacitor-social-loginと接続する @capgo/capacitor-passkey @capgo/capacitor-passkey @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric 都の安全試导にらだ 都の安全試导にらだ エェサインを上だ エェサインを上だ
