Flutter의 페이스북 로그인(Facebook Sign-In) 통합

페이스북 로그인(Facebook Sign-In)은 사용자가 자신의 페이스북 계정을 사용하여 앱에 쉽게 로그인할 수 있도록 해주는 강력한 인증 방법입니다. Flutter를 사용하면 페이스북 로그인을 간편하게 통합할 수 있으며, 이를 통해 사용자 인증을 쉽게 처리할 수 있습니다. 이번 글에서는 Flutter에서 페이스북 로그인을 설정하고 사용하는 방법을 단계별로 설명하겠습니다.

1. Facebook 개발자 콘솔 설정

먼저, Facebook 개발자 콘솔에서 앱을 생성하고 설정해야 합니다.

1.1 Facebook 개발자 콘솔에서 앱 생성

1. Facebook 개발자 콘솔에 로그인합니다.
2. 내 앱 -> 앱 만들기를 클릭하고 플랫폼을 선택합니다.
3. 앱 이름과 이메일을 입력하고 앱을 생성합니다.

1.2 Facebook 로그인 활성화

1. 앱 설정 페이지로 이동한 후, Facebook 로그인을 선택하고 설정을 클릭합니다.
2. 유효한 OAuth 리디렉션 URI에 https://www.facebook.com/connect/login_success.html을 추가합니다.
3. 개발자 모드에서 앱 리뷰 -> 앱을 공개로 전환을 클릭하여 앱을 배포 준비 상태로 설정합니다.

2. Firebase 프로젝트 설정

페이스북 로그인을 위해 Firebase와 연동해야 합니다.

2.1 Firebase 프로젝트 생성 및 설정

1. Firebase 콘솔에서 새 프로젝트를 생성합니다.
2. Authentication -> Sign-in method로 이동하여 Facebook을 활성화합니다.
3. Facebook 개발자 콘솔에서 App ID와 App Secret을 복사하여 Firebase Facebook 로그인 설정에 입력합니다.

3. Flutter 프로젝트 설정

이제 Flutter 프로젝트에 필요한 패키지를 추가하고 설정을 진행합니다.

3.1 패키지 추가

pubspec.yaml 파일에 Firebase와 Facebook 로그인 패키지를 추가합니다.

 

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0
  firebase_auth: ^3.3.0
  flutter_facebook_auth: ^4.3.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

 

3.2 Android 설정

android/app/build.gradle 파일에 Facebook SDK와 Firebase 관련 설정을 추가합니다.

 

dependencies {
  classpath 'com.google.gms:google-services:4.3.10'
  classpath 'com.android.tools.build:gradle:7.0.0'
}

 

android/app/src/main/AndroidManifest.xml 파일에 Facebook 로그인 관련 코드를 추가합니다.

 

<application>
    <meta-data
      android:name="com.facebook.sdk.ApplicationId"
      android:value="@string/facebook_app_id"/>
    <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="@string/fb_login_protocol_scheme"/>
      </intent-filter>
    </activity>
</application>

 

 

반응형

 

 

그리고 strings.xml 파일에 Facebook App ID를 추가합니다.

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="fb_login_protocol_scheme">fbYOUR_FACEBOOK_APP_ID</string>

 

3.3 iOS 설정

ios/Runner/Info.plist 파일에 다음 코드를 추가하여 페이스북 로그인을 설정합니다.

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fbYOUR_FACEBOOK_APP_ID</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_NAME</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fbauth2</string>
</array>

여기서 YOUR_FACEBOOK_APP_ID와 YOUR_APP_NAME을 Facebook 콘솔에서 받은 정보로 교체해야 합니다.

 

 

728x90

 

4. 페이스북 로그인 구현

이제 Flutter 코드에서 페이스북 로그인을 구현할 차례입니다.

 

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SignInScreen(),
    );
  }
}

class SignInScreen extends StatefulWidget {
  @override
  _SignInScreenState createState() => _SignInScreenState();
}

class _SignInScreenState extends State<SignInScreen> {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<User?> _signInWithFacebook() async {
    final LoginResult result = await FacebookAuth.instance.login();
    if (result.status == LoginStatus.success) {
      final OAuthCredential credential = FacebookAuthProvider.credential(result.accessToken!.token);
      final UserCredential userCredential = await _auth.signInWithCredential(credential);
      return userCredential.user;
    } else {
      return null;
    }
  }

  void _signOut() async {
    await _auth.signOut();
    await FacebookAuth.instance.logOut();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Facebook Sign-In'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                User? user = await _signInWithFacebook();
                if (user != null) {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => HomeScreen(user: user)),
                  );
                }
              },
              child: Text('Sign in with Facebook'),
            ),
            ElevatedButton(
              onPressed: _signOut,
              child: Text('Sign out'),
            ),
          ],
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final User user;

  HomeScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Signed in as: ${user.displayName}'),
            Text('Email: ${user.email}'),
          ],
        ),
      ),
    );
  }
}

위 코드는 사용자가 페이스북 계정을 사용하여 로그인하고 로그아웃할 수 있도록 하는 예제입니다. FacebookAuth 객체를 사용하여 페이스북 로그인 흐름을 관리하고, FirebaseAuth를 사용하여 Firebase와 연동된 인증을 처리합니다.

5. 결과 테스트

이제 애플리케이션을 실행하여 페이스북 로그인을 테스트할 수 있습니다.

1. flutter run 명령어를 사용하여 애플리케이션을 실행합니다.
2. "Sign in with Facebook" 버튼을 클릭하여 페이스북 로그인 화면을 엽니다.
3. 페이스북 계정을 선택하여 로그인합니다.
4. 로그인 후, Home 화면으로 이동하여 사용자의 이름과 이메일을 확인합니다.
5. "Sign out" 버튼을 클릭하여 로그아웃합니다.

결론

Flutter에서 페이스북 로그인을 통합하면 사용자가 페이스북 계정을 통해 간편하게 로그인할 수 있습니다. Firebase Authentication과 Flutter Facebook Auth 패키지를 사용하여 페이스북 로그인을 구현할 수 있으며, 이를 통해 사용자 인증 과정을 간소화할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에 페이스북 로그인 기능을 통합해보세요. 페이스북 로그인을 통해 사용자에게 더욱 원활한 인증 경험을 제공할 수 있습니다.