Facebook Login 설정
설치 단계와 이 플러그인에 대한 전체 마크다운 가이드가 포함된 설정 지시를 복사하세요.
소개
소개란 제목이 안내서에서 Facebook 로그인을 설정하는 방법을 배울 것입니다. Capgo Social Login을 사용하려면 다음이 필요합니다.
- Facebook 개발자 계정
- 앱의 패키지 이름/번들 ID
- Android를위한 키 해시를 생성하는 터미널에 접근할 수 있는 권한
In this guide, you will learn how to setup Facebook Login with __CAPGO_KEEP_0__ Social Login. You will need the following:
-
Facebook 앱 만들기
이 튜토리얼을 따라서 앱 만들기
-
Facebook 로그인 기능을 앱에 추가하기
Facebook 개발자 도구에서 Facebook 로그인 기능을 앱에 추가하세요
-
앱을 일반 사용자에게 공개하기 전에, 이 튜토리얼을 따라서 앱을 공개하세요
중요한 정보
중요한 정보앱 통합을 위해 필요한 중요한 정보를 찾으려면 여기를 클릭하세요.
-
CLIENT_TOKEN:
-
APP_ID:
-
APP_NAME:
기업용 로그인
기업용 로그인이 플러그인은 기업 관련 기능과 권한을 지원하는 Facebook Business Login을 지원합니다. 기업 계정은 표준 소비자 로그인보다 추가 권한을 요청할 수 있습니다. 이에는 Instagram 및 페이지 관리가 포함됩니다.
지원하는 기업 권한은 다음과 같습니다.
instagram_basic- Instagram Basic Display에 대한 접근 APIinstagram_manage_insights- Instagram Insights에 대한 접근pages_show_list- 사용자가 관리하는 페이지 목록pages_read_engagement- 페이지에서 데이터를 읽어 들이는 읽기pages_manage_posts- 페이지에 게시물을 관리하는business_management- 기업 자산 관리
See the Capgo website for more information. Facebook 권한 참조 전체 권한 목록을 확인하세요.
설정 요구 사항:
- __CAPGO_KEEP_0__의 Facebook 앱은 Facebook 개발자 콘솔에서 Business 앱으로 구성되어야 합니다.
- 제한된 권한은 Facebook App Review를 거쳐야만 실제 운영에 사용할 수 있습니다.
- Facebook의 Business Use Case 정책을 준수해야 하는 앱입니다.
인스타그램 기본 액세스
인스타그램 기본 접근 권한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}'], },});중요한 주의 사항:
- 앱 리뷰 전 테스트 사용자와 개발 앱을 통해 비즈니스 권한을 테스트할 수 있습니다.
- 프로덕션 사용 전 Facebook 앱 리뷰가 필요한 대부분의 비즈니스 권한이 있습니다.
- 비즈니스 API는 다른 속도 제한을 가지고 있습니다. Facebook의 현재 플랫폼 문서를 리뷰하고 앱을 출시하기 전에 확인하세요.
- 설정할 때 Facebook 비즈니스 통합 가이드 를 따르세요.
Android 설정
Android 설정-
인터넷 권한을 앱에 추가하세요.
AndroidManifest.xml이 줄이 포함되어야 합니다:
<uses-permission android:name="android.permission.INTERNET"/> -
Android 키 해시 생성
Facebook에 의해 요구되는 중요한 보안 단계입니다. 터미널을 열고 다음 명령어를 실행하세요.
터미널 창 keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 -A비밀번호를 입력할 때 사용하세요.
android -
Facebook 앱에 키 해시를 추가하세요.
- Facebook Developers에 있는 앱의 대시보드에 가세요
- Settings > Basic으로 이동하세요
- 'Android' 섹션으로 스크롤 다운하세요
- Android가 아직 추가되지 않았다면 'Add Platform'을 클릭하고 세부 정보를 입력하세요
- 생성한 키 해시를 추가하세요
- 프로덕션에서 debug 및 release 키 해시 모두 추가하세요
-
업데이트하세요
AndroidManifest.xml다음과 같이 포함하세요:<application>...<activity android:name="com.facebook.FacebookActivity"android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"android:label="@string/app_name" /><activityandroid: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>
iOS 설정
iOS 설정-
Facebook 개발자 콘솔에서 iOS 플랫폼을 추가하세요.
- Facebook 개발자 콘솔에서 앱의 대시보드로 이동하세요.
- 설정 > 기본 설정으로 이동하세요.
- 페이지의 하단에 있는 “플랫폼 추가” 버튼을 클릭하세요.
- iOS 플랫폼을 선택하고 필요한 정보를 입력하세요.
-
Xcode 프로젝트를 열고 Info.plist를 열어보세요.
-
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> -
수정하기
AppDelegate.swiftimport FBSDKCoreKit@UIApplicationMainclass AppDelegate: UIResponder, UIApplicationDelegate {func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {// Override point for customization after application launch.// Initialize Facebook SDKFBSDKCoreKit.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 callif (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 로그인 사용하기를 사용하는 앱-
앱에 Facebook 로그인을 초기화하세요
import { SocialLogin } from '@capgo/capacitor-social-login';// Initialize during app startupawait SocialLogin.initialize({facebook: {appId: 'APP_ID',clientToken: 'CLIENT_TOKEN',}}) -
로그인 함수를 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}} -
: Limited Login 시나리오와 풀 Login 시나리오 모두에서 앱이 올바르게 작동하는지 항상 테스트하세요. Limited Login에 대해 더 알아보세요
: here
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 loginasync 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);}}}일부 필드는 추가 권한이 필요할 수 있습니다.토큰 유형 제한
getProfilecall은 표준 로그인(추적 허용)과 함께 액세스 토큰이 있는 경우에만 작동합니다. 사용자가 추적 거부하거나 JWT 토큰만 사용하는 경우 이 호출은 실패합니다. 그 경우 초기 로그인 응답에서 제공된 프로필 데이터를 사용하세요. ⚠️ Critical: 백엔드 토큰 처리에 주의가 필요합니다.
당신의 백엔드가 두 가지 토큰 유형을 처리해야 합니다. iOS 사용자는 앱 추적성 투명성 선택에 따라 접근 토큰 또는 JWT 토큰을 받을 수 있기 때문입니다. 반면 Android 사용자는 항상 접근 토큰을 받습니다.
플랫폼별 토큰 유형
제목이 ‘플랫폼별 토큰 유형’인 섹션| 플랫폼 | limitedLogin 설정 | 사용자 ATT 선택 | 결과 토큰 유형 |
|---|---|---|---|
| iOS | true | 어디든 | JWT 토큰 |
| iOS | false | 추적 허용 | 액세스 토큰 |
| iOS | false | 추적 거부 | JWT 토큰 (자동 오버라이드) |
| Android | 어떤 | N/A | 액세스 토큰 (항상) |
백엔드 구현
백엔드 구현-
토큰 유형 감지하고 적절히 처리
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);}} -
파이어베이스 통합 예시
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 validationtry {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;}} -
백엔드 JWT 인증
// Backend: Validate JWT token from Facebookimport 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-claimsconst 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 JWTconst userInfo = {id: decoded.sub,email: decoded.email,name: decoded.name,isJWTAuth: true};// Create your app's session/tokenconst 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' });}}); -
일반 백엔드 토큰 처리기
// Handle both token types in your backendasync function authenticateFacebookUser(tokenData: any) {if (tokenData.accessToken) {// Handle access token - validate with Facebook Graph APIconst 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-claimsconst 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');}}
중요 고려 사항
중요 고려 사항 섹션Access Token (표준 로그인):
- ✅ 안드로이드: 항상 사용 가능 (iOS 전용 제한이 적용되지 않음)
- ✅ iOS: 사용자가 앱 추적을 명시적으로 허용할 때만 사용 가능
- ✅ Facebook Graph API에 접근할 수 있습니다.
- ✅ 더 긴 유효 시간
- ✅ 사용자 데이터가 더 많습니다.
- ❌ iOS에서 iOS 전용 개인 정보 보호 모드에서만 사용할 수 있습니다. iOS에서 사용자가 앱 추적을 거부하는 경우 점점 더 흔해지며
JWT Token (iOS-Only Privacy Mode):
- ❌ 안드로이드: 사용되지 않습니다 (지원되지 않음)
- ✅ iOS: 추적 거부 또는
limitedLogin: true - ✅ iOS 사용자 개인 정보 보호 설정을 존중합니다
- ❌ 기본 사용자 정보만 포함
- ❌ 더 짧은 유효 기간
- ❌ Facebook Graph에 접근할 수 없습니다 API
- ⚠️ iOS 사용자에게 가장 일반적인 시나리오입니다
플랫폼별 동작:
- iOS 앱: 액세스 토큰 및 JWT 토큰 모두 처리해야 함
- 안드로이드 앱: 액세스 토큰을 처리하기 위해만 필요합니다.
- 플랫폼 간 앱: 두 가지 토큰 처리 방법을 모두 implement해야 합니다.
Capacitor (웹) 보안 요구 사항
Capacitor (웹) 보안 요구 사항API 암호화 제한
API 암호화 제한The updated Facebook login flow requires the Web Crypto API for nonce generation, which is only available in secure contexts:
// 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 // ...}Development Environment Issues
개발 환경 문제일반적인 문제: ionic serve with HTTP URLs breaks Facebook authentication
| 환경 | Crypto API Available | Facebook Login Works |
|---|---|---|
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 개발을 위한 솔루션
Capacitor 개발을 위한 솔루션 섹션-
localhost를 사용하여 웹 테스트
터미널 창 # Instead of ionic serve --host=0.0.0.0ionic serve --host=localhost -
아이온에서 HTTPS를 활성화하세요
터미널 창 ionic serve --ssl -
실제 장치에서 테스트
터미널 창 # Capacitor apps run in secure context on devicesionic cap run iosionic cap run android -
개발용으로 대안 nonce 생성
async function generateNonce() {if (typeof crypto !== 'undefined' && crypto.subtle) {// Secure context - use crypto.subtlereturn 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 and 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를 사용하여 웹 테스트를 진행하세요. ionic serve on a network IP (not localhost), Facebook login will fail due to crypto API restrictions. Use localhost or HTTPS for web testing.
문제 해결 섹션
일반적인 문제와 해결 방법들Section titled “Troubleshooting”
일반 문제와 해결 방법-
안드로이드에서 키 해시 오류
- Facebook 대시보드에 올바른 키 해시를 추가했는지 다시 확인하세요
- 릴리즈 빌드의 경우, 디버그 키 해시와 릴리즈 키 해시 모두 추가했는지 확인하세요
- 해시를 생성할 때 올바른 키 스토어를 사용하고 있는지 확인하세요
-
Facebook 로그인 버튼이 나타나지 않는다
- 모든 매니페스트 항목이 올바른지 확인하세요
- Facebook App ID와 Client Token이 올바른지 확인하세요
- SDK를 올바르게 초기화했는지 확인하세요
-
일반 iOS 문제
- Info.plist 항목이 올바른지 확인하세요
- URL 스키마가 올바르게 구성되었는지 확인하세요
- Facebook 대시보드에 등록된 것과 일치하는 버전의 빌드 ID를 확인하세요.
테스트
테스트-
테스트하기 전에 Facebook 개발자 콘솔에서 테스트 사용자를 추가하세요.
- Roles > 테스트 사용자로 이동하세요.
- 테스트 사용자 생성
- 테스트를 위해 이 인증 정보를 사용하세요.
-
디버그 빌드와 릴리스 빌드 모두 테스트하세요.
- 디버그 키 해시를 사용하는 디버그 빌드
- 릴리스 키 해시를 사용하는 릴리스 빌드
- 에뮬레이터와 물리적 장치 모두에서 테스트하세요.
로그인 흐름의 전체를 테스트하세요. 이에는 다음과 같은 것들이 포함됩니다.
- 로그인 성공
- 로그인 취소
- 오류 처리
- 로그아웃 기능
Facebook 로그인 설정에서 계속
Facebook 로그인 설정에서 계속당신이 사용 중인 경우 Facebook 로그인 설정 인증 및 계정 흐름을 계획하고 연결하려면 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login 구현 세부 정보는 @capgo/capacitor-social-login 에서 찾을 수 있습니다. @capgo/capacitor-passkey 구현 세부 정보는 @capgo/capacitor-passkey 에서 찾을 수 있습니다. @capgo/capacitor-native-biometric 구현 세부 정보는 @capgo/capacitor-native-biometric 에서 찾을 수 있습니다. 두 단계 인증 구현 세부 정보는 두 단계 인증 에서 찾을 수 있습니다.