Facebookログイン設定

導入

In this guide, you will learn how to setup Facebook Login with Capgo Social Login. You will need the following:

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

一般設定

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

1. Facebookアプリの作成

   チュートリアルに従って Facebookアプリの作成

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

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

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

重要な情報

ここでは、統合に必要な重要な情報を探すことができます。

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Facebook Business Login

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

サポートされているビジネス権限には次のものがあります:

• instagram_basic - Instagram Basic Displayへのアクセス API
• instagram_manage_insights - インスタグラムのインサイトへのアクセス
• pages_show_list - 人が管理しているページのリスト
• pages_read_engagement - ページからエンゲージメントデータを読み取る
• pages_manage_posts - ページの投稿を管理する
• business_management - ビジネス資産を管理する

詳細な許可リストは Facebook のパーミッション リファレンス を参照してください。

設定要件:

1. Facebook Developer ConsoleでFacebookアプリをビジネスアプリとして設定する必要があります。
2. ビジネス許可は、生産環境での使用前にFacebook App Reviewの承認が必要になる場合があります。
3. アプリはFacebookのビジネス用途ポリシーに準拠する必要があります。

Facebook

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 Integration Guide
• Follow the Facebook ビジネス統合ガイド アプリを設定する際に。

Androidの設定

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

   この行が含まれていることを確認してください:

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

2. コンテキスト: Capgoのマーケティングサイト。役割: UIラベル。表示場所: page agents/[slug].astro。メッセージキー `agents_page_copy_label` (Agents Page Copy Label)。

   Androidのキーホルダハッシュを生成

   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が追加されていない場合は、「プラットフォームを追加」をクリックし、詳細を入力する
   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>

   注意

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

「iOSの設定」

1. Facebook Developersのアプリダッシュボードに移動

   1. 設定 > 基本設定
   2. Facebook Developersの設定 > 基本設定
   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. 変更する 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 限定): Set limitedLogin 重要な制限:

   iOS 限定

   • iOS OnlyATT オーバーライド
   • : 有効にすると、Facebook は自動的に を強制します。ユーザーがアプリ トラッキング トランスパレNCY (ATT) の許可を与えていない場合 limitedLogin: false両方のケースを常に処理する true 重要な制限:
   • iOS 限定:バータートに当前を上为しています。バータートに当前を上为しています。

   エアシュニイコを読んにため

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

   バータートを安了んわた

   • バータートを安了んわたバータートを安了んわた
   • バータートを安了んわたバータートを安了んわた
   • バータートを安了んわたバータートを安了んわた

   重要: Facebookのログイン機能をテストする際は、制限付きログインとフルログインの両方のシナリオを検証して、両方のケースでアプリが正しく動作することを確認する必要があります。制限付きログインについてはこちらを参照してください。 ここ.

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のグラフAPIから取得できるフィールドを要求できます。API。一般的なフィールドは次のとおりです。 id, name, email, first_name, last_name, picture, birthday, gender, location, hometown. ただし、制限付きフィールドは追加の許可が必要になる場合があります。

   トークンタイプの制限: The getProfile 呼び出しは、トラッキングが許可されている標準ログインの場合にのみ機能します。ユーザーがトラッキングを拒否した場合や、JWTトークンのみを使用する場合、この呼び出しは失敗します。その場合、初回ログイン応答で提供されたプロファイルデータを使用してください。 ⚠️ Critical: Backend Token Handling 「⚠️ Critical: Backend Token Handling」

Danger

Danger

iOS-ONLYAndroidの場合、トラッキングが許可されているかどうかに関係なく、常にアクセストークンを受け取ります。 access token limited login (JWT token only) limitedLogin 設定。

iOS トークン動作:

• limitedLogin: true → iOS では常に JWT トークン
• limitedLogin: false ＋ユーザーがトラッキングを許可 → アクセストークン
• limitedLogin: false ＋ユーザーがトラッキングを拒否 → iOS では自動的に設定を上書きする JWT トークン

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

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

プラットフォームごとのトークン種類

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

バックエンド実装

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: iOS の制限が適用されない limitedLogin setting
• : 常に利用可能 (iOS の制限が適用されない) : iOS

: ユーザーがアプリのトラッキングを明示的に許可した場合のみ:

• ✅ Android: Facebook Graph __CAPGO_KEEP_0__ にアクセスするために使用できます
• ✅ iOSpagePath
• ✅ Can be used to access Facebook Graph API
• ✅ 長期の有効期限
• ✅ 利用者のデータが多く利用可能
• ❌ iOS上では減少中 ユーザーがトラッキングを拒否することが増えているため

iOS-Only プライバシーモード用のJWTトークン:

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

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

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

ヒント

iOS に必須です: iOS 開発者は常にアクセストークンを取得できることを前提としているため、ユーザーがトラッキングを拒否した場合にアプリが機能しなくなることを理解する必要があります。

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

暗号化 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の認証が機能しません

環境	暗号化 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ログインのための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
     }
   });

開発環境の制限開発環境の制限 ionic serve ネットワークIP（ローカルホストではない）で実行すると、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ログインセットアップから続けてください

Capacitorを使用している場合 Facebook ログイン設定 認証とアカウントフローの計画と設定を行うには、 @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric for the capgo implementation detail in capacitor-native-biometric, and 2要素認証 Two-factor authentication