Facebook Login のセットアップ

はじめに

このガイドでは、Capgo Social Login を使用して Facebook Login を設定する方法を学びます。以下のものが必要です：

• Facebook 開発者アカウント
• アプリのパッケージ名 / Bundle ID
• キーハッシュの生成に使用するターミナルへのアクセス（Android）

セットアップ全般

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

1. Facebook アプリを作成する

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

2. アプリに Facebook Login を追加する

   Facebook Developer Dashboard で、アプリに Facebook Login プロダクトを追加してください

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

重要な情報

統合に必要な主要な情報は、以下から確認できます:

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Facebook Business Login

このプラグインは、ビジネス向けの機能や権限を利用するためのFacebook Business Loginをサポートしています。ビジネスアカウントでは、標準的なコンシューマーログインに加え、InstagramやPagesの管理を含む追加の権限をリクエストできます。

サポートされているビジネス権限は以下の通りです：

• instagram_basic - Instagram Basic Display API へのアクセス
• instagram_manage_insights - Instagram Insightsへのアクセス
• pages_show_list - 管理しているPagesの一覧
• pages_read_engagement - Pagesのエンゲージメントデータの読み取り
• pages_manage_posts - Pagesの投稿管理
• business_management - ビジネスアセットの管理

詳細については、 Facebook 権限リファレンス 権限の全リストはこちら。

設定要件:

1. Facebook アプリは、Facebook Developer Console でビジネスアプリとして設定する必要があります。
2. ビジネス権限は、本番環境で使用する前に Facebook アプリレビューが必要になる場合があります。
3. アプリは、Facebook のビジネスユースケースポリシーに準拠する必要があります。

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}'],
  },
});

重要な注意事項:

• App Reviewの前に、テストユーザーと開発用アプリでビジネス権限をテストできます。
• ほとんどのビジネス権限は、本番環境で使用する前にFacebook App Reviewが必要です。
• Business APIはレート制限が異なります。リリース前にFacebookの最新のプラットフォームドキュメントを確認してください。
• 最初のアップデートを送信するには、 Facebook Business連携ガイド アプリの設定時。

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

   注意

   リリースビルドでは、リリース用のkeystoreを使用する必要があります：

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

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

   1. Facebook Developersでアプリのダッシュボードを開きます
   2. Settings > Basic に進みます
   3. 「Android」セクションまでスクロールします
   4. Androidが未追加の場合は「Add Platform」をクリックして詳細を入力します
   5. 生成したキーハッシュを追加します
   6. 本番環境では、debugとreleaseの両方のキーハッシュを追加してください

4. 以下のファイルを更新して、 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>

   注意

   必ず置き換えてください [APP_ID] 実際の Facebook アプリ ID を android:scheme 属性

iOSのセットアップ

1. Facebook Developer Console に iOS プラットフォームを追加

   1. Facebook Developersでアプリのダッシュボードを開きます
   2. Settings > Basic に進みます
   3. ページの最下部までスクロールし、「Add Platform」をクリック
   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. 次を変更します： 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 Loginを使用する

注意

始める前に: 新しい Facebook SDK では、受け取るトークンの種類は code の設定ではなく、ユーザーの App Tracking の選択に完全に依存することに注意してください。すべてのユーザーで認証が正常に機能するように、バックエンドでは常に access token と JWT token の両方の処理を実装してください。

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
     }
   }

   注意

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

   重要な制限事項:

   • iOSのみ: Limited LoginはiOSデバイスにのみ影響し、Androidには影響しません
   • ATTのオーバーライド: たとえ設定しても limitedLogin: false、Facebookは自動的にそれを true に強制します（ユーザーがApp Tracking Transparency (ATT) の許可を与えていない場合）
   • 常に両方のケースに対応する: アプリは常に、Limited LoginとFull Loginの両方のシナリオを処理できるようにしておく必要があります

   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'

   access_tokenを優先する場合の推奨実装:

   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);
     }
   }

   Limited Login で何が起きるか:

   • データアクセスの制限: 一部のユーザーデータが利用できない場合があります
   • トークンタイプの違い: アクセストークンの機能が異なる場合があります
   • プライバシーコンプライアンス: iOS のプライバシー要件への準拠を支援します

   重要: アプリが両方のケースで正しく動作することを確認するため、Limited Login とフルログインの両方のシナリオで必ずテストしてください。Limited Login について詳しくはこちら こちら.

3. ユーザープロファイルデータの取得

   ログインに成功すると、追加のプロフィール情報を取得できます：

   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);
       }
     }
   }

   ヒント

   取得可能なプロフィールフィールド：Facebook Graph API で利用可能な任意のフィールドをリクエストできます。一般的なフィールドは次のとおりです： id, name, email, first_name, last_name, picture, birthday, gender, location, hometown。なお、一部のフィールドには追加の権限が必要な場合があります。

   トークンタイプの制限： getProfile の呼び出しは、 アクセストークン （トラッキングが許可された標準ログイン）がある場合にのみ機能します。ユーザーがトラッキングを拒否した場合や、限定ログイン（JWTトークンのみ）を使用している場合は、この呼び出しは失敗します。その場合は、初回ログインのレスポンスに含まれるプロフィールデータを使用してください。

