플러터에서 구글 로그인 구현하기: 단계별 가이드

오늘은 플러터 앱에서 구글 로그인 기능을 구현하는 방법에 대해 상세히 알아보겠습니다.

 

1. 준비 단계

 

먼저, pubspec.yaml 파일에 필요한 패키지를 추가합니다

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^latest_version
  firebase_auth: ^latest_version
  google_sign_in: ^latest_version

 

2. Firebase 프로젝트 설정

 

a. Firebase 콘솔(console.firebase.google.com)에서 새 프로젝트를 생성합니다.

b. 앱에 Firebase를 추가하고 구성 파일을 다운로드합니다:

• Android: google-services.json
• iOS: GoogleService-Info.plist c. 다운로드한 파일을 각각 해당 플랫폼의 프로젝트 폴더에 추가합니다.

3. Firebase 초기화

 

main.dart 파일에서 Firebase를 초기화합니다

import 'package:firebase_core/firebase_core.dart';

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

 

4. 구글 로그인 서비스 구현

 

auth_service.dart 파일을 생성하고 다음 코드를 추가합니다

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

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  Future<User?> signInWithGoogle() async {
    try {
      final GoogleSignInAccount? googleSignInAccount = await _googleSignIn.signIn();
      if (googleSignInAccount != null) {
        final GoogleSignInAuthentication googleSignInAuthentication =
            await googleSignInAccount.authentication;

        final AuthCredential credential = GoogleAuthProvider.credential(
          accessToken: googleSignInAuthentication.accessToken,
          idToken: googleSignInAuthentication.idToken,
        );

        final UserCredential authResult = await _auth.signInWithCredential(credential);
        final User? user = authResult.user;

        return user;
      }
    } catch (error) {
      print('구글 로그인 에러: $error');
      return null;
    }
  }

  Future<void> signOut() async {
    await _googleSignIn.signOut();
    await _auth.signOut();
  }
}

 

5. 로그인 버튼 구현

 

login_screen.dart 파일을 생성하고 다음과 같이 구현합니다:

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

class LoginScreen extends StatelessWidget {
  final AuthService _auth = AuthService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('로그인')),
      body: Center(
        child: ElevatedButton(
          child: Text('Google로 로그인'),
          onPressed: () async {
            User? user = await _auth.signInWithGoogle();
            if (user != null) {
              print('로그인 성공: ${user.displayName}');
              // 로그인 성공 후 처리 (예: 홈 화면으로 이동)
              Navigator.pushReplacementNamed(context, '/home');
            } else {
              print('로그인 실패');
              // 로그인 실패 처리 (예: 에러 메시지 표시)
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('로그인에 실패했습니다. 다시 시도해주세요.')),
              );
            }
          },
        ),
      ),
    );
  }
}

 

6. 로그아웃 기능 구현

 

home_screen.dart 파일에 로그아웃 버튼을 추가합니다:

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

class HomeScreen extends StatelessWidget {
  final AuthService _auth = AuthService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('홈'),
        actions: [
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () async {
              await _auth.signOut();
              Navigator.pushReplacementNamed(context, '/login');
            },
          ),
        ],
      ),
      body: Center(child: Text('환영합니다!')),
    );
  }
}

 

7. 추가 설정

• iOS의 경우, Info.plist 파일에 다음을 추가합니다

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.googleusercontent.apps.YOUR-CLIENT-ID</string>
    </array>
  </dict>
</array>

Android의 경우, build.gradle (app) 파일에 다음을 추가합니다

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

 

주의사항

1. Firebase 콘솔에서 "Authentication" 섹션에서 Google 로그인을 활성화해야 합니다.
2. 프로젝트의 SHA-1 인증서 지문을 Firebase 콘솔에 추가해야 합니다.
3. 실제 앱 배포 시, 프로덕션용 SHA-1 인증서도 추가해야 합니다.

이렇게 구현하면 플러터 앱에서 구글 로그인 기능을 사용할 수 있습니다.

사용자는 자신의 구글 계정으로 쉽게 앱에 로그인할 수 있으며, 개발자는 사용자 인증 정보를 안전하게 관리할 수 있습니다.

구글 로그인은 사용자에게 편리한 로그인 방식을 제공하고 개발자에게는 안전한 인증 방법을 제공합니다.

이를 통해 앱의 사용성과 보안성을 모두 향상시킬 수 있습니다.

추가 질문이나 설명이 필요한 부분이 있다면 언제든 물어보세요!

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg