Flutter의 구글 로그인(Google Sign-In) 통합

구글 로그인(Google Sign-In)은 사용자가 구글 계정을 통해 앱에 쉽게 로그인할 수 있게 해주는 강력한 인증 방법입니다. Flutter를 사용하면 구글 로그인을 간편하게 통합할 수 있습니다. 이번 글에서는 Flutter에서 구글 로그인을 설정하고 사용하는 방법을 단계별로 설명하겠습니다.

1. Firebase 프로젝트 설정

구글 로그인을 통합하려면 먼저 Firebase 콘솔에서 프로젝트를 설정해야 합니다.

1.1 Firebase 프로젝트 생성

1. Firebase 콘솔에 로그인하고 새 프로젝트를 만듭니다.
2. 프로젝트 이름을 입력하고 프로젝트를 생성합니다.

1.2 Firebase 앱 추가

1. Firebase 프로젝트 대시보드에서 Android와 iOS 앱을 추가합니다.
2. Android의 경우, google-services.json 파일을 다운로드하여 android/app 폴더에 추가합니다.
3. iOS의 경우, GoogleService-Info.plist 파일을 다운로드하여 ios/Runner 폴더에 추가합니다.

1.3 Firebase Authentication 설정

1. Firebase 콘솔에서 Authentication를 선택합니다.
2. Sign-in method 탭을 클릭합니다.
3. Google 제공자를 활성화합니다.

2. Flutter 프로젝트 설정

Flutter 프로젝트에서 필요한 패키지를 추가하고 설정합니다.

 

2.1 패키지 추가

pubspec.yaml 파일에 Firebase와 Google Sign-In 패키지를 추가합니다.

 

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0
  firebase_auth: ^3.3.0
  google_sign_in: ^5.2.4

 

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

 

 

728x90

 

 

2.2 Android 설정

android/app/build.gradle 파일에 Google 서비스 플러그인을 추가합니다.

 

dependencies {
  classpath 'com.google.gms:google-services:4.3.10'
}

 

android/app/build.gradle 파일의 하단에 다음 줄을 추가합니다.

 

apply plugin: 'com.google.gms.google-services'

 

2.3 iOS 설정

ios/Runner/Info.plist 파일에 다음 코드를 추가합니다.

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_CLIENT_ID</string>
    </array>
  </dict>
</array>
<key>GoogleService-Info.plist</key>
<string>YOUR_CLIENT_ID</string>

 

YOUR_CLIENT_ID를 Firebase 콘솔에서 받은 iOS 클라이언트 ID로 대체합니다.

 

 

반응형

 

3. 구글 로그인 구현

이제 Flutter 코드에서 구글 로그인을 구현합니다.

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

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

class SignInScreen extends StatefulWidget {
  @override
  _SignInScreenState createState() => _SignInScreenState();
}

class _SignInScreenState extends State<SignInScreen> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  Future<User?> _signInWithGoogle() async {
    final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
    if (googleUser == null) {
      return null; // 사용자가 로그인 과정을 취소한 경우
    }

    final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
    final AuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );

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

  void _signOut() async {
    await _auth.signOut();
    await _googleSignIn.signOut();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Sign-In'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                User? user = await _signInWithGoogle();
                if (user != null) {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => HomeScreen(user: user)),
                  );
                }
              },
              child: Text('Sign in with Google'),
            ),
            ElevatedButton(
              onPressed: _signOut,
              child: Text('Sign out'),
            ),
          ],
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final User user;

  HomeScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Signed in as: ${user.displayName}'),
            Text('Email: ${user.email}'),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 사용자가 구글 계정을 통해 로그인하고 로그아웃할 수 있도록 하는 예제입니다. GoogleSignIn 객체를 사용하여 구글 로그인 흐름을 관리하고, FirebaseAuth를 사용하여 Firebase 인증을 처리합니다.

4. 결과 테스트

이제 애플리케이션을 실행하여 구글 로그인을 테스트할 수 있습니다.

1. flutter run 명령어를 사용하여 애플리케이션을 실행합니다.
2. "Sign in with Google" 버튼을 클릭하여 구글 로그인 화면을 엽니다.
3. 구글 계정을 선택하고 로그인을 완료합니다.
4. 로그인 후, Home 화면으로 이동하여 사용자의 이름과 이메일을 확인합니다.
5. "Sign out" 버튼을 클릭하여 로그아웃합니다.

결론

Flutter에서 구글 로그인을 통합하면 사용자가 구글 계정을 통해 쉽게 로그인할 수 있습니다. Firebase Authentication과 Google Sign-In 패키지를 사용하여 간편하게 구글 로그인을 설정할 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에 구글 로그인 기능을 통합해보세요. 구글 로그인을 통해 사용자에게 편리한 인증 방법을 제공할 수 있습니다.