[flutter] 플러터(Flutter)에서 소셜 로그인 기능 구현 방법은?

18 Dec 2023

flutter

모바일 앱에는 흔히 사용자들이 편리하게 로그인할 수 있는 소셜 로그인 기능이 필요합니다. 페이스북, 구글, 트위터, 간편 로그인 등 각 소셜 플랫폼의 API를 사용하여 사용자 인증을 처리하는 방법을 알아보겠습니다.

구글(Google) 소셜 로그인 구현

구글 소셜 로그인을 구현하기 위해서는 google_sign_in 플러그인을 사용할 수 있습니다. 먼저, pubspec.yaml 파일에 해당 플러그인을 추가합니다.

dependencies:
  google_sign_in: ^5.2.1

다음으로, 구글 소셜 로그인 버튼을 누르면 구글 계정으로 로그인할 수 있는 화면을 구현합니다.

import 'package:google_sign_in/google_sign_in.dart';

void _handleSignIn() async {
  GoogleSignIn _googleSignIn = GoogleSignIn(scopes: ['email']);
  try {
    await _googleSignIn.signIn();
  } catch (error) {
    print('Error while signing in: $error');
  }
}

페이스북(Facebook) 소셜 로그인 구현

페이스북 소셜 로그인을 구현하기 위해서는 flutter_facebook_login 플러그인을 사용할 수 있습니다. 먼저, pubspec.yaml 파일에 해당 플러그인을 추가합니다.

dependencies:
  flutter_facebook_login: ^3.0.0

다음으로, 페이스북 소셜 로그인 버튼을 누르면 페이스북 계정으로 로그인할 수 있는 화면을 구현합니다.

import 'package:flutter_facebook_login/flutter_facebook_login.dart';

void _loginWithFacebook() async {
  final FacebookLoginResult result = await FacebookLogin().logIn(['email']);
  switch (result.status) {
    case FacebookLoginStatus.loggedIn:
      // 로그인 성공 시 처리
      break;
    case FacebookLoginStatus.cancelledByUser:
      // 사용자가 로그인을 취소한 경우 처리
      break;
    case FacebookLoginStatus.error:
      // 로그인 과정에서 에러가 발생한 경우 처리
      break;
  }
}

소셜 로그인 API 키 설정

구글 또는 페이스북 소셜 로그인을 구현할 때에는 해당 플랫폼에서 API 키를 발급받아 프로젝트에 설정해야 합니다. 이를 통해 소셜 로그인 기능을 친구들과 함께 공유하거나 서비스에 적용할 수 있습니다.

위에서 설명한 것들은 플러터에서 소셜 로그인을 구현하는 기본적인 방법에 대한 내용입니다. 각 플랫폼의 API 레퍼런스를 참고하여 추가적인 설정 및 기능 사용 방법을 습득하는 것이 좋습니다.