Facebook Login Setup

導入

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

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

一般的なセットアップ

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

1. Facebook Appを作成

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

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

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

3. アプリを一般公開する前に、この チュートリアル を実行して、アプリを公開

重要な情報

ここでは、統合に必要な重要な情報を参照できます:

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

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

   Note

   For release builds, you’ll need to use your release keystore:

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

3. Add the key hash to your Facebook app

   1. Go to your app’s dashboard on Facebook Developers
   2. Navigate to Settings > Basic
   3. Scroll down to “Android” section
   4. Click “Add Platform” if Android isn’t added yet and fill in the details
   5. Add the key hash you generated
   6. For production, add both debug and release key hashes

4. Update your 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] 実際のFacebookアプリIDを android:scheme 属性

iOSセットアップ

1. Facebook開発者コンソールでiOSプラットフォームを追加

   1. Facebook Developersのアプリダッシュボードに移動
   2. Settings > 基本設定に移動してください
   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. Modify the 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)
           }
       }
   }

Using Facebook Login in Your App

Caution

Before You Start: Remember that with the new Facebook SDK, the token type you receive depends entirely on the user’s App Tracking choice, not on your code configuration. Always implement both access token and JWT token handling in your backend to ensure authentication works for all users.

1. Initialize the Facebook login in your app

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   // Initialize during app startup
   await SocialLogin.initialize({
     facebook: {
       appId: 'APP_ID',
       clientToken: 'CLIENT_TOKEN',
     }
   })

2. Implement the login function

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

   Note

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

   重要な制限事項:

   • iOSのみ限定ログインはiOSデバイスのみに影響し、Androidには影響しません
   • ATTオーバーライドFacebookに設定すると、ユーザーがApp Tracking Transparency (ATT)の許可を与えていない場合でも自動的に limitedLogin: falseに強制されます。 true if the user hasn’t granted App Tracking Transparency (ATT) permission
   • 常に両方のケースを処理するアプリは常に、ログインが制限されたシナリオと完全なログインシナリオの両方に対応しておくべきです

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

   制限ログインの場合の発生

   • データアクセスが制限されるユーザーデータが利用できない場合もある
   • トークンの種類が異なるアクセストークンには異なる機能が付与される場合もある
   • プライバシー規制遵守: 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 から任意のフィールドを要求できます。__CAPGO_KEEP_0__。一般的なフィールドには、以下が含まれます。: 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, hometownhere

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

危険

: App Tracking Transparency (ATT) と Limited Login は iOS-ONLY で機能します。

__CAPGO_KEEP_0____CAPGO_KEEP_0__ __CAPGO_KEEP_0__ 機能。Androidの場合、設定に関係なくアクセストークンを受け取ることが常にできます。 limitedLogin iOSのトークンベハビアー

→ iOSのみで常にJWTトークン:

• limitedLogin: true + ユーザーがトラッキングを許可する
• limitedLogin: false → アクセストークン + ユーザーがトラッキングを拒否する
• limitedLogin: false → iOSが自動的に設定を上書きし、JWTトークン Androidのトークンベハビアー

：常にアクセストークン、設定は無視されます。 limitedLogin バックエンドはトークンを処理する必要があります。

Your backend must handle 2 つのトークンタイプ iOS ユーザーは App Tracking Transparency の選択に応じてアクセストークンまたは JWT トークンを受け取ることができますが、Android ユーザーは常にアクセストークンを受け取ります。

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

プラットフォーム	制限ログイン設定	ユーザー ATT 選択	結果トークンタイプ
iOS	true	どれでも	JWT トークン
iOS	false	Allows tracking	アクセストークン
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: Always receives access tokens, regardless of limitedLogin 設定
• iOSのみの制限付きログイン - Androidはこの設定を完全に無視します

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

• ✅ Android: Always available (iOS-only restrictions don’t apply)
• ✅ iOSユーザーがアプリトラッキングを明示的に許可した場合のみ
• ✅ Facebook Graph API にアクセスできる
• ✅ 長期の有効期限
• ✅ 多くのユーザー情報が利用できる
• ❌ iOS で使用されることが減り ユーザーがトラッキングを拒否することが増えている

iOS のみのプライバシーモード:

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

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

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

ヒント

iOS用の基本機能:ユーザーがトラッキングを拒否した場合、トークンを取得できずにアプリが破損することを多くの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. localhostで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トークンと非同期を使用する必要があります。 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
     }
   });

開発制限開発環境でFacebookログインを使用している場合、ネットワークIP (localhostでない場合) では、Facebookログインが失敗します。 ionic serve API

アドバイス

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

トラブルシューティング

一般的な問題と解決策

1. Android 上のキー ハッシュ エラー

   • 正しいキー ハッシュを Facebook ダッシュボードに追加していることを確認してください
   • リリース ビルドの場合、デバッグ用とリリース用の両方のキー ハッシュを追加してください
   • 正しいキーストアを使用していることを確認して、ハッシュを生成してください

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

   • __CAPGO_KEEP_0__のすべてのマニフェストエントリが正しいことを確認
   • Facebook App IDとClient Tokenが正しいことを確認
   • SDKが適切に初期化されていることを確認

3. iOSの一般的な問題

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

テスト

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

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

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

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

以下のフルログインフローを含めて、テストしてください：

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

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

If you are using Facebook Login Setup to plan authentication and account flows, connect it with 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 __CAPGO_KEEP_0__の実装詳細については、Two-factor authenticationのページを参照してください。