Facebookログインセットアップ

導入

このガイドでは、Capgo Social LoginとFacebook Loginをセットアップする方法を学びます。必要なものは以下の通りです。

• A Facebook Developer Account
• アプリのパッケージ名/バンドルID
• Android用のキーハッシュを生成するためのターミナルへのアクセス

一般設定

Facebookアプリがまだ作成されていない場合は、以下の手順に従ってください。

1. Facebookアプリを作成する

   チュートリアルに従って アプリを作成する

2. Facebookログインをアプリに追加する

   Facebook Developer Dashboardで、アプリにFacebookログイン製品を追加する

3. アプリを一般公開する前に、以下の手順に従ってください。 チュートリアル 公開する

重要な情報

ここでは、統合に必要なキーアイテムを探すことができます。

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Facebook Business Login

このプラグインでは、ビジネス関連の機能と権限をサポートするFacebook Business Loginを使用します。ビジネスアカウントは、標準の消費者ログインの権限の他に、Instagramとページの管理を含む追加の権限を要求できます。

サポートされているビジネス権限は次のとおりです:

• instagram_basic - Access to Instagram Basic Display API
• instagram_manage_insights - Instagram Insights にアクセスする
• pages_show_list - ページを管理する人のリスト
• pages_read_engagement - ページからエンゲージメントデータを読み取る
• pages_manage_posts - ページの投稿を管理する
• business_management - ビジネスアセットを管理する

Facebook の パーミッション リファレンス を参照してください。

全パーミッションの一覧を参照するには

1. 設定の要件:
2. Facebook Developer Console で Facebook アプリをビジネス アプリとして設定する必要があります。
3. FacebookのBusiness Use Caseポリシーに従う必要があります。

Instagram Basic Access

await SocialLogin.initialize({
  facebook: {
    appId: 'your-business-app-id',
    clientToken: 'your-client-token',
  },
});

const res = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: [
      'email',
      'public_profile',
      'instagram_basic',
      'pages_show_list',
      'pages_read_engagement',
    ],
  },
});

const profile = await SocialLogin.providerSpecificCall({
  call: 'facebook#getProfile',
  options: {
    fields: ['id', 'name', 'email', 'instagram_business_account'],
  },
});

ページ管理

const res = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: [
      'email',
      'pages_show_list',
      'pages_manage_posts',
      'pages_read_engagement',
    ],
  },
});

const profile = await SocialLogin.providerSpecificCall({
  call: 'facebook#getProfile',
  options: {
    fields: ['id', 'name', 'accounts{id,name,instagram_business_account}'],
  },
});

重要な注意事項:

• ビジネス用途のテストユーザーと開発アプリを使用して、ビジネスパーミッションをテストできます。
• ほとんどのビジネスパーミッションは、生産用途での使用前にFacebook App Reviewが必要です。
• ビジネスAPIには、リリース前にFacebookの現在のプラットフォームドキュメントを確認する必要があります。
• FacebookのBusiness Use Caseポリシーに従う必要があります。 Facebook Business Integration Guide アプリの設定時に

Androidの設定

1. アプリにインターネットの権限を追加してください AndroidManifest.xml

   この行が存在することを確認してください

   <uses-permission android:name="android.permission.INTERNET"/>

2. Androidのキー ハッシュを生成する

   Facebookのセキュリティ上の要件です。ターミナルを開いて、以下のコマンドを実行してください

   keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 -A

   パスワードの入力を求められたら、以下の値を入力してください android

   注記

   リリースビルドの場合、リリースキーストアを使用する必要があります:

   keytool -exportcert -alias your-key-name -keystore your-keystore-path | openssl sha1 -binary | openssl base64 -A

3. Facebookアプリにキー ハッシュを追加

   1. Facebook Developersでアプリのダッシュボードに移動
   2. 設定 > 基本設定
   3. 「Android」セクションまで下にスクロール
   4. まだ追加されていない場合は「Add Platform」をクリックして詳細を入力
   5. 追加したキー ハッシュを追加
   6. プロダクションでは、デバッグとリリースの両方のキー ハッシュを追加する必要があります

