[flutter] 플러터 슬라이딩 패널 페이스북 로그인

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 하나의 코드베이스로 iOS와 Android 앱을 개발할 수 있는 크로스 플랫폼 프레임워크입니다. 이번에는 플러터의 슬라이딩 패널을 이용하여 페이스북 로그인을 구현하는 방법을 알아보겠습니다.

필요한 패키지 설치하기

페이스북 로그인을 구현하기 위해서는 flutter_facebook_login 패키지를 사용할 것입니다. 이 패키지를 설치하기 위해 pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요.

dependencies:
  flutter_facebook_login: ^2.0.1

다음으로 패키지를 적용하기 위해 터미널 또는 명령 프롬프트를 열어 다음 명령어를 실행해주세요.

flutter pub get

이렇게하면 필요한 패키지가 다운로드되고 프로젝트에 추가됩니다.

페이스북 앱 등록하기

페이스북 로그인을 구현하기 위해선 Facebook 개발자 포털에서 애플리케이션을 등록해야 합니다. 다음 단계를 따라 진행해주세요.

  1. https://developers.facebook.com 에 접속합니다.
  2. 로그인한 후, 오른쪽 상단의 ‘내 앱’을 클릭합니다.
  3. ‘새 앱 만들기’ 버튼을 클릭합니다.
  4. ‘플랫폼 추가’를 클릭하고 ‘iOS’와 ‘Android’를 선택한 후, 각 플랫폼에 대한 값을 입력합니다.(앱 이름, 패키지 이름, 클래스 이름 등)
  5. 생성된 앱의 설정 페이지에서 ‘페이스북 로그인’ 탭으로 이동한 후 ‘로그인 설정’을 클릭합니다.
  6. ‘유형’을 원하시는 대로 선택한 후, ‘로그인 설정 요청’ 항목에서 값을 입력합니다.
  7. ‘연동’ 탭으로 이동한 후 ‘플랫폼 추가’를 클릭하여 각 플랫폼에 대한 설정값을 입력합니다.
  8. 설정을 저장한 후, 복사한 ‘앱 ID’ 값을 메모해둡니다.

플러터 슬라이딩 패널 만들기

이제 플러터에서 슬라이딩 패널을 만들어보겠습니다. 다음과 같이 코드를 작성해주세요.

import 'package:flutter/material.dart';
import 'package:flutter_facebook_login/flutter_facebook_login.dart';

class FacebookLoginPage extends StatefulWidget {
  @override
  _FacebookLoginPageState createState() => _FacebookLoginPageState();
}

class _FacebookLoginPageState extends State<FacebookLoginPage> {
  FacebookLogin facebookLogin = FacebookLogin();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('페이스북 로그인'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Facebook 로그인'),
          onPressed: () async {
            final result = await facebookLogin.logIn(['email']);
            switch (result.status) {
              case FacebookLoginStatus.loggedIn:
                print('페이스북 로그인 성공');
                break;
              case FacebookLoginStatus.cancelledByUser:
                print('사용자에 의해 취소됨');
                break;
              case FacebookLoginStatus.error:
                print('에러 발생');
                break;
            }
          },
        ),
      ),
    );
  }
}

위 코드에서 FacebookLoginPage 클래스는 StatefulWidget을 상속받아 구현되었으며, facebook_login 패키지를 이용하여 페이스북 로그인을 처리합니다. 페이지의 AppBar에는 ‘페이스북 로그인’이라는 타이틀이 들어가고, 로그인 버튼을 눌렀을 때 페이스북 로그인을 처리하는 로직이 동작하도록 구현되어 있습니다.

페이스북 로그인 처리하기

이제 페이스북 로그인을 처리하기 위해 pubspec.yaml 파일에서 flutter_facebook_login 패키지를 추가한 후, 페이스북 앱을 등록하고 슬라이딩 패널을 구현해봤습니다. 이제 앱을 실행하고 페이스북 로그인 버튼을 눌러보세요. 로그인 성공, 사용자에 의해 취소되었거나 에러가 발생했을 때 그에 대한 상태 메시지가 출력됩니다.

위의 예시 코드에서는 간단한 출력만 구현되었지만, 페이스북 로그인을 통해 사용자 정보를 얻어올 수도 있습니다. result.accessToken을 통해 페이스북 액세스 토큰을, result.expires를 통해 액세스 토큰의 만료 시간을 받아올 수 있습니다. 이 정보들을 활용하여 사용자 정보를 관리할 수 있습니다.

페이스북 로그인 구현에 대한 자세한 내용은 flutter_facebook_login 패키지 문서를 참고하시기 바랍니다.