페이스북 로그인 설정
이 플러그인을 설치하는 방법과 전체 마크다운 가이드를 포함한 설정 프롬프트를 복사합니다.
Introduction
인터뷰 섹션이 가이드에서 Facebook 로그인을 Capgo Social Login과 함께 설정하는 방법을 배웁니다. 다음이 필요합니다:
- Facebook 개발자 계정
- 애플리케이션의 패키지 이름/번들 ID
- Android용 키 해시를 생성하기 위한 터미널 접근 권한
일반 설정
일반 설정Facebook 앱이 이미 존재하지 않는 경우, 다음 단계를 따르세요:
-
Facebook 앱 만들기
튜토리얼을 따라서 앱 만들기
-
Facebook 로그인 추가
Facebook 개발자 도구에서 Facebook 로그인 제품을 앱에 추가하세요
-
앱을 일반인에게 출시하기 전에, 이 튜토리얼을 따르세요 tutorial 게시를 위해 그것을
중요한 정보
제목 ‘중요한 정보’통합을 위해 필요한 키 정보를 찾으려면 여기에 있습니다.
-
CLIENT_TOKEN:
-
APP_ID:
-
APP_NAME:
Facebook 비즈니스 로그인
제목 ‘Facebook 비즈니스 로그인’이 플러그인은 비즈니스 관련 기능 및 권한을 지원하는 Facebook 비즈니스 로그인을 지원합니다. 비즈니스 계정은 표준 소비자 로그인 외에 추가 권한을 요청할 수 있습니다. Instagram 및 페이지 관리도 포함됩니다.
지원되는 비즈니스 권한은 다음과 같습니다:
instagram_basic- Instagram 기본 표시 APIinstagram_manage_insights- 인스타그램 통찰력에 접근pages_show_list- 사용자가 관리하는 페이지 목록pages_read_engagement- 페이지에서 읽어 들이는 참여 데이터pages_manage_posts- 페이지에 게시물을 관리business_management- 비즈니스 자산을 관리
- - 페이스북 권한 참조 - 전체 권한 목록을 참조하세요.
- 구성 요구 사항:
- - 페이스북 개발자 콘솔에서 페이스북 앱을 비즈니스 앱으로 구성해야 합니다.
- - 비즈니스 권한은 프로덕션 사용 전에 페이스북 앱 리뷰가 필요할 수 있습니다.
- - 앱은 페이스북의 비즈니스 사용 사례 정책을 준수해야 합니다.
인스타그램 기본 접근
인스타그램 기본 접근 섹션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 설정-
인터넷 권한을 앱에 추가하세요.
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 -
페이스북 앱에 키 해시 추가
- 페이스북 개발자에 가서 앱의 대시보드에
- 설정 > 기본
- Android 섹션으로 스크롤
- Android가 아직 추가되지 않은 경우 플랫폼 추가
- 세부 정보를 입력
- 생성한 키 해시 추가
-
업데이트 하세요
AndroidManifest.xmlFacebook으로 로그인하기<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>
-
Facebook 개발자 콘솔에서 앱의 대시보드로 이동하기
- Settings > Basic으로 이동하기
- Settings
- 페이지 하단으로 스크롤하여 “플랫폼 추가”를 클릭하세요.
- 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}} -
사용자 프로필 가져오기
로그인 성공 후 추가 프로필 정보를 가져올 수 있습니다.
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);}}}토큰 유형 제한: Facebook
getProfile페이스북 로그인 플러그인을 사용하려면 페이스북 개발자 계정에 앱을 등록해야 합니다. Facebook 소셜 로그인 플러그인 protectedTokens list 에 있는 단어는 변환하지 않습니다. access token 트래킹이 허용된 표준 로그인입니다. 사용자가 트래킹 거부하거나 제한 로그인(JWT 토큰만)을 사용하는 경우, 이 호출은 실패합니다. 그 경우, 초기 로그인 응답에서 제공된 프로필 데이터를 사용하세요.
⚠️ 중요: 백엔드 토큰 처리
Backend Token Handling서버측에서 두 가지 토큰 타입을 처리해야 합니다. iOS Token Behavior iOS 사용자는 앱 추적성 투명성 선택에 따라 접근 토큰 또는 JWT 토큰을 받을 수 있습니다. 반면 안드로이드 사용자는 항상 접근 토큰을 받습니다.
플랫폼별 토큰 유형
플랫폼별 토큰 유형| 플랫폼 | 제한된 로그인 설정 | 사용자 ATT 선택 | 결과 토큰 유형 |
|---|---|---|---|
| iOS | true | 어떤 | JWT 토큰 |
| iOS | false | 추적 허용 | 액세스 토큰 |
| iOS | false | 추적 거부 | JWT 토큰 (자동 오버라이드) |
| 안드로이드 | 어떤 | 액세스 토큰 (항상) |
백엔드 구현
백엔드 구현-
토큰 타입 감지 및 적절히 처리
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');}}
중요 고려 사항
중요 고려 사항 섹션- 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 개발을 위한 솔루션-
로컬 호스트를 사용하여 웹 테스트
터미널 창 # 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 -
개발용 비대면 인증
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 및 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를 사용하여 웹 테스트를 진행하세요.
제목 "문제 해결"
일반적인 문제와 해결 방법-
제목 "일반적인 문제와 해결 방법"
- Android에서 키 해시 오류
- 정확한 키 해시를 Facebook 대시보드에 추가했는지 다시 확인하세요
- 릴리즈 빌드의 경우 디버그 및 릴리즈 키 해시 모두를 추가하십시오
-
해시를 생성할 때 올바른 키 스토어를 사용하고 있는지 확인하십시오
- Facebook 로그인 버튼이 나타나지 않습니다
- Facebook App ID와 Client Token이 정확한지 확인하세요.
- SDK를 올바르게 초기화했는지 확인하세요.
-
iOS에서 발생하는 일반적인 문제
- Info.plist 항목이 모두 정확한지 확인하세요.
- URL schemes가 올바르게 구성되었는지 확인하세요.
- Facebook 대시보드에 등록된 ID와 일치하는지 확인하세요.
테스트
테스트 섹션-
테스트하기 전에 Facebook 개발자 콘솔에서 테스트 사용자를 추가하세요.
- Roles > Test Users로 이동하세요.
- 테스트 사용자를 생성하세요.
- 이용자 정보를 테스트하기 위해 사용하세요.
-
테스트는 디버그 빌드와 릴리스 빌드 모두를 테스트합니다.
- 디버그 빌드에 디버그 키 해시를 사용합니다.
- 릴리스 빌드에 릴리스 키 해시를 사용합니다.
- 안드로이드 에뮬레이터와 실제 장치 모두에서 테스트합니다.
로그인 흐름의 전체를 테스트하세요. 다음 항목을 포함합니다:
- 로그인 성공
- 로그인 취소
- 오류 처리
- 로그아웃 기능
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