4. Facebookアカウントを更新してください AndroidManifest.xml に含める必要があります:

   <application>
       ...
       <activity android:name="com.facebook.FacebookActivity"
           android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
           android:label="@string/app_name" />
   
       <activity
           android:name="com.facebook.CustomTabActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.VIEW" />
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE" />
               <data android:scheme="FB[APP_ID]" />
           </intent-filter>
       </activity>
   </application>

   注意

   実際のFacebookアプリIDに置き換えてください。 [APP_ID] 属性 android:scheme iOS設定

「iOS設定」のセクション

1. Facebook Developersでアプリのダッシュボードに移動してください

   1. __CAPGO_KEEP_0__
   2. 設定 > 基本設定に移動してください
   3. ページの下部までスクロールし、「プラットフォームを追加」をクリックしてください
   4. iOSを選択し、必要な情報を入力してください

2. Xcodeプロジェクトを開き、Info.plistに移動してください

3. Info.plistに次のエントリを追加してください:

   <key>FacebookAppID</key>
   <string>[APP-ID]</string>
   <key>FacebookClientToken</key>
   <string>[CLIENT-TOKEN]</string>
   <key>FacebookDisplayName</key>
   <string>[APP-NAME]</string>
   <key>LSApplicationQueriesSchemes</key>
   <array>
       <string>fbapi</string>
       <string>fb-messenger-share-api</string>
   </array>
   <key>CFBundleURLTypes</key>
   <array>
       <dict>
           <key>CFBundleURLSchemes</key>
           <array>
               <string>fb[APP-ID]</string>
           </array>
       </dict>
   </array>

   注意

   置き換える値:

   • [APP-ID] FacebookアプリIDに置き換えてください
   • [CLIENT-TOKEN] クライアントトークンに置き換えてください
   • [APP-NAME] アプリ名に置き換えてください

4. Facebookログインを変更する AppDelegate.swift

   import FBSDKCoreKit
   @UIApplicationMain
   class AppDelegate: UIResponder, UIApplicationDelegate {
         func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
           // Override point for customization after application launch.
   
           // Initialize Facebook SDK
           FBSDKCoreKit.ApplicationDelegate.shared.application(
               application,
               didFinishLaunchingWithOptions: launchOptions
           )
   
           return true
       }
   
       func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
           // Called when the app was launched with a url. Feel free to add additional processing here,
           // but if you want the App API to support tracking app url opens, make sure to keep this call
   
           if (FBSDKCoreKit.ApplicationDelegate.shared.application(
               app,
               open: url,
               sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
               annotation: options[UIApplication.OpenURLOptionsKey.annotation]
           )) {
               return true;
           } else {
               return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
           }
       }
   }

アプリにFacebookログインを使用する

注意

開始する前に: Facebookの新しいSDKの場合、受け取るトークンのタイプは、ユーザーのアプリのトラッキングの選択に完全に依存し、codeの設定とは関係ありません。すべてのユーザーに対して認証が機能するように、バックエンドで両方のアクセストークンとJWTトークンハンドリングを実装することをお勧めします。

1. アプリにFacebookログインを初期化する

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   // Initialize during app startup
   await SocialLogin.initialize({
     facebook: {
       appId: 'APP_ID',
       clientToken: 'CLIENT_TOKEN',
     }
   })

