Facebookログインセットアップ

導入

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

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

一般設定

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

1. Facebookアプリを作成

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

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

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

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

重要な情報

ここでは、統合に必要な重要な情報をご覧いただけます。

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Androidのセットアップ

1. Add internet permission to your AndroidManifest.xml

   Ensure this line is present:

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

2. Androidのキーハッシュを生成してください

   This is a crucial security step required by Facebook. Open your terminal and run:

   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. Facebook Developersのアプリの設定 > 基本設定
   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] iOSセットアップ android:scheme セクションのタイトルは「iOSセットアップ」

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

1. iOSセットアップのセクションのタイトルは「iOSセットアップ」です。

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

Facebookログインをアプリに使用する

注意

開始する前に: Facebookの新しいSDKで、受け取るトークンのタイプは、ユーザーのアプリトラッキングの選択に依存し、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のみの限定ログイン設定 limitedLogin iOSのみの限定ログインを使用する場合は、trueに設定してください。このiOSのみの機能では、ログイン時に共有されるデータを制限することでプライバシーを強化します。

   重要な制限事項

   • iOSのみiOSのみの限定ログインはiOSデバイスにのみ影響し、Androidには影響しません
   • ATTオーバーライド設定 limitedLogin: falseFacebookでは、設定を変更した場合でも自動的に強制します true App Tracking Transparency (ATT) の許可が与えられていない場合
   • 常に両方のケースを処理する: アプリは常に、ログインが制限されたシナリオと完全なログインシナリオの両方に対応する必要があります

   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 プライバシー要件に準拠するのに役立ちます

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

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 で利用可能なフィールドを要求できます。一般的なフィールドには、以下が含まれます:API id, name, email, first_name, last_name, picture, birthday, gender, location, hometown. Note that some fields may require additional permissions.

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

危険

: リミテッドログインとアプリトラッキング透明性 (ATT) は

__CAPGO_KEEP_0____CAPGO_KEEP_0__ iOS-ONLY Androidでは、トラッキングを許可したり拒否したりする設定に関係なく、常にアクセストークンを受け取ります。 limitedLogin iOS Token Behavior

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

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

：常にアクセストークン、設定は無視されます。setting is ignored. limitedLogin __CAPGO_KEEP_0__

ファイコトにがだは、ファイコトできますだ。 ファイコトにがだは、ファイコトできますだ。 ファイコトにがだは、ファイコトできますだ。

ファイコトにがだは、ファイコトできますだ。

ファイコトにがだは、ファイコトできますだ。	ファイコト、ファイコトできますだ。	ファイコト、ファイコトできますだ。	ファイコト、ファイコトできますだ。
ファイコト、ファイコトできますだ。	true	ファイコト、ファイコトできますだ。	ファイコト、ファイコトできますだ。
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-Onlyの理解:

• iOSユーザーのAppトラッキングの選択がトークンタイプを決定します、codeの設定とは関係ありません (iOSとAndroidの両方で) limitedLogin: false)
• Android設定は関係ありません。常にアクセストークンを受け取ります limitedLogin 設定
• ログインがiOS-ONLYの場合のみ有効 - Androidはこの設定を完全に無視します

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

• ✅ Android常に利用可能です (iOSのみの制限は適用されません)
• ✅ iOS: __CAPGO_KEEP_0__はユーザーがアプリのトラッキングを明示的に許可する場合のみ
• ✅ Can be used to access Facebook Graph API
• ✅ iOSの期限切れ時間が長くなる
• ✅ ユーザーが提供するデータが増える
• ❌ iOS上では、ユーザーがトラッキングを拒否することが増えているため、iOS上ではこの機能が減りつつある JWT Token (iOS-Only Privacy Mode)

Android:

• ❌ : この機能はサポートされていないため、発生しないiOS
• ✅ : トラッキングが拒否された場合または✅ iOSのユーザープライバシー設定を尊重する limitedLogin: true
• ✅ iOSのユーザーがトラッキングを拒否した場合
• ❌ 基本ユーザー情報のみを含みます
• ❌ 有効期限が短い
• ❌ No access to Facebook Graph API
• ⚠️ iOS ユーザーの最も一般的なシナリオ

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

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

ヒント

iOS向けの基本機能: ユーザーがトラッキングを拒否した場合、トークン取得に依存しているiOS開発者が多く、実行時エラーが発生します。

Capacitor (Web)の安全なコンテキスト要件

API の制限

更新されたFacebookログインフローには、 API (Web)のWeb Crypto __CAPGO_KEEP_0__ (Web)のWeb Crypto セキュアなコンテキストのみで利用可能なため、:

// 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	❌ いいえ	❌ No
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
     }
   });

: ローカルホスト以外のネットワークIPで使用している場合、Facebookログインは暗号化 __CAPGO_KEEP_0__ 制限により失敗します。ローカルホストまたは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.

アドバイス

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

トラブルシューティング

一般的な問題と解決策

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

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

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

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

3. 一般的な iOS 問題

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

テスト

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

   • ロール > テスト ユーザーに移動する
   • __CAPGO_KEEP_0__をテストユーザーとして作成
   • テスト用にこれらのクレデンシャルを使用

2. デバッグとリリースの両方のビルドをテスト

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

ログインフロー全体をテストすることを忘れないでください、以下を含めて

• ログイン成功
• ログインキャンセル
• エラー処理
• ログアウト機能

Cloudflare、Capacitor、GitHub、Capgo、API、SDK、CLI、npm、bun などの保護されたトークンを含む

あなたが「Facebook ログイン設定」を使用している場合 Facebook ログイン設定 認証とアカウントフローの計画に使用し、 「@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」 「@capgo/capacitor-native-biometric」 2要素認証 __CAPGO_KEEP_0__の実装詳細について