Facebook Login のセットアップ

はじめに

このガイドでは、Capgo Social Login を使用して Facebook Login をセットアップする方法を説明します。以下の準備が必要です：

• Facebook Developer アカウント
• アプリのパッケージ名または Bundle ID
• キーハッシュ生成用のターミナルへのアクセス (Android)

全般的なセットアップ

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

1. Facebook Appの作成

   チュートリアルに従って、 Appを作成

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 Developer Console で、Facebook アプリを「ビジネス」アプリとして設定する必要があります。
2. ビジネス権限を使用する場合、本番環境での利用前に Facebook App Review が必要になる場合があります。
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}'],
  },
});

重要な注意事項:

• 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のドキュメントを参照してください。 こちら.

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における重要な挙動「限定ログイン」および「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
  // ...
}

開発環境の問題

よくある問題: ionic serve HTTP URL を使用すると Facebook 認証が失敗します

環境	Crypto API の利用可否	Facebook Login の動作確認
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 以外）を使用している場合、暗号化に関する 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 key hashを使用）
   • Releaseビルド（Release key hashを使用）
   • エミュレータと実機の両方でテストしてください

以下の項目を含む、ログインフロー全体のテストを忘れないでください：

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

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要素認証 二要素認証の実装の詳細については。