Facebook 로그인 설정

제목이 “소개”인 섹션

Capgo

• Facebook 개발자 계정
• __CAPGO_KEEP_0__
• Android용 키 해시를 생성하기 위해 터미널에 접근할 수 있어야 합니다.

일반 설정

이미 Facebook 앱이 생성되지 않은 경우 다음 단계를 따르세요.

1. Facebook 앱 만들기

   튜토리얼을 따라서 앱 만들기

2. Facebook 로그인 기능을 앱에 추가하세요.

   Facebook 개발자 센터에서 앱에 Facebook 로그인 제품을 추가하세요.

3. 앱을 일반 사용자에게 출시하기 전에 다음 단계를 따르세요. tutorial __CAPGO_KEEP_0__

중요한 정보

통합을 위해 필요한 정보를 찾으려면 여기를 클릭하세요.

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

안드로이드 설정

1. 인터넷 권한을 추가하세요. AndroidManifest.xml

   __CAPGO_KEEP_0__

   <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. 업데이트 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>

   주의

   위치에 키 해시를 교체하십시오 [APP_ID] __CAPGO_KEEP_0__에 실제 Facebook 앱 ID를 입력하세요. android:scheme 속성

iOS 설정

1. Facebook 개발자 콘솔에서 iOS 플랫폼을 추가하세요.

   1. Facebook 개발자에 있는 앱의 대시보드에 가세요.
   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] __CAPGO_KEEP_0__
   • [CLIENT-TOKEN] __CAPGO_KEEP_0__
   • [APP-NAME] __CAPGO_KEEP_0__

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 Tracking 설정에 따라 결정되며, code 설정에 따라 결정되지 않습니다. 모든 사용자에 대한 인증이 작동하도록 하려면 백엔드에서 항상 액세스 토큰과 JWT 토큰 처리를 implement하세요.

1. 앱에 Facebook 로그인을 초기화하세요

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

2. 로그인 함수를 implement하세요

   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: Limited Login 기능을 사용하려면 true로 설정하세요. 이 기능은 iOS에서만 사용할 수 있으며, 로그인 시 공유되는 데이터를 제한하여 개인 정보 보호를 강화합니다. limitedLogin 중요한 제한 사항:

   Limited Login (iOS Only)

   • iOS Only: iOS만 지원하며 Android에는 영향을 미치지 않습니다.
   • ATT Override: 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);
     }
   }

   __CAPGO_KEEP_0__에서 로그인한 사용자만 접근할 수 있습니다.

   • 데이터 접근 횟수를 줄였습니다.: 사용자 데이터가 일부 unavailable 할 수 있습니다.
   • 다양한 토큰 유형: 액세스 토큰은 다양한 기능을 가질 수 있습니다.
   • 개인정보 보호 준수iOS 개인 정보 보호 요구 사항을 충족하기 위해 도움이 됩니다.

   중요한 정보: 앱을 제한 로그인 및 전체 로그인 시나리오 모두에서 작동하는지 확인하기 위해 항상 앱을 테스트하세요. 제한 로그인에 대해 더 알아보세요 __CAPGO_KEEP_0__. 여기.

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에서 사용할 수 있는 모든 필드를 요청할 수 있습니다. 일반적인 필드는 다음과 같습니다. id, name, email, first_name, last_name, picture, birthday, gender, location, hometown. 일부 필드는 추가 권한이 필요할 수 있습니다.

   토큰 유형 제한: 사용자가 추적을 거부하거나 제한 로그인(JWT 토큰만)을 사용하는 경우, 이 호출은 실패합니다. 이 경우 초기 로그인 응답에서 제공된 프로필 데이터를 사용하세요. getProfile ⚠️ Backend 토큰 처리에 중요합니다. ⚠️ Critical: Backend Token Handling ⚠️ Critical: Backend Token Handling

⚠️ Critical: Backend Token Handling

위험

iOS의 비행 동작iOS에서만 로그인 및 앱 추적 투명성 (ATT) 제한이 iOS-ONLY 기능입니다. 안드로이드에서는 항상 설정에 관계없이 limitedLogin 접근 토큰을 받습니다.

iOS 토큰 동작:

• limitedLogin: true → iOS에서만 JWT 토큰을 항상 사용합니다.
• limitedLogin: false + 사용자가 추적 허용 → 액세스 토큰 사용
• limitedLogin: false + 사용자가 추적 거부 → JWT 토큰 (iOS는 자동으로 설정을 덮어씁니다)

Android Token 동작: 항상 접근 토큰 limitedLogin 설정은 무시됩니다.

당신의 백엔드가 두 가지 토큰 유형을 처리해야 합니다. iOS 사용자는 앱 추적 투명성 선택에 따라 접근 토큰 또는 JWT 토큰 중 하나를 받을 수 있기 때문입니다. 반면 Android 사용자는 항상 접근 토큰을 받습니다.

플랫폼별 토큰 유형

플랫폼	limitedLogin 설정	__CAPGO_KEEP_0__	__CAPGO_KEEP_1__
iOS	true	어떤	__CAPGO_KEEP_2__
iOS	false	사용자 정보 수집을 허용합니다.	__CAPGO_KEEP_3__
iOS	false	사용자 정보 수집을 거부합니다.	__CAPGO_KEEP_2__ (자동 오버라이드)
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. 파이어베이스 통합 예시

   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 설정과는 상관없이 limitedLogin: false)
