[flutter] 플러터 Riverpod를 사용하여 앱에 페이스북 로그인 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

1. 패키지 추가하기

먼저, 페이스북 로그인 기능을 제공하는 패키지인 ‘flutter_facebook_auth’를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음 내용을 추가하세요:

dependencies:
  flutter_facebook_auth: ^3.5.0

그리고 패키지를 업데이트하십시오:

flutter pub get

2. 페이스북 앱 등록하기

페이스북 로그인을 사용하려면 먼저 페이스북 개발자 콘솔에서 앱을 등록해야 합니다. 등록된 앱에서 앱 ID를 얻으세요.

3. 로그인 버튼 UI 추가하기

SignInWithFacebookButton이라는 로그인 버튼을 만들어보겠습니다. 이 버튼은 페이스북 로그인을 시작하도록 유저를 리디렉션합니다. 우선 lib/widgets/sign_in_with_facebook_button.dart 파일을 생성하고 다음 코드를 입력하세요:

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

class SignInWithFacebookButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        final LoginResult result = await FacebookAuth.instance.login();
        if (result.status == LoginStatus.success) {
          // 페이스북 로그인 성공
        } else {
          // 페이스북 로그인 실패
        }
      },
      child: Text('Sign in with Facebook'),
    );
  }
}

4. 로그인 기능 추가하기

이제 페이스북 로그인 기능을 앱에 추가하려면 로그인 버튼을 사용하는 화면에서 해당 버튼을 추가해주어야 합니다. 예를 들어, 사용자가 로그인을 수행하는 화면에 SignInWithFacebookButton 위젯을 추가하는 방법은 다음과 같습니다:

import 'package:flutter/material.dart';
import 'package:your_app/widgets/sign_in_with_facebook_button.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 다른 로그인 버튼들
            // ...
            SizedBox(height: 16),
            SignInWithFacebookButton(),
          ],
        ),
      ),
    );
  }
}

5. 액세스 토큰 사용하기

로그인이 성공하면 페이스북 액세스 토큰에 접근할 수 있습니다. 액세스 토큰은 다른 API 호출에 사용될 수 있습니다. 예를 들어, 페이스북 그래프 API를 사용하여 로그인한 사용자의 이름과 프로필 사진을 가져와보겠습니다. lib/services/facebook_graph_api_service.dart 파일을 생성하고 다음 코드를 입력하세요:

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

class FacebookGraphApiService {
  Future<String?> getUsername() async {
    final accessToken = await FacebookAuth.instance.accessToken;
    if (accessToken == null) return null;

    final graphResponse = await get(
      Uri.parse('https://graph.facebook.com/v12.0/me?fields=name'),
      headers: {'Authorization': 'Bearer $accessToken'},
    );

    if (graphResponse.statusCode == 200) {
      final data = jsonDecode(graphResponse.body);
      return data['name'];
    } else {
      return null;
    }
  }
}

이제 getUsername 메서드를 활용하여 사용자의 이름을 가져올 수 있습니다.

6. Riverpod로 상태 관리하기

위에서 작성한 코드는 페이스북 로그인을 기능을 구현했지만, 상태 관리는 고려되지 않았습니다. 페이스북 로그인 상태를 Riverpod를 사용하여 관리하면 편리합니다. 예를 들어, 다음과 같이 lib/providers/facebook_auth_provider.dart 파일을 생성하고 다음 코드를 입력하면 됩니다:

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

final facebookAuthProvider = ChangeNotifierProvider<FacebookAuth>((ref) {
  return FacebookAuth();
});

class FacebookAuth extends ChangeNotifier {
  String? _accessToken;

  String? get accessToken => _accessToken;

  Future<void> login() async {
    final LoginResult result = await FacebookAuth.instance.login();
    if (result.status == LoginStatus.success) {
      _accessToken = result.accessToken?.token;
    } else {
      _accessToken = null;
    }
    notifyListeners();
  }

  void logout() {
    _accessToken = null;
    notifyListeners();
  }
}

이제 facebookAuthProvider를 이용하여 페이스북 로그인 상태를 앱 전체에서 사용할 수 있습니다.

이제 플러터 Riverpod를 사용하여 앱에 페이스북 로그인 기능을 추가하는 방법을 알게 되었습니다. 이제 앱에서 페이스북 로그인을 사용할 수 있고, 페이스북 API와 상호작용하여 사용자 정보를 가져올 수 있습니다.

더 자세한 정보는 flutter_facebook_auth 패키지와 페이스북 개발자 문서를 참조하세요.