페이스북 로그인 과정

Flutter 앱에 페이스북 로그인 구현하기

1. 프로젝트 설정

1. Facebook Developer Console에서 앱 등록
   • 새 앱 생성
   • 플랫폼 추가 (Android / iOS)
   • 앱 ID와 앱 시크릿 획득
2. 필요한 패키지 추가 (pubspec.yaml

dependencies:
  flutter_facebook_auth: ^5.0.0
  firebase_auth: ^4.1.0
  cloud_firestore: ^4.0.3

3. Android 설정 (android/app/src/main/AndroidManifest.xml

<manifest>
  <!-- 인터넷 권한 추가 -->
  <uses-permission android:name="android.permission.INTERNET"/>
  
  <application>
    <!-- Facebook SDK 메타데이터 추가 -->
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
  </application>
</manifest>

4. iOS 설정 (ios/Runner/Info.plist

<dict>
  <!-- Facebook SDK 설정 추가 -->
  <key>FacebookAppID</key>
  <string>[YOUR_FACEBOOK_APP_ID]</string>
  <key>FacebookClientToken</key>
  <string>[YOUR_FACEBOOK_CLIENT_TOKEN]</string>
  <key>FacebookDisplayName</key>
  <string>[YOUR_APP_NAME]</string>
  
  <!-- URL Scheme 추가 -->
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>fb[YOUR_FACEBOOK_APP_ID]</string>
      </array>
    </dict>
  </array>
</dict>

2. 로그인 로직 구현

1. AuthRepository 클래스에 페이스북 로그인 메서드 추가

class AuthRepository {
  Future<void> signInWithFacebook() async {
    try {
      // Facebook 로그인 시도
      final LoginResult result = await FacebookAuth.instance.login();
      
      if (result.status == LoginStatus.success) {
        // Facebook 액세스 토큰으로 Firebase 인증
        final OAuthCredential credential = FacebookAuthProvider.credential(result.accessToken!.token);
        final userCredential = await FirebaseAuth.instance.signInWithCredential(credential);
        
        // 사용자 정보 Firestore에 저장
        await FirebaseFirestore.instance.collection('users').doc(userCredential.user!.uid).set({
          'name': userCredential.user!.displayName,
          'email': userCredential.user!.email,
          'lastLogin': FieldValue.serverTimestamp(),
        }, SetOptions(merge: true));
      } else {
        throw Exception('Facebook login failed');
      }
    } catch (e) {
      print('Facebook login error: $e');
      rethrow;
    }
  }
}

상태 관리를 위한 Provider 구현 (Riverpod 사용)

@riverpod
class AuthState extends _$AuthState {
  @override
  AsyncValue<User?> build() => const AsyncValue.data(null);
  
  Future<void> signInWithFacebook() async {
    state = const AsyncValue.loading();
    try {
      await ref.read(authRepositoryProvider).signInWithFacebook();
      state = AsyncValue.data(FirebaseAuth.instance.currentUser);
    } catch (e, st) {
      state = AsyncValue.error(e, st);
    }
  }
}

UI에 로그인 버튼 추가 및 로직 연결

 

3. 보안 및 예외 처리

• 사용자 정보 보호를 위해 HTTPS 사용
• 토큰 관리 및 안전한 저장
• 다양한 예외 상황 (네트워크 오류, 인증 실패 등) 처리

4. 테스트 및 최적화

• 다양한 기기 및 OS 버전에서 테스트
• 로그인 프로세스 성능 최적화
• 사용자 경험 개선 (로딩 인디케이터, 에러 메시지 등)

5. 유지보수 및 업데이트

• Facebook SDK 및 관련 패키지 정기적 업데이트
• 사용자 피드백 반영 및 기능 개선

---

이 과정을 통해 Flutter 앱에 안전하고 효율적인 페이스북 로그인 기능을 구현했습니다. 이 구현은 사용자 인증, 상태 관리, 에러 처리 등 중요한 모바일 앱 개발 기술을 보여주며, Firebase와의 통합을 통해 확장 가능한 백엔드 솔루션도 제시합니다.