2. ログイン機能を実装する

   async function loginWithFacebook() {
     try {
       const result = await SocialLogin.login({
         provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile'],
          limitedLogin: false // See Limited Login section below for important details
        }
       });
       console.log('Facebook login result:', result);
       // Handle successful login
     } catch (error) {
       console.error('Facebook login error:', error);
       // Handle error
     }
   }

   注意

   iOS限定ログインを limitedLogin に設定すると、FacebookのLimited Login機能を使用できます。この機能はiOS専用で、ログイン時に共有されるデータを制限してプライバシーを強化します。

   重要な制限:

   • iOS専用: iOS限定ログインはiOSデバイスのみに影響し、Androidには影響しません
   • ATTオーバーライド: にもかかわらず、FacebookはユーザーがApp Tracking Transparency(ATT)の許可を与えていない場合に自動的に limitedLogin: falseに強制します true __CAPGO_KEEP_0__
   • 両方のケースを常に処理する両方のケースを常に処理する: アプリケーションは、制限されたログインとフルログインの両方のシナリオに備えなければなりません

   ATT ステータスを確認する

   // Check if user has granted tracking permission
   const trackingStatus = await SocialLogin.providerSpecificCall({
     call: 'facebook#requestTracking',
     options: {}
   });
   console.log('Tracking status:', trackingStatus.status); // 'authorized', 'denied', 'notDetermined', or 'restricted'

   アクセストークンが優先される場合の推奨実装:

   async function loginWithFacebook() {
     try {
       // Check ATT status first
       const trackingStatus = await SocialLogin.providerSpecificCall({
         call: 'facebook#requestTracking',
         options: {}
       });
   
       const result = await SocialLogin.login({
         provider: 'facebook',
         options: {
           permissions: ['email', 'public_profile'],
           limitedLogin: trackingStatus.status === 'denied' // Auto-adjust based on ATT
         }
       });
   
       // Handle different response types based on limited login
       if (result.result.accessToken) {
         // Your app logic should work with both limited and full login
         console.log('Login successful:', result);
       }
     } catch (error) {
       console.error('Facebook login error:', error);
     }
   }

   制限されたログインの場合の流れ

   • データアクセスの制限ユーザーデータが利用できない場合があります
   • トークンの種類が異なるアクセストークンには異なる機能が付与されている場合があります
   • プライバシーへの適合: iOS プライバシー要件に準拠するのに役立ちます。

   重要: iOS プライバシー要件に準拠するのに役立ちます。 : iOS プライバシー要件に準拠するのに役立ちます。.

3. : iOS プライバシー要件に準拠するのに役立ちます。

   : iOS プライバシー要件に準拠するのに役立ちます。

   async function getFacebookProfile() {
     try {
       const profileResponse = await SocialLogin.providerSpecificCall({
         call: 'facebook#getProfile',
         options: {
           fields: ['id', 'name', 'email', 'first_name', 'last_name', 'picture']
         }
       });
   
       console.log('Facebook profile:', profileResponse.profile);
       return profileResponse.profile;
     } catch (error) {
       console.error('Failed to get Facebook profile:', error);
       return null;
     }
   }
   
   // Example usage after login
   async function loginAndGetProfile() {
     const loginResult = await loginWithFacebook();
     if (loginResult) {
       const profile = await getFacebookProfile();
       if (profile) {
         console.log('User ID:', profile.id);
         console.log('Name:', profile.name);
         console.log('Email:', profile.email);
         console.log('Profile Picture:', profile.picture?.data?.url);
       }
     }
   }

   : iOS プライバシー要件に準拠するのに役立ちます。

   : iOS プライバシー要件に準拠するのに役立ちます。: You can request any fields available in Facebook’s Graph API. Common fields include: id, name, email, first_name, last_name, picture, birthday, gender, location, hometown: iOS プライバシー要件に準拠するのに役立ちます。

   トークンタイプ制限: この getProfile 呼び出しは、トラッキングが許可された標準ログイン時にのみ機能します。ユーザーがトラッキングを拒否した場合、またはJWTトークンのみを使用している場合、この呼び出しは失敗します。その場合、初回ログイン応答から提供されるプロファイルデータを使用してください。 ⚠️ Critical: バックエンドトークンハンドリング バックエンドトークンハンドリングに関する重要な注意事項

危険

: iOSのみの制限ログインとAppトラッキング透明性 (ATT) は

