[flutter] 플러터(Flutter)에서 소셜 로그인(Social Login) 구현하기

소개

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 어플리케이션을 빠르고 쉽게 개발할 수 있게 해줍니다. 이번 포스트에서는 플러터를 사용하여 소셜 로그인 기능을 구현하는 방법에 대해 알아보겠습니다.

구글 로그인 구현하기

본격적으로 소셜 로그인을 구현하기 전에, 구글 로그인을 예제로 살펴보겠습니다. 플러터에서 구글 로그인을 구현하기 위해서는 google_sign_in 패키지를 사용해야 합니다. 우선 pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  google_sign_in: ^<version>

버전은 최신 버전을 사용하는 것을 권장합니다.

그리고 GoogleSignIn 클래스를 사용하여 구글 로그인을 구현할 수 있습니다. 아래 예제 코드를 확인해보세요:

import 'package:google_sign_in/google_sign_in.dart';

final GoogleSignIn _googleSignIn = GoogleSignIn();

Future<void> _handleSignIn() async {
  try {
    await _googleSignIn.signIn();
  } catch (error) {
    print('Error during Google sign in: $error');
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Sign In',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Sign In'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: _handleSignIn,
            child: Text('Sign In with Google'),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 GoogleSignIn 클래스와 관련된 함수들을 사용하여 구글 로그인을 처리하고 있습니다. onPressed 콜백 함수에서 _handleSignIn 함수를 호출하면, 구글 로그인 창이 나타나게 되고 사용자는 로그인을 할 수 있습니다.

페이스북 로그인 구현하기

페이스북 로그인을 구현하기 위해서는 flutter_facebook_login 패키지를 사용할 수 있습니다. 먼저 pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter_facebook_login: ^<version>

버전은 최신 버전을 사용하는 것을 권장합니다.

다음은 페이스북 로그인을 구현하기 위한 예제 코드입니다:

import 'package:flutter_facebook_login/flutter_facebook_login.dart';

final FacebookLogin _facebookLogin = FacebookLogin();

Future<void> _handleSignIn() async {
  final result = await _facebookLogin.logIn(['email']);

  switch (result.status) {
    case FacebookLoginStatus.loggedIn:
      // 로그인 성공시 원하는 동작 수행하기
      break;
    case FacebookLoginStatus.cancelledByUser:
      // 로그인 취소됨
      break;
    case FacebookLoginStatus.error:
      // 로그인 에러 발생
      break;
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Facebook Login',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Facebook Login'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: _handleSignIn,
            child: Text('Sign In with Facebook'),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 FacebookLogin 클래스를 사용하여 페이스북 로그인을 처리하고 있습니다. _handleSignIn 함수에서는 logIn 함수를 호출하고, 로그인 상태에 따라 알맞은 동작을 수행하도록 구현되어 있습니다.

마치며

이번 글에서는 플러터(Flutter)를 사용하여 소셜 로그인을 구현하는 방법에 대해 알아보았습니다. 구글 로그인과 페이스북 로그인을 예제로 살펴보았는데요, 다른 소셜 로그인 기능을 구현하는 방법도 비슷하게 적용할 수 있습니다. 소셜 로그인은 모바일 어플리케이션에서 매우 중요한 기능이므로, 플러터를 사용하여 손쉽게 구현해보세요!