⚠️ 重要: バックエンドでのトークン処理

危険

iOS の重要な動作: Limited Login と App Tracking Transparency (ATT) は iOS 専用 の機能です。Android では、 limitedLogin 設定で変更できます。

iOS のトークン動作:

• limitedLogin: true → 常に JWT トークン (iOS のみ)
• limitedLogin: false + ユーザーがトラッキングを許可した場合 → アクセストークン
• limitedLogin: false + ユーザーがトラッキングを拒否 → JWTトークン（iOSでは設定が自動的に上書きされます）

Androidでのトークンの挙動: 常にアクセストークンが返され、 limitedLogin 設定は無視されます。

バックエンドで 2種類の異なるトークンを 処理する必要があります。iOSユーザーはApp Tracking Transparencyの選択に応じてアクセストークンまたはJWTトークンのいずれかを受け取る一方、Androidユーザーは常にアクセストークンを受け取るためです。

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

プラットフォーム	limitedLogin 設定	ユーザーの ATT 選択	結果のトークンタイプ
iOSと	true	すべて	JWT トークン
iOSと	false	トラッキングを許可	アクセストークン
iOSと	false	トラッキングを拒否	JWT トークン (自動上書き)
Androidでは	すべて	該当なし	アクセストークン（常に）

バックエンドの実装

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と：トークンの種類はユーザーのApp Trackingの選択で決まり、codeの設定では決まりません（たとえ limitedLogin: false)
• Androidでは：設定に関わらず、常にアクセストークンを受け取ります limitedLogin 設定
• Limited LoginはiOS限定です - Androidではこの設定は完全に無視されます

アクセストークン（標準ログイン）:

• ✅ Androidでは: 常に利用可能 (iOS限定の制限は適用されません)
• ✅ iOSと: ユーザーがアプリのトラッキングを明示的に許可した場合のみ
• ✅ Facebook Graph APIへのアクセスに使用可能
• ✅ 有効期限が長い
• ✅ より多くのユーザーデータを利用可能
• ❌ iOSでは利用が減少傾向にあります トラッキングを拒否するユーザーが増えているため

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

• ❌ Androidでは: 発生しません (非対応)
• ✅ iOSと: トラッキングが拒否された場合、または limitedLogin: true
• ✅ iOSユーザーのプライバシー設定を尊重
• ❌ 基本的なユーザー情報のみを含む
• ❌ 有効期限が短い
• ❌ Facebook Graph API へのアクセス不可
• ⚠️ 現在、iOSユーザーにとって最も一般的なシナリオ

プラットフォームごとの挙動:

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

ヒント

iOS に必須：両方のトークン処理方法を実装する必要があります。多くの iOS 開発者はアクセストークンを常に取得できると想定しており、ユーザーがトラッキングを拒否した際にアプリがクラッシュします。

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

Crypto API の制限事項

更新されたFacebookログインフローには Web Crypto 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
  // ...
}

開発環境の問題

HTTP URLでの一般的な問題: ionic serve Facebook認証が壊れる

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

Capacitor 開発の解決策

1. Web テストに localhost を使用

   # 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. 開発用の代替nonce生成方法

   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));
     }
   }

Firebase連携に関する注意点

最近の Firebase ドキュメントでは、ログイン設定に関係なく、Facebook 認証には nonce を含む JWT トークンが必要です。このアプローチは、両方の 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
     }
   });

開発時の制約： もし ionic serve ネットワーク IP（localhost 以外）で使用している場合、crypto API の制限により Facebook ログインが失敗します。Web テストには localhost または HTTPS を使用してください。

ヒント

本番環境の安全性：iOS/Android の Capacitor アプリは常にセキュアコンテキストで実行されるため、この制限は Web 開発環境にのみ影響します。

トラブルシューティング

よくある問題と解決策

1. AndroidでのKey hashエラー

   • Facebookダッシュボードに正しいkey hashが追加されているか再確認してください
   • リリースビルドの場合は、debugとrelease両方のkey hashを追加しているか確認してください
   • hash生成時に正しいkeystoreを使用しているか確認してください

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

   • manifestのエントリがすべて正しいか確認してください
   • Facebook App IDとClient Tokenが正しいか確認してください
   • SDKが正しく初期化されているか確認してください

3. iOSでよくある問題

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

テスト

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

   • Roles > Test Usersに移動
   • テストユーザーを作成
   • テストにはこれらの認証情報を使用

2. DebugビルドとReleaseビルドの両方をテスト

   • debugキーハッシュを使ったDebugビルド
   • releaseキーハッシュを使ったReleaseビルド
   • エミュレーターと実機の両方でテスト

ログインフロー全体を、以下を含めてテストするのを忘れないでください：

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

Facebook Login のセットアップから続ける

使用している場合 Facebook Login のセットアップ 認証とアカウントフローを計画するには、これを次と連携させてください @capgo/capacitor-social-login の使用 「@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要素認証 二要素認証の実装の詳細については。