내용으로 건너뛰기

페이스북 로그인 설정

GitHub

Introduction

인터뷰 섹션

이 가이드에서 Facebook 로그인을 Capgo Social Login과 함께 설정하는 방법을 배웁니다. 다음이 필요합니다:

  • Facebook 개발자 계정
  • 애플리케이션의 패키지 이름/번들 ID
  • Android용 키 해시를 생성하기 위한 터미널 접근 권한

일반 설정

일반 설정

Facebook 앱이 이미 존재하지 않는 경우, 다음 단계를 따르세요:

  1. Facebook 앱 만들기

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

  2. Facebook 로그인 추가

    Facebook 개발자 도구에서 Facebook 로그인 제품을 앱에 추가하세요

  3. 앱을 일반인에게 출시하기 전에, 이 튜토리얼을 따르세요 tutorial 게시를 위해 그것을

통합을 위해 필요한 키 정보를 찾으려면 여기에 있습니다.

  1. CLIENT_TOKEN:

    Facebook 개발자 도구에서 클라이언트 토큰을 찾는 화면
  2. APP_ID:

    Facebook 개발자 도구에서 앱 ID를 찾는 화면
  3. APP_NAME:

    Facebook 개발자 도구에서 앱 이름을 찾는 화면

Facebook 비즈니스 로그인

제목 ‘Facebook 비즈니스 로그인’

이 플러그인은 비즈니스 관련 기능 및 권한을 지원하는 Facebook 비즈니스 로그인을 지원합니다. 비즈니스 계정은 표준 소비자 로그인 외에 추가 권한을 요청할 수 있습니다. Instagram 및 페이지 관리도 포함됩니다.

지원되는 비즈니스 권한은 다음과 같습니다:

  • instagram_basic - Instagram 기본 표시 API
  • instagram_manage_insights - 인스타그램 통찰력에 접근
  • pages_show_list - 사용자가 관리하는 페이지 목록
  • pages_read_engagement - 페이지에서 읽어 들이는 참여 데이터
  • pages_manage_posts - 페이지에 게시물을 관리
  • business_management - 비즈니스 자산을 관리

- - 페이스북 권한 참조 - 전체 권한 목록을 참조하세요.

- 구성 요구 사항:

  1. - 페이스북 개발자 콘솔에서 페이스북 앱을 비즈니스 앱으로 구성해야 합니다.
  2. - 비즈니스 권한은 프로덕션 사용 전에 페이스북 앱 리뷰가 필요할 수 있습니다.
  3. - 앱은 페이스북의 비즈니스 사용 사례 정책을 준수해야 합니다.

인스타그램 기본 접근

인스타그램 기본 접근 섹션
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}'],
},
});

중요 참고 사항:

  • 사업자 권한을 테스트하려면 테스트 사용자와 개발 앱을 사용할 수 있습니다.
  • 대부분의 사업자 권한은 App Review를 거쳐야 프로덕션에서 사용할 수 있습니다.
  • 사업자 API는 다른 속도 제한을 가지고 있습니다. 제품 출시 전에 Facebook의 현재 플랫폼 문서를 검토하세요.
  • 다음 Facebook 비즈니스 통합 가이드 설정 중인 앱에 대해.

Android 설정

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

  3. 페이스북 앱에 키 해시 추가

    1. 페이스북 개발자에 가서 앱의 대시보드에
    2. 설정 > 기본
    3. Android 섹션으로 스크롤
    4. Android가 아직 추가되지 않은 경우 플랫폼 추가
    5. 세부 정보를 입력
    6. 생성한 키 해시 추가
  4. 업데이트 하세요 AndroidManifest.xml Facebook으로 로그인하기

    <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>
  1. Facebook 개발자 콘솔에서 앱의 대시보드로 이동하기

    1. Settings > Basic으로 이동하기
    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>
  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 로그인을 사용하는 방법
  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
    }
    }
  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 getProfile 페이스북 로그인 플러그인을 사용하려면 페이스북 개발자 계정에 앱을 등록해야 합니다. Facebook 소셜 로그인 플러그인 protectedTokens list 에 있는 단어는 변환하지 않습니다. access token 트래킹이 허용된 표준 로그인입니다. 사용자가 트래킹 거부하거나 제한 로그인(JWT 토큰만)을 사용하는 경우, 이 호출은 실패합니다. 그 경우, 초기 로그인 응답에서 제공된 프로필 데이터를 사용하세요.

