Facebookログインセットアップ

導入

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

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

一般設定

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

1. Facebookアプリを作成する

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

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

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

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

重要な情報

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

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 Permissions Reference を参照してください。

設定要件:

1. Facebook Developer Console で Facebook アプリをビジネス アプリとして設定する必要があります。
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}'],
  },
});

重要な注意事項:

• ビジネス用途のテストユーザーと開発用アプリを使用して、ビジネスパーミッションをテストできます。
• ほとんどのビジネスパーミッションは、生産用途での使用前にFacebook App Reviewが必要です。
• ビジネスAPIには異なるレート制限があります。リリース前にFacebookの現在のプラットフォームドキュメントを確認してください。
• Facebookの 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. まだAndroidが追加されていない場合は、「プラットフォームを追加」ボタンをクリックし、詳細を入力する
   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. Facebook Developers
   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では、ユーザーの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 限定ログイン (iOS 限定)を true に設定すると、Facebook の Limited Login 機能を使用できます。この機能は iOS 限定で、ログイン時に共有されるデータを制限することでプライバシーを強化します。 limitedLogin 重要な制限事項:

   iOS 限定

   • : iOS 限定の Limited Login は iOS デバイスにのみ影響し、Android に影響しません。ATT オーバーライド
   • : にもかかわらず、Facebook はユーザーが App Tracking Transparency (ATT) の許可を与えていない場合に自動的にを強制します。を true に設定すると、Facebook の Limited Login 機能を使用できます。この機能は iOS 限定で、ログイン時に共有されるデータを制限することでプライバシーを強化します。 limitedLogin: false重要な制限事項: true iOS 限定の Limited Login は iOS デバイスにのみ影響し、Android に影響しません。
   • 両方のケースを常に処理する: アプリケーションは、制限されたログインとフルログインの両方のシナリオに対して常に準備されている必要があります

   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 → iOS では常に JWT トークン
• limitedLogin: false → アクセストークン → JWT トークン (iOS は自動的に設定を上書きします)
• limitedLogin: false Android のトークン動作 : 常にアクセストークン、

設定は無視されます。あなたのバックエンドは limitedLogin protectedTokens

pagePath 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 はこの設定を完全に無視します

アクセストークン (標準ログイン):

• ✅ Android: 常に利用可能 (iOS の制限は適用されません)
• ✅ iOS: ユーザーがアプリトラッキングを明示的に許可する場合のみ
• ✅ Facebook Graph API にアクセスすることができます
• ✅ 長期の有効期限
• ✅ 利用可能なユーザー情報が多くなります
• ❌ iOS で iOS のユーザーがトラッキングを拒否することが増えているため、使用されなくなっています as users increasingly deny tracking

JWT Token (iOS-Only Privacy Mode):

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

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

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

ヒント

iOS用は必須: Facebookログインの更新されたフローでは、トークン取得を拒否したユーザーに対応するために、両方のトークン処理方法を実装する必要があります。多くの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トークンと非同期を必要とします。どのログイン設定でも機能します。 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 App ID と Client Token が正しいことを確認する
   • 適切に SDK を初期化していることを確認する

3. iOS の一般的な問題

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

テスト

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

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

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

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

ログインフロー全体をテストしてください。次の点を含めてください。

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

Facebookログインセットアップから続けてください

Facebookログインセットアップ Facebookログインセットアップ Facebookログインセットアップ Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication 2要素認証の実装詳細について。