iOS-ONLY__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ 機能。 Android の場合、常にアクセストークンを受け取ることができます。 limitedLogin 設定に関係なく。

iOS のトークン動作:

• limitedLogin: true → 常に JWT トークン (iOS 限定)
• limitedLogin: false → アクセストークン → JWT トークン (iOS は自動的に設定を上書きします)
• limitedLogin: false Android のトークン動作 : 常にアクセストークン、

設定は無視されます。あなたのバックエンドは limitedLogin これらのトークンを処理する必要があります。

設定は無視されます。 2 つのトークンタイプ iOS ユーザーは App Tracking Transparency の選択に応じてアクセストークンまたは JWT トークンを受け取ることができますが、Android ユーザーは常にアクセストークンを受け取ります。

プラットフォームごとのトークンタイプ

プラットフォーム	制限付きログイン設定	ユーザー ATT の選択	結果のトークンタイプ
iOS	true	どれでも	JWT トークン
iOS	false	トラッキングを許可する	アクセストークン
iOS	false	トラッキングを拒否する	JWT トークン (自動オーバーライド)
Android	任意	N/A	アクセストークン (常に)

バックエンド実装

1. トークンのタイプを検出して対応する

   async function loginWithFacebook() {
     try {
       const loginResult = await SocialLogin.login({
         provider: 'facebook',
         options: {
           permissions: ['email', 'public_profile'],
           limitedLogin: false // iOS: depends on ATT, Android: ignored
         }
       });
   
       if (loginResult.accessToken) {
         // Access token (Android always, iOS when tracking allowed)
         return handleAccessToken(loginResult.accessToken.token);
       } else if (loginResult.idToken) {
         // JWT token (iOS only when tracking denied or limitedLogin: true)
         return handleJWTToken(loginResult.idToken);
       }
     } catch (error) {
       console.error('Facebook login error:', error);
     }
   }

2. Firebase統合の例

   import { OAuthProvider, FacebookAuthProvider, signInWithCredential } from 'firebase/auth';
   
   async function handleAccessToken(accessToken: string, nonce: string) {
     // For access tokens, use OAuthProvider (new method)
     const fbOAuth = new OAuthProvider("facebook.com");
     const credential = fbOAuth.credential({
       idToken: accessToken,
       rawNonce: nonce
     });
   
     try {
       const userResponse = await signInWithCredential(auth, credential);
       return userResponse;
     } catch (error) {
       console.error('Firebase OAuth error:', error);
       return false;
     }
   }
   
   async function handleJWTToken(jwtToken: string) {
     // For JWT tokens, send to your backend for validation
     try {
       const response = await fetch('/api/auth/facebook-jwt', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({ jwtToken })
       });
   
       const result = await response.json();
       return result;
     } catch (error) {
       console.error('JWT validation error:', error);
       return false;
     }
   }

3. バックエンドのJWT検証

   // Backend: Validate JWT token from Facebook
   import jwt from 'jsonwebtoken';
   import { Request, Response } from 'express';
   
   app.post('/api/auth/facebook-jwt', async (req: Request, res: Response) => {
     const { jwtToken } = req.body;
   
     try {
       // Verify JWT token with Facebook's public key
       // See: https://developers.facebook.com/docs/facebook-login/limited-login/token/validating/#standard-claims
       const decoded = jwt.verify(jwtToken, getFacebookPublicKey(), {
         algorithms: ['RS256'],
         audience: process.env.FACEBOOK_APP_ID,
         issuer: 'https://www.facebook.com' // From: https://www.facebook.com/.well-known/openid-configuration/?_rdr
       });
   
       // Extract user info from JWT
       const userInfo = {
         id: decoded.sub,
         email: decoded.email,
         name: decoded.name,
         isJWTAuth: true
       };
   
       // Create your app's session/token
       const sessionToken = createUserSession(userInfo);
   
       res.json({
         success: true,
         token: sessionToken,
         user: userInfo
       });
     } catch (error) {
       console.error('JWT validation failed:', error);
       res.status(401).json({ success: false, error: 'Invalid token' });
     }
   });

