Flutter로 Facebook Login 구현해보기(개발 테스트편) part2_with GetX

https://jaemoi8.tistory.com/1

티스토리

 

페이스북 로그인 구현을 위한 사전 셋팅과 준비는 이전 포스트를 참고해 주시면 됩니다. 이번 포스트에서는 페이스북 로그인을 동작시킬 코드를 제공하려합니다. 참고로 상태관리 라이브러리로 GetX를 사용해보았습니다. (GetX라이브러리 가이드는 추후에 글을 올리도록 하겠습니다.)

 

제 프로젝트는 flutter 3.10.5를 사용 중입니다. (flutter버전과 플러그인 버전의 호환성 문제로 고생하는 개발자 분들이 많으십니다. 힘내세요ㅠ)

 

dependencies:
  flutter_facebook_auth: ^5.0.0

flutter_facebook_auth 플러그인을 설치해주세요. 저는 플러그인을 최신 버전으로 설치하니깐 ios에서는 동작을 하지 않아서 고생 끝에 플러그인 버전을 낮추니깐 잘 동작했습니다.

 

final LoginResult result = await FacebookAuth.instance.login(
      permissions: ['email', 'public_profile'],
    );

플러그인을 설치하시면 제공되는 api를 통해 login 메서드를 사용할수 있게 됩니다. argument(매개변수)인 permissions는 로그인 시 사용자로부터 요청할 데이터나 권한을 정의하는 옵션입니다. email(사용자가 제공하지 않으면 조회 불가)과 public_profile은 기본 권한이고

확장 권한으로 '사용자의 친구 목록', '사용자 위치정보'등 도 있지만 사용자의 동의가 필요합니다. 저희는 테스트이니깐 기본권한으로 email, 이름, 프로필 사진만 가져오는걸로 하겠습니다.

 

 

facebook_login_binding.dart

part of facebook;
class FacebookLoginBinding extends Bindings{
  @override
  void dependencies(){
    Get.lazyPut(() => FacebookLoginController());
  }
}

 

컨트롤러에서 화면에 비지니스 로직을 전달할수 있게 바인딩을 해주고

 

facebook_login_controller.dart

part of facebook;

class FacebookLoginController extends GetxController {
  var userData = Rxn<Map<String, dynamic>>(); // 사용자 데이터 상태
  var accessToken = Rxn<AccessToken>(); // AccessToken 상태

  // Facebook 로그인
  Future<void> loginWithFacebook() async {
    final LoginResult result = await FacebookAuth.instance.login(
      permissions: ['email', 'public_profile'],
    );

    if (result.status == LoginStatus.success) {
      // 로그인 성공
      accessToken.value = result.accessToken;

      // 사용자 데이터 가져오기
      final user = await FacebookAuth.instance.getUserData(
        fields: "name,email,picture.width(200)",
      );
      userData.value = user;
    } else {
      // 로그인 실패
      print('Login failed: ${result.status}');
      print('Error: ${result.message}');
    }
  }

  // Facebook 로그아웃
  Future<void> logout() async {
    await FacebookAuth.instance.logOut();
    userData.value = null;
    accessToken.value = null;
  }
}

컨트롤러 코드와

 

facebook_login_screen.dart

library facebook;

import 'package:flutter/material.dart';
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';
import 'package:get/get.dart';

part '../controller/facebook_login_binding.dart';

part '../controller/facebook_login_controller.dart';

class FacebookLoginScreen extends GetView<FacebookLoginController> {
  const FacebookLoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Facebook Login Example with GetX'),
      ),
      body: Center(
        child: Obx(() {
          // 사용자 데이터가 없으면 로그인 버튼 표시
          if (controller.userData.value == null) {
            return ElevatedButton(
              onPressed: controller.loginWithFacebook,
              child: const Text('Login with Facebook'),
            );
          } else {
            // 사용자 데이터가 있으면 정보와 로그아웃 버튼 표시
            final userData = controller.userData.value!;
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Name: ${userData['name']}",
                  style: const TextStyle(fontSize: 18),
                ),
                Text(
                  "Email: ${userData['email']}",
                  style: const TextStyle(fontSize: 18),
                ),
                Image.network(userData['picture']['data']['url']),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: controller.logout,
                  child: const Text('Logout'),
                ),
              ],
            );
          }
        }),
      ),
    );
  }
}

 

화면 코드를 이렇게 작성해보았습니다.

 

이름, 이메일, 프로필 사진을 가져왔습니다.