Colin's Blog
[flutter] 플러터에서 bloc 패턴을 사용하여 소셜 로그인 구현하기

플러터(Flutter)로 모바일 앱을 개발하면서 사용자가 소셜 미디어를 통해 로그인할 수 있는 기능을 구현하고 싶을 때가 많습니다. 이번 글에서는 플러터의 BLoC 패턴을 사용하여 Facebook 또는 Google과 같은 소셜 미디어를 통한 로그인을 구현하는 방법에 대해 알아보겠습니다.

BLoC 패턴 소개

BLoC(Block)은 Business Logic Component의 약자로, 플러터 앱의 데이터 흐름과 상태 관리를 위한 디자인 패턴입니다. BLoC를 사용하면 UI와 비즈니스 로직을 분리하여 앱의 유지보수성과 확장성을 향상시킬 수 있습니다.

소셜 로그인 구현 방법

1. 패키지 추가

먼저, 소셜 로그인을 위해 플러터 패키지인 flutter_bloc과 flutter_bloc_authentication, google_sign_in, firebase_auth와 같은 소셜 로그인을 지원하는 패키지를 추가해야 합니다.

패키지를 추가하기 위해 pubspec.yaml 파일에 아래와 같이 의존성을 추가합니다.

dependencies:
  flutter_bloc: ^7.3.0
  flutter_bloc_authentication: ^2.1.0
  google_sign_in: ^5.2.1
  firebase_auth: ^3.3.3

의존성을 추가한 후 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

2. BLoC 구현

BLoC를 사용하여 소셜 로그인을 구현하려면, flutter_bloc 패키지를 사용하여 Authentication BLoC를 구현해야 합니다.

class AuthBloc extends Bloc<AuthEvent, AuthState> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  @override
  AuthState get initialState => AuthInitial();

  @override
  Stream<AuthState> mapEventToState(
    AuthEvent event,
  ) async* {
    if (event is SignInWithGoogle) {
      try {
        // Google 로그인 로직 구현
        final googleUser = await _googleSignIn.signIn();
        final googleAuth = await googleUser.authentication;
        final credential = GoogleAuthProvider.credential(
          accessToken: googleAuth.accessToken,
          idToken: googleAuth.idToken,
        );
        await _auth.signInWithCredential(credential);
        yield Authenticated(); // 로그인 성공
      } catch (_) {
        yield Unauthenticated(); // 로그인 실패
      }
    }
    // Facebook 로그인 로직 구현
    else if (event is SignInWithFacebook) {
      // ...
    }
  }
}

위 코드에서는 AuthEvent와 AuthState를 사용하여 Authentication BLoC를 구현하였습니다. SignInWithGoogle 및 SignInWithFacebook 이벤트를 처리하고 Google 및 Facebook 로그인에 대한 비즈니스 로직을 추가했습니다.

3. UI 연동

마지막으로, BLoC를 UI와 연동하여 사용자가 소셜 로그인을 할 수 있는 버튼 및 인터페이스를 제공해야 합니다.

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social Login'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                BlocProvider.of<AuthBloc>(context).add(SignInWithGoogle());
              },
              child: Text('Sign in with Google'),
            ),
            // Facebook 로그인 버튼 추가
          ],
        ),
      ),
    );
  }
}

이제, AuthBloc을 BlocProvider로 랩핑하여 UI와 BLoC를 연동하고, 사용자가 버튼을 누를 때 해당 이벤트를 dispatch하도록 구현할 수 있습니다.

결론

플러터의 BLoC 패턴을 사용하여 소셜 로그인을 구현하는 방법에 대해 간략히 살펴보았습니다. BLoC 패턴을 활용하면 비즈니스 로직과 UI를 분리하여 앱을 보다 모듈화하고 확장 가능하게 구현할 수 있습니다.

참고 문헌:

© 2018 Colin. All rights reserved.