4. 汎用バックエンドトークンハンドラー

   // Handle both token types in your backend
   async function authenticateFacebookUser(tokenData: any) {
     if (tokenData.accessToken) {
       // Handle access token - validate with Facebook Graph API
       const response = await fetch(`https://graph.facebook.com/me?access_token=${tokenData.accessToken}&fields=id,name,email`);
       const userInfo = await response.json();
   
       return {
         user: userInfo,
         tokenType: 'access_token',
         expiresIn: tokenData.expiresIn || 3600
       };
     } else if (tokenData.jwtToken) {
       // Handle JWT token - decode and validate
       // See: https://developers.facebook.com/docs/facebook-login/limited-login/token/validating/#standard-claims
       const decoded = jwt.verify(tokenData.jwtToken, getFacebookPublicKey());
   
       return {
         user: {
           id: decoded.sub,
           name: decoded.name,
           email: decoded.email
         },
         tokenType: 'jwt',
         expiresIn: decoded.exp - Math.floor(Date.now() / 1000)
       };
     } else {
       throw new Error('No valid token provided');
     }
   }

重要な考慮事項

危険

iOS専用の重要な理解:

• iOS: ユーザーのアプリトラッキングの選択肢がトークンのタイプを決定し、code の設定とは関係ありません (iOS の場合) limitedLogin: false)
• Android: 常にアクセストークンを受け取ります。 limitedLogin 設定
• Limited Login は iOS 限定です - Android はこの設定を完全に無視します

Access Token (Standard Login):

• ✅ Android: 常に利用可能 (iOS での制限は適用されません)
• ✅ iOS: ユーザーがアプリトラッキングを明示的に許可する場合のみ
• ✅ Can be used to access Facebook Graph API
• ✅ 長期の有効期限
• ✅ 利用可能なユーザー情報が多くなります
• ❌ iOS で使用されることが減っています ユーザーがトラッキングを拒否することが増えています

JWT トークン (iOS のみのプライバシー モード):

• ❌ Android: これは発生しません (サポートされていません)
• ✅ iOS: トラッキングが拒否されたり、または limitedLogin: true
• ✅ iOS ユーザーのプライバシー設定を尊重します
• ❌ 基本的なユーザー情報のみが含まれます
• ❌ 短い有効期限
• ❌ No access to Facebook Graph API
• ⚠️ iOS ユーザーの最も一般的なシナリオ

プラットフォーム固有の動作:

• iOS アプリ: アクセストークンとJWTトークン両方を処理する必要があります
• Android アプリ: アクセストークンを処理するだけで済みます
• クロスプラットフォーム アプリ: 両方のトークン処理方法を実装する必要があります

ヒント

iOS向けの基本機能:トークン管理の両方の方法を実装する必要があります。多くのiOS開発者は、常にアクセストークンを受け取ると信じており、アプリがトラッキングを拒否したユーザーに破損することがあります。

Webのセキュアコンテキスト要件 (Capacitor)

暗号化 API の制限事項

更新されたFacebookログインフローには、 Webの暗号化 API nonceの生成に使用されるため、 セキュアコンテキスト:

// This requires secure context (HTTPS or localhost)
async function sha256(message: string) {
  const msgBuffer = new TextEncoder().encode(message);
  const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer); // ❌ Fails in insecure context
  // ...
}

開発環境の問題

一般的な問題: ionic serve HTTP URLの問題はFacebookの認証を破壊します

環境	暗号化 API 利用可能	Facebookログインが正常に動作する
http://localhost:3000	✅ はい	✅ はい
http://127.0.0.1:3000	✅ はい	✅ はい
http://192.168.1.100:3000	❌ いいえ	❌ いいえ
https://any-domain.com	✅ はい	✅ はい

Capacitor 開発のためのソリューション

