Facebook Login Setup

導入

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

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

一般的なセットアップ

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

1. Facebook アプリを作成

   このチュートリアルを アプリを作成

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

   Facebook開発者ダッシュボードで、アプリにFacebookログイン製品を追加

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

重要な情報

ここでは、統合に必要なキーの情報を取得する場所が記載されています

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Facebook Businessログイン

このプラグインは、ビジネス関連の機能と権限のためのFacebook Businessログインをサポートしています。ビジネスアカウントは、標準の消費者ログインの範囲を超える追加の権限を要求できます。これには、Instagramとページの管理が含まれます。

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

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

Facebookの許可リストを参照してください。 Facebook Permissions Reference 全ての許可リストを参照してください。

設定の要件:

1. Facebook Developer Consoleでビジネスアプリとして設定されている必要があります。
2. ビジネス許可は、生産環境での使用前にFacebook App Reviewの承認が必要になる場合があります。
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の承認が必要です。
• ビジネスAPIには、異なるレート制限があります。リリース前に、Facebookの現在のプラットフォームドキュメントを確認してください。
• 「Facebook Business Integration Guide」を参照してください。 Facebook Business Integration Guide Android設定

Android設定

1. この行が存在することを確認してください: AndroidManifest.xml

   __CAPGO_KEEP_0__

   <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. Androidがまだ追加されていない場合は「Add Platform」をクリックし、詳細を入力
   5. 生成したキー ハッシュを追加
   6. リリース用とデバッグ用の両方のキー ハッシュをプロダクション用に追加

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を実際のIDに置き換えてください。 android:scheme 属性

iOSセットアップ

1. Facebook開発者コンソールでiOSプラットフォームを追加してください

   1. Facebook開発者向けのアプリのダッシュボードに移動してください
   2. 設定>基本設定
   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. 「Using Facebook Login in Your App」を変更する 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 を使用する場合、受け取るトークンタイプは、ユーザーの App トラッキング設定に依存します。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 限定ログイン: true に設定すると、Facebook の Limited Login 機能を使用できます。この機能は iOS 限定で、ログイン時に共有されるデータを制限することでプライバシーを向上させます。 limitedLogin 重要な制限:

   Important Limitations:

   • iOS Only: iOSのみに影響し、Androidには影響しません
   • ATT Override: ATT許可が得られていない場合でも、 limitedLogin: falseFacebookは自動的に true if the user hasn’t granted App Tracking Transparency (ATT) permission
   • Always Handle Both Cases: 両方のケースを考慮し、常に準備が整っているようにする

   Checking ATT Status:

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

   制限ログインの場合の何が起こるか:

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

   重要: 両方の制限ログインとフルログインのシナリオでアプリが正しく動作することを確認するために、常に両方のシナリオでアプリをテストしてください。制限ログインについての詳細はこちら ユーザープロファイルデータの取得.

3. ログインが成功した後、追加のプロファイル情報を取得できます

   __CAPGO_KEEP_0__

   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のグラフ API の中から任意のフィールドを要求できます。一般的なフィールドには、 id, name, email, first_name, last_name, picture, birthday, gender, location, hometown注意: 一部のフィールドは追加の権限が必要です。

   トークン種類制限: この呼び出しは、トラッキングが許可されている標準ログイン時にのみ機能します。ユーザーがトラッキングを拒否したり、JWTトークンのみを使用した場合、この呼び出しは失敗します。その場合、初期ログイン応答で提供されたプロファイルデータを使用してください。 getProfile ⚠️ Critical: バックエンドトークンハンドリング Copy to clipboard Tip

Available Profile Fields

危険

iOS の重大な動作: iOS では、ローカル ログインと App トラッキング透明性 (ATT) は iOS-ONLY 機能です。Android の場合、設定に関係なく、常にアクセストークンを受け取ります。 limitedLogin iOS のトークンベハビアー

→ iOS のみ JWT トークン:

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

Android トークン動作: 常にアクセストークン limitedLogin 設定は無視されます。

バックエンドは、 2 つの異なるトークンタイプを処理する必要があります。 iOS ユーザーは、App トラッキング透明性の選択に応じてアクセストークンまたは JWT トークンを受け取ることができます。

一方、Android ユーザーは常にアクセストークンを受け取ります。

セクション “プラットフォームごとのトークンタイプ”	プラットフォーム、制限されたログイン設定	User ATT Choice	結果トークンタイプ
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ユーザーのアプリトラッキングの選択肢がトークンタイプを決定します。codeの設定とは関係ありません ( limitedLogin: false)
• Android常にアクセストークンを受け取ります。 limitedLogin 設定
• 制限付きログインはiOS専用です - Androidはこの設定を完全に無視します

Access Token (Standard Login):

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

JWT Token (iOS-Only Privacy Mode):

• ❌ Android__CAPGO_KEEP_0__
• ✅ iOS__CAPGO_KEEP_0__ limitedLogin: true
• ✅ iOSユーザープライバシー設定を尊重します
• ❌ iOSユーザー情報の基本情報のみ
• ❌ iOSの有効期限が短くなります
• ❌ No access to Facebook Graph API
• ⚠️ iOSユーザーにとって最も一般的なシナリオです

iOSアプリ:

• __CAPGO_KEEP_0__iOSアプリケーション
• Androidアプリ:アクセストークンを取り扱う必要がある場合のみ対処する必要があります。
• クロスプラットフォームアプリ:両方のトークンハンドリング方法を実装する必要があります。

ヒント

iOS向け必須:ユーザーがトラッキングを拒否した場合にアプリが機能しなくなることを多くのiOS開発者が想定しているため、両方のトークンハンドリング方法を実装する必要があります。

Secure Context Requirements (Web/Capacitor)

Crypto API Limitations

The updated Facebook login flow requires the Web Crypto API for nonce generation, which is only available in secure contexts:

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

Development Environment Issues

Common Problem: ionic serve with HTTP URLs breaks Facebook authentication

Environment	Crypto API Available	Facebook Login Works
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));
     }
   }

Firebase統合注意事項

Firebaseの最近のドキュメントでは、Facebookの認証に使用するJWTトークンには、nonceが必要です。ログイン設定に関係なく、 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で ionic serve Facebookログインは暗号化の制限APIのため失敗します。ローカルホストまたはHTTPSでWebテストを実行してください。

ヒント

運用の安全性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 ログイン設定 認証とアカウントフローの計画に使用する場合、 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要素認証 に