• Android: 항상 접근 토큰을 받습니다. 사용자의 앱 추적 선택에 관계없이 limitedLogin 설정
• Limited Login은 iOS 전용입니다. - 안드로이드는 이 설정을 전혀 무시합니다.

로그인 토큰 (표준 로그인):

• ✅ 안드로이드: 항상 사용 가능 (iOS 전용 제한이 적용되지 않음)
• ✅ iOS: 사용자가 앱 추적 허용을 명시적으로 허용할 때만
• ✅ Can be used to access Facebook Graph API
• ✅ 더 긴 유효 기간
• ✅ 사용자 데이터가 더 많습니다.
• ❌ iOS에서 점점 더 드물게 사용되는 경우 사용자들이 점점 더 트래킹 거부를 한다

JWT 토큰 (iOS 전용 개인 정보 보호 모드):

• ❌ 안드로이드: 사용되지 않습니다 (지원되지 않음)
• ✅ iOS: 추적 거부되거나 limitedLogin: true
• ✅ iOS 사용자 개인 정보 보호 설정을 존중합니다
• ❌ 기본 사용자 정보만 포함합니다
• ❌ 더 짧은 유효 기간
• ❌ Facebook Graph에 접근할 수 없습니다 API
• ⚠️ iOS 사용자에게 가장 일반적인 시나리오입니다

플랫폼별 동작:

• iOS 앱: 액세스 토큰 및 JWT 토큰 모두 처리해야 함
• 안드로이드 앱: 액세스 토큰만 처리해야 합니다.
• 플랫폼 간 앱: 두 가지 토큰 처리 방법 모두 implement해야 합니다.

팁

iOS에서 필수: 사용자가 추적 거부할 경우 앱이 실패하는 것을 방지하기 위해, 항상 액세스 토큰을 받을 것으로 가정하는 iOS 개발자들이 많습니다.

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 인증을 깨트린다

환경	Crypto API 사용 가능	Facebook 로그인 작동
http://localhost:3000	✅ Yes	✅ Yes
http://127.0.0.1:3000	✅ Yes	✅ Yes
http://192.168.1.100:3000	❌ No	❌ No
https://any-domain.com	✅ Yes	✅ Yes

Capacitor 개발을 위한 솔루션

1. localhost를 사용하여 웹 테스트

   # Instead of ionic serve --host=0.0.0.0
   ionic serve --host=localhost

2. 아이오닉에서 HTTPS를 활성화하세요

   ionic serve --ssl

3. 실제 장치에서 테스트

   # Capacitor apps run in secure context on devices
   ionic cap run ios
   ionic cap run android

4. 개발용으로 대안 nonce 생성

   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 토큰에 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
     }
   });

개발 제한: 로컬 호스트가 아닌 네트워크 IP (localhost)에서 사용하는 경우, Facebook 로그인은 암호화 __CAPGO_KEEP_0__ 제한으로 인해 실패합니다. 로컬 호스트 또는 HTTPS를 사용하여 웹 테스트를 진행하세요. ionic serve on a network IP (not localhost), Facebook login will fail due to crypto API restrictions. Use localhost or HTTPS for web testing.

운영 환경 안전

: __CAPGO_KEEP_0__ 앱은 iOS/Android에서 항상 안전한 컨텍스트에서 실행되므로, 이 제한은 웹 개발 환경만 영향을 받습니다.: Capacitor apps on iOS/Android always run in secure contexts, so this limitation only affects web development environments.

제목이 "문제 해결"인 섹션

Common Issues and Solutions

1. Android에서 키 해시 오류

   • Facebook 대시보드에 올바른 키 해시를 추가했는지 다시 확인하세요
   • 릴리즈 빌드의 경우, 디버그 키 해시와 릴리즈 키 해시 모두 추가했는지 확인하세요
   • 해시를 생성할 때 올바른 키 스토어를 사용하고 있는지 확인하세요

2. Facebook 로그인 버튼이 나타나지 않는다

   • 모든 매니페스트 항목이 올바른지 확인하세요
   • Facebook App ID와 Client Token이 올바른지 확인하세요
   • SDK를 올바르게 초기화했는지 확인하세요

3. iOS에서 일반적인 문제

   • Info.plist 항목이 올바른지 확인하세요
   • URL 스키마가 올바르게 구성되었는지 확인하세요
   • Facebook 대시보드에 등록된 번들 ID와 일치하는지 확인하세요.

테스트

1. 테스트하기 전에 Facebook 개발자 콘솔에서 테스트 사용자를 추가하세요.

   • 역할 > 테스트 사용자로 이동하세요.
   • 테스트 사용자 생성
   • 테스트에 사용할 자격증명을 사용하세요.

2. 디버그 빌드와 릴리즈 빌드 모두 테스트하세요.

   • 디버그 키 해시를 사용하는 디버그 빌드
   • 릴리즈 키 해시를 사용하는 릴리즈 빌드
   • 에뮬레이터와 물리적 장치 모두에서 테스트하세요.

로그인 흐름의 전체를 테스트하세요, 포함하여:

• 로그인 성공
• 로그인 취소
• 오류 처리
• 로그아웃 기능

페이스북 로그인 설정에서 계속

페이스북 로그인 설정을 사용 중이시면 페이스북 로그인 설정 인증 및 계정 흐름을 계획하고 연결하려면 native capability을 사용하기 위해 @capgo/capacitor-social-login Using @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, 및 두 단계 인증 구현 세부 정보는 두 단계 인증 에서 찾을 수 있습니다.