[flutter] 플러터에서의 소셜 로그인 연동 방법

04 Dec 2023

flutter

플러터는 크로스 플랫폼 개발을 위한 프레임워크로, 다양한 기능을 제공하며 사용자 인증을 위해 소셜 로그인 연동이 필요할 수 있습니다. 이번 포스팅에서는 Flutter 애플리케이션에서 소셜 로그인을 어떻게 연동할 수 있는지 알아보겠습니다.

Google 로그인 연동

Google 로그인을 통해 사용자 인증을 처리하기 위해서는 google_sign_in 패키지를 추가해야합니다. 다음은 pubspec.yaml 파일에서 해당 패키지를 추가하는 예제입니다:

dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^4.5.1

이제 패키지를 추가했다면, 로그인 버튼을 클릭하면 Google 로그인 창이 열리도록 설정해야합니다. 다음은 버튼을 생성하고 클릭 이벤트 처리하는 예제입니다:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  Future<void> _handleSignIn() async {
    try {
      final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
      final GoogleSignInAuthentication? googleAuth = await googleUser!.authentication;

      // 사용자 정보 및 토큰 처리
      // ...

    } catch (error) {
      // 에러 처리
      // ...
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: ElevatedButton(
            onPressed: _handleSignIn,
            child: Text('Google 로그인'),
          ),
        ),
      ),
    );
  }
}

Google 로그인 버튼이 클릭되면 _handleSignIn 메소드가 호출되며, 사용자의 인증 정보를 받아올 수 있습니다. 받아온 정보를 바탕으로 필요한 작업을 처리하면 됩니다.

Facebook 로그인 연동

Facebook 로그인을 통해 사용자 인증을 처리하기 위해서는 flutter_facebook_auth 패키지를 추가해야합니다. 다음은 pubspec.yaml 파일에서 해당 패키지를 추가하는 예제입니다:

dependencies:
  flutter:
    sdk: flutter
  flutter_facebook_auth: ^3.0.0

이제 패키지를 추가했다면, 로그인 버튼을 클릭하면 Facebook 로그인 창이 열리도록 설정해야합니다. 다음은 버튼을 생성하고 클릭 이벤트 처리하는 예제입니다:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Future<void> _handleSignIn() async {
    try {
      final LoginResult result = await FacebookAuth.instance.login();

      // 사용자 정보 및 토큰 처리
      // ...

    } catch (error) {
      // 에러 처리
      // ...
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: ElevatedButton(
            onPressed: _handleSignIn,
            child: Text('Facebook 로그인'),
          ),
        ),
      ),
    );
  }
}

Facebook 로그인 버튼이 클릭되면 _handleSignIn 메소드가 호출되며, 사용자의 인증 정보를 받아올 수 있습니다. 받아온 정보를 바탕으로 필요한 작업을 처리하면 됩니다.

플러터를 사용하여 소셜 로그인을 연동하는 방법을 알아보았습니다. 각 소셜 미디어의 개발자 문서를 참고하여 추가적인 설정이나 기능을 구현할 수 있습니다.

참고 자료

Google Sign-In 개발자 문서: https://developers.google.com/identity/sign-in/flutter
flutter_google_sign_in 패키지: https://pub.dev/packages/google_sign_in
Flutter Facebook Auth 패키지: https://pub.dev/packages/flutter_facebook_auth