[flutter] 플러터 앱의 소셜 미디어 로그인 (Social Login) 구현

플러터(Flutter)는 다양한 소셜 미디어 플랫폼과의 연동을 통해 사용자 로그인 기능을 구현할 수 있는 훌륭한 기능을 제공합니다. 이 글에서는 플러터 앱에서 소셜 미디어 로그인을 구현하는 방법에 대해 알아보겠습니다.

구글 로그인 (Google Login) 구현 방법

Step 1: Firebase 프로젝트 생성 및 구성

  1. Firebase 콘솔에 접속하여 프로젝트를 생성합니다.
  2. 생성한 프로젝트를 선택하고 “Authentication” 탭으로 이동합니다.
  3. “로그인 방법” 탭에서 “Google” 옵션을 활성화합니다.
  4. “웹 구성” 버튼을 클릭하여 구성 스크립트를 가져옵니다.

Step 2: 필요한 의존성 추가

프로젝트의 pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  firebase_core: ^1.3.0
  firebase_auth: ^3.0.0
  google_sign_in: ^5.0.0

Step 3: Google 로그인 버튼 추가

로그인 화면에 Google 로그인 버튼을 추가합니다. 해당 버튼을 누르면 사용자는 Google 계정으로 로그인할 수 있습니다.

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

class LoginPage extends StatelessWidget {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

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

    final OAuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );

    final UserCredential userCredential = await _auth.signInWithCredential(credential);
    
    return userCredential;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('플러터 소셜 미디어 로그인'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _loginWithGoogle,
          child: Text('Google 로그인'),
        ),
      ),
    );
  }
}

Step 4: 로그인 처리

Google 로그인 버튼을 누르면 _loginWithGoogle() 함수가 호출됩니다. 이 함수는 Google 로그인 플로우를 처리하고 Firebase로 인증을 요청합니다. 인증이 성공하면 UserCredential 객체가 반환되며, 여기서부터는 사용자의 로그인 정보를 활용할 수 있습니다.

이제 소셜 미디어 로그인 구현이 완료되었습니다. 사용자가 Google 로그인 버튼을 누르면 적절한 인증 및 권한 요청이 수행되어 사용자 정보를 받을 수 있습니다.

참고 자료