⚠️ 중요: 백엔드 토큰 처리

Backend Token Handling

서버측에서 두 가지 토큰 타입을 처리해야 합니다. iOS Token Behavior iOS 사용자는 앱 추적성 투명성 선택에 따라 접근 토큰 또는 JWT 토큰을 받을 수 있습니다. 반면 안드로이드 사용자는 항상 접근 토큰을 받습니다.

플랫폼별 토큰 유형

플랫폼별 토큰 유형
플랫폼제한된 로그인 설정사용자 ATT 선택결과 토큰 유형
iOStrue어떤JWT 토큰
iOSfalse추적 허용액세스 토큰
iOSfalse추적 거부JWT 토큰 (자동 오버라이드)
안드로이드어떤Facebook액세스 토큰 (항상)

백엔드 구현

백엔드 구현
  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');
    }
    }

중요 고려 사항

중요 고려 사항 섹션

- Android는 이 설정을 완전히 무시합니다:

  • ✅ AndroidAccess Token (Standard Login)
  • ✅ iOSiOS
  • ✅ Can be used to access Facebook Graph API
  • ✅ 더 긴 유효 기간
  • ✅ 사용자 데이터가 더 많습니다.
  • ❌ iOS에서 점점 드문 경우 사용자가 추적 거부하는 경우

JWT 토큰 (iOS-Only 개인 정보 보호 모드):

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

플랫폼별 동작:

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

웹 보안 요구 사항 (Web/Capacitor)

웹 보안 요구 사항 (Web/Capacitor)

API 제한

API 제한

업데이트된 Facebook 로그인 흐름은 웹 API __CAPGO_KEEP_0__ 보안 컨텍스트:

// 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 개발을 위한 솔루션

Capacitor 개발을 위한 솔루션
  1. 로컬 호스트를 사용하여 웹 테스트

    터미널 창
    # 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. 개발용 비대면 인증

    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가 아닌)에서 ionic serve 을 사용하는 경우 Facebook 로그인은 암호화 API 제한으로 인해 실패합니다. localhost 또는 HTTPS를 사용하여 웹 테스트를 진행하세요.

  1. 제목 "일반적인 문제와 해결 방법"

    • Android에서 키 해시 오류
    • 정확한 키 해시를 Facebook 대시보드에 추가했는지 다시 확인하세요
    • 릴리즈 빌드의 경우 디버그 및 릴리즈 키 해시 모두를 추가하십시오
  2. 해시를 생성할 때 올바른 키 스토어를 사용하고 있는지 확인하십시오

    • Facebook 로그인 버튼이 나타나지 않습니다
    • Facebook App ID와 Client Token이 정확한지 확인하세요.
    • SDK를 올바르게 초기화했는지 확인하세요.
  3. iOS에서 발생하는 일반적인 문제

    • Info.plist 항목이 모두 정확한지 확인하세요.
    • URL schemes가 올바르게 구성되었는지 확인하세요.
    • Facebook 대시보드에 등록된 ID와 일치하는지 확인하세요.
  1. 테스트하기 전에 Facebook 개발자 콘솔에서 테스트 사용자를 추가하세요.

    • Roles > Test Users로 이동하세요.
    • 테스트 사용자를 생성하세요.
    • 이용자 정보를 테스트하기 위해 사용하세요.
  2. 테스트는 디버그 빌드와 릴리스 빌드 모두를 테스트합니다.

    • 디버그 빌드에 디버그 키 해시를 사용합니다.
    • 릴리스 빌드에 릴리스 키 해시를 사용합니다.
    • 안드로이드 에뮬레이터와 실제 장치 모두에서 테스트합니다.

로그인 흐름의 전체를 테스트하세요. 다음 항목을 포함합니다:

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

Facebook 로그인 설정에서 계속하세요.

Facebook 로그인 설정에서 계속하세요

Facebook 로그인 설정에서 계속하세요. 페이스북 로그인 설정 인증 및 계정 흐름을 계획하고 연결하려면 @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric for capgo capacitor-native-biometric 구현 세부 사항에 대해 두 단계 인증 Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login