[flutter] 플러터(Flutter)로 SNS 로그인 기능 구현하기

18 Dec 2023

flutter

SNS 로그인은 모바일 애플리케이션을 개발할 때 중요한 부분 중 하나입니다. 플러터(Flutter)를 사용하여 구글(Google) 로그인 및 페이스북(Facebook) 로그인과 같은 SNS 로그인 기능을 구현하는 방법에 대해 알아보겠습니다.

구글(Google) 로그인 구현하기

구글 로그인 기능을 구현하기 위해서는 먼저 google_sign_in 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  google_sign_in: ^5.2.1

이후에는 구글 로그인을 위한 코드를 작성합니다. 아래는 간단한 구글 로그인 예제 코드입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GoogleLoginScreen(),
    );
  }
}

class GoogleLoginScreen extends StatelessWidget {
  GoogleSignIn _googleSignIn = GoogleSignIn(scopes: ['email']);

  Future<void> _handleSignIn() async {
    try {
      await _googleSignIn.signIn();
    } catch (error) {
      print(error);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Login'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Sign in with Google'),
          onPressed: () {
            _handleSignIn();
          },
        ),
      ),
    );
  }
}

페이스북(Facebook) 로그인 구현하기

페이스북 로그인을 구현하기 위해서는 flutter_facebook_login 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter_facebook_login: ^3.0.0

이후에는 페이스북 로그인을 위한 코드를 작성합니다. 아래는 간단한 페이스북 로그인 예제 코드입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FacebookLoginScreen(),
    );
  }
}

class FacebookLoginScreen extends StatelessWidget {
  FacebookLogin _facebookLogin = FacebookLogin();

  Future<void> _loginWithFacebook() async {
    final result = await _facebookLogin.logIn(['email']);
    switch (result.status) {
      case FacebookLoginStatus.loggedIn:
        // 로그인 성공
        String accessToken = result.accessToken.token;
        // TODO: 로그인 성공 처리 로직 작성
        break;
      case FacebookLoginStatus.cancelledByUser:
        // 사용자가 로그인을 취소함
        break;
      case FacebookLoginStatus.error:
        // 로그인 중 오류가 발생함
        print(result.errorMessage);
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Facebook Login'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Login with Facebook'),
          onPressed: () {
            _loginWithFacebook();
          },
        ),
      ),
    );
  }
}

위의 예제 코드를 참고하여 구글 및 페이스북 로그인을 구현할 수 있습니다. 물론, 실제로 사용자의 로그인 정보를 관리하고 보안에 신경을 써야 합니다.

더 자세한 내용은 각 SNS의 공식 문서 및 플러터(Flutter) 패키지 문서를 참고하시기 바랍니다.

이상으로, 플러터로 SNS 로그인 기능을 구현하는 방법에 대해 알아보았습니다.