1. ローカルホストでWebテスト

   # Instead of ionic serve --host=0.0.0.0
   ionic serve --host=localhost

2. IonicでHTTPSを有効

   ionic serve --ssl

3. 実機でテスト

   # Capacitor apps run in secure context on devices
   ionic cap run ios
   ionic cap run android

4. 開発用の代替ノンス生成

   async function generateNonce() {
     if (typeof crypto !== 'undefined' && crypto.subtle) {
       // Secure context - use crypto.subtle
       return await sha256(Math.random().toString(36).substring(2, 10));
     } else {
       // Fallback for development (not secure for production)
       console.warn('Using fallback nonce - not secure for production');
       return btoa(Math.random().toString(36).substring(2, 10));
     }
   }

ファイアベースの統合注意

最近のファイアベースのドキュメントでは、Facebook認証にJWTトークンとノンスが必要であり、ログイン設定に関係なく、Facebook認証に必要です。このアプローチは、両方の limitedLogin: true かつ limitedLogin: false:

   // Both modes can return JWT tokens depending on user choice
   const loginResult = await SocialLogin.login({
     provider: 'facebook',
     options: {
       permissions: ['email', 'public_profile'],
       limitedLogin: false, // true = always JWT, false = depends on user tracking choice
       nonce: nonce
     }
   });

開発の制限: ローカルホストでないネットワークIPを使用している場合、Facebookログインは暗号化 __CAPGO_KEEP_0__ 制限により失敗します。ローカルホストまたはHTTPSを使用してWebテストを行ってください。 ionic serve on a network IP (not localhost), Facebook login will fail due to crypto API restrictions. Use localhost or HTTPS for web testing.

ヒント

生産性の向上: Capacitor アプリケーションは、iOS/Androidでは常に安全なコンテキストで実行されるため、この制限はWeb開発環境のみに影響します。

トラブルシューティング

よくある問題と解決策

1. Androidにおけるキー ハッシュ エラー

   • Facebook ダッシュボードに正しいキー ハッシュを追加していることを確認してください
   • リリース ビルドの場合、デバッグ用とリリース用の両方のキー ハッシュを追加してください
   • 正しいキーストアを使用していることを確認してください

2. Facebook ログイン ボタンが表示されない

   • すべてのマニフェストエントリが正しいことを確認する
   • Facebook App ID と Client Token が正しいことを確認する
   • 適切に SDK を初期化していることを確認する

3. iOS の一般的な問題

   • すべての Info.plist エントリが正しいことを確認する
   • URL スキームが適切に設定されていることを確認する
   • Facebook ダッシュボードで登録されている bundle ID と一致していることを確認する

テスト

1. テストする前に、Facebook Developer Console でテストユーザーを追加する

   • ロール > テストユーザーに移動する
   • テストユーザーを作成する
   • テスト用のクレデンシャルを使用してください

2. デバッグとリリースの両方のビルドをテストしてください

   • デバッグ用のキー ハッシュを使用したデバッグ ビルド
   • リリース用のキー ハッシュを使用したリリース ビルド
   • エミュレータと物理デバイスの両方でテストしてください

ログインフローを完全にテストすることを忘れないでください、含む:

• 正常なログイン
• ログインのキャンセル
• エラー処理
• ログアウト機能

Facebook ログイン設定から続けてください

Facebookログインを使用している場合 Facebookログインの設定 認証とアカウントフローの計画を行うには、Facebookログインを接続します。 Capacitorを使用して、@capgo/capacitor-social-login Capacitorを使用して、@capgo/capacitor-social-login Capacitorを使用して、@capgo/capacitor-social-login Capacitorを使用して、@capgo/capacitor-passkey Capacitorを使用して、@capgo/capacitor-passkey Capacitorを使用して、@capgo/capacitor-native-biometric Capacitorを使用して、@capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and 認証とアカウントフローの計画を行うには、Facebookログインを接続します。 2要素認証の実装詳細について。