Facebook ログインのセットアップ

導入

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

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

基本設定

Facebookアプリが既に存在しない場合は、以下の手順に従ってください。

1. Facebookアプリを作成する

   チュートリアルを参照してください アプリを作成する

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

   注意

   リリースビルドの場合、リリースキーストアを使用する必要があります:

   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>

   注意

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

iOSの設定

1. Facebook Developer Console に iOS プラットフォームを追加する

   1. Facebook Developers のアプリダッシュボードに移動する
   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. を変更する 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. __CAPGO_KEEP_0__を実装する

   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専用のLimited Login: trueに設定すると、FacebookのLimited Login機能を使用できます。この機能はiOS専用で、ログイン時に共有されるデータを制限することでプライバシーを強化します。 limitedLogin 重要な制限:

   iOS専用

   • : Limited LoginはiOSデバイスのみに影響し、Androidには影響しませんATTオーバーライド
   • iOSデバイスのみに影響し、Androidには影響しません: ATT の許可が得られていない場合でも設定します limitedLogin: false, Facebook は自動的に制限されたログインを強制します 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);
     }
   }

   What Happens in Limited Login:

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

   重要: アプリを正常に動作させるために、両方のシナリオ (制限ログインとフルログイン) でテストする必要があります。制限ログインについてはこちら ユーザープロファイルデータの取得.

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

   Tip

   利用可能なプロファイルフィールド: FacebookのグラフAPIから利用可能なフィールドを要求できます。一般的なフィールドには、 id, name, email, first_name, last_name, picture, birthday, gender, location, hometown注意: 一部のフィールドは追加の権限が必要です。

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

危険

注意: 一部のフィールドは追加の権限が必要です。

iOSの重大な動作: iOSでは、ログインとAppトラッキング透明性 (ATT) の制限が iOSのみ 機能です。Androidでは、設定に関係なく、常にアクセストークンを受け取ります。 limitedLogin iOSのトークン動作

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

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

→ 常にアクセストークン: iOSアクセストークンとJWTトークンを両方受け取る可能性があるため、iOSユーザーはアクセストークンまたはJWTトークンを受け取ることができますが、Androidユーザーは常にアクセストークンを受け取ります。 limitedLogin __CAPGO_KEEP_0__

iOSユーザーはアクセストークンまたはJWTトークンを受け取ることができますが、Androidユーザーは常にアクセストークンを受け取ります。 iOSユーザーはアクセストークンまたはJWTトークンを受け取ることができますが、Androidユーザーは常にアクセストークンを受け取ります。 iOSユーザーはアクセストークンまたはJWTトークンを受け取ることができますが、Androidユーザーは常にアクセストークンを受け取ります。

iOSユーザーはアクセストークンまたはJWTトークンを受け取ることができますが、Androidユーザーは常にアクセストークンを受け取ります。

iOSユーザーはアクセストークンまたはJWTトークンを受け取ることができますが、Androidユーザーは常にアクセストークンを受け取ります。	iOSユーザーはアクセストークンまたはJWTトークンを受け取ることができますが、Androidユーザーは常にアクセストークンを受け取ります。	iOSユーザーはアクセストークンまたはJWTトークンを受け取ることができますが、Androidユーザーは常にアクセストークンを受け取ります。	iOSユーザーはアクセストークンまたはJWTトークンを受け取ることができますが、Androidユーザーは常にアクセストークンを受け取ります。
iOSユーザーはアクセストークンまたはJWTトークンを受け取ることができますが、Androidユーザーは常にアクセストークンを受け取ります。	true	何でも	__CAPGO_KEEP_0__
iOS	false	トラッキングを許可する	__CAPGO_KEEP_0__
iOS	false	トラッキングを拒否する	__CAPGO_KEEP_0__ (自動オーバーライド)
Android	何でも	N/A	__CAPGO_KEEP_0__ (常に)

バックエンド実装

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トラッキングの選択肢がトークンタイプを決定します、codeの設定とは関係ありません (設定を変更しても) limitedLogin: false)
• Android: 常にアクセストークンを受け取ります、Appトラッキングの選択肢に関係なく limitedLogin 設定
• 制限付きログインはiOSのみ - Androidはこの設定を完全に無視します

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

• ✅ Android: iOS の制限が適用されないため、常に利用可能
• ✅ iOS: ユーザーがアプリのトラッキングを明示的に許可する場合にのみ発生
• ✅ Can be used to access Facebook Graph API
• ✅ iOS の期限切れ時間が長くなる
• ✅ ユーザーから得られるデータが増える
• ❌ iOS で iOS のトラッキング拒否率が増加するため、iOS で利用されることが減る Android

: iOS のプライバシー モードでは使用できないため、発生しない:

• ❌ iOS✅ Facebook Graph にアクセスできる__CAPGO_KEEP_0__
• ✅ ✅ iOS の期限切れ時間が長くなる: iOS のトラッキング拒否または limitedLogin: true
• ✅ iOS ユーザープライバシー設定を尊重
• ❌ 基本的なユーザー情報のみ
• ❌ 短い有効期限
• ❌ Facebook Graph にアクセスできません API
• ⚠️ iOS ユーザーの最も一般的なシナリオ

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

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

ヒント

iOS アプリでは必須です。iOS 開発者は常にアクセストークンを取得できることを前提にしており、ユーザーがトラッキングを拒否した場合にアプリが機能しなくなることが多いです。Web セキュア コンテキスト要件 (Web/__CAPGO_KEEP_0__)

「Web セキュア コンテキスト要件 (Web/Capacitor)」というセクション

「Crypto API の制限」というセクション

Web Crypto __CAPGO_KEEP_0__ Web Crypto API 両方のトークン処理方法を実装する必要があります。 安全なコンテキスト:

// 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ログインが機能します
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
     }
   });

__CAPGO_KEEP_0__: Facebookログインが機能しない場合、__CAPGO_KEEP_0__制限のため、ローカルホスト以外のネットワークIPで実行している場合です。ローカルホストまたはHTTPSでWebテストを実行してください。 ionic serve on a network IP (not localhost), Facebook login will fail due to crypto API restrictions. Use localhost or HTTPS for web testing.

Production Safety

: iOS/Androidの__CAPGO_KEEP_0__アプリは常に安全なコンテキストで実行されるため、この制限はWeb開発環境にのみ影響します。: Capacitor apps on iOS/Android always run in secure contexts, so this limitation only affects web development environments.

トラブルシューティング

Section titled “Common Issues and Solutions”

1. 正しいKey HashをFacebookダッシュボードに追加していることを確認してください。

   • Key hash errors on Android
   • リリースビルドの場合、デバッグとリリースの両方のキー ハッシュを追加してください
   • 正しいキーストアを使用していることを確認してください

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

   • すべてのmanifestエントリが正しいことを確認してください
   • Facebook App IDとClient Tokenが正しいことを確認してください
   • SDK を適切に初期化していることを確認してください

3. iOSの一般的な問題

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

テスト

1. テストする前に、Facebook Developer Consoleでテストユーザーを追加してください

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

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

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

成功したログイン、ログインのキャンセル、エラーハンドリングを含むフルログインフローをテストしてください

• __CAPGO_KEEP_0__
• __CAPGO_KEEP_0__
• __CAPGO_KEEP_0__
• ログアウト機能