플러터:인증(Firebase 인증) 편집하기 (부분)

= 구글 로그인 =
안타깝게도 Window 앱에선 지원하지 않는다. 기본적으로 플러터는 모바일과 웹을 위한 것.

=== 사전 준비 ===
{| class="wikitable"
|+
!단계
!설명
!비고
|-
|Firebase 콘솔 설정
|파이어베이스 콘솔에서 제공업체를 선택한다.
Authentication → Sign-in Method → Google 활성화
로그인 방법 > 새 제공업체 등에서 선택한다.
|https://console.firebase.google.com/project/ktalk-d20ab/authentication/providers
|-
|(웹의 경우)
구글 클라우드 설정
|클라우드 콘솔 설정.(반드시 파이어베이스와 같은 프로젝트로 진행해야 한다.)

* https://console.cloud.google.com 접속
* Firebase 프로젝트와 연결된 프로젝트 선택

* 왼쪽 메뉴: API 및 서비스 → OAuth 동의 화면, 외부 선택 → 만들기
* 앱 이름, 이메일 입력 → 저장

* 왼쪽 메뉴: API 및 서비스 → 사용자 인증 정보
* 상단: + 사용자 인증 정보 만들기 → OAuth 2.0 클라이언트 ID
* 애플리케이션 유형: 웹 애플리케이션
* 이름: <code>Web Client</code> (아무거나)
* 만들기 클릭

* 생성되면 팝업에서 클라이언트 ID 복사 (xxx.apps.googleusercontent.com 형식)

index.html에 추가

<meta name="google-signin-client_id" content="여기에_클라이언트_ID_붙여넣기.apps.googleusercontent.com"> 형식으로.



아래 링크에서 People API를 활성화해준다.(프론트에서 로그인을 처리하기에 과정이 좀 있네;;)

* 또는 Google Cloud Console → '''API 및 서비스''' → '''라이브러리'''
|
* 안드로이드 Ios의 경우 거의 작업 없이 진행됨.
|-
|Firebase CLI 설치
+ 로그인
|
* npm install -g firebase-tools
* firebase login
|nodeJS 설치되어 있어야 함. 없다면 https://nodejs.org/<nowiki/>참고.
firebase --version 에서 숫자가 나오면 정상.
|-
|FlutterFire CLI 설치
|dart pub global activate flutterfire_cli
|
|-
|Firebase 프로젝트 연동
|flutterfire configure
→ Android/iOS 설정 파일 자동 생성
|
* 파이어베이스에서 작성해둔 프로젝트 중 하나를 고르게 된다. 여기에 맞게 설정 파일을 자동으로 생성.
* 콘솔에서 제공업체에 변경이 발생할 때마다 다시 진행해야 한다.
|-
|pubspec.yaml 설정
|<syntaxhighlight lang="yaml">dependencies:
  firebase_core: ^3.8.1
  firebase_auth: ^5.3.3
  google_sign_in: ^6.2.2  # 공급업체에 따라 추가해준다.</syntaxhighlight>
|
|-
|패키지 설치
|flutter pub get
|
|}

== 구현 코드 ==
<syntaxhighlight lang="dart">
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';
import 'firebase_options.dart';

// 앱 시작 전에 Firebase를 초기화해야 함
void main() async {
  // Flutter 엔진이 완전히 초기화되도록 보장 (Firebase 사용 전 필수)
  WidgetsFlutterBinding.ensureInitialized();
  
  // Firebase 초기화 (firebase_options.dart 파일 사용) await로 초기화 완료될 때까지 기다려야 함
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google 로그인 학습',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const GoogleSignInPage(),
    );
  }
}

class GoogleSignInPage extends StatefulWidget {
  const GoogleSignInPage({super.key});

  @override
  State<GoogleSignInPage> createState() => _GoogleSignInPageState();
}

class _GoogleSignInPageState extends State<GoogleSignInPage> {
  // Firebase Authentication 인스턴스 (사용자 인증 관리)
  final FirebaseAuth _auth = FirebaseAuth.instance;
  
  // Google Sign-In 인스턴스 (구글 로그인 처리)
  final GoogleSignIn _googleSignIn = GoogleSignIn();
  
  // 현재 로그인된 사용자 정보를 저장할 변수
  User? _user;

  @override
  void initState() {
    super.initState();
    // 앱 시작시 현재 로그인 상태 확인
    _user = _auth.currentUser;
  }

  // 구글 로그인 함수
  Future<void> _signInWithGoogle() async {
    try {
      // 1. Google Sign-In 팝업 띄우기 (사용자가 구글 계정 선택)
      final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
      
      // 사용자가 로그인 취소한 경우
      if (googleUser == null) {
        print('로그인 취소됨');
        return;
      }

      // 2. 선택한 구글 계정의 인증 정보 가져오기
      final GoogleSignInAuthentication googleAuth = 
          await googleUser.authentication;

      // 3. Firebase용 인증 자격증명 생성
      //    accessToken: 구글 API 접근용 토큰
      //    idToken: 사용자 신원 확인용 토큰
      final credential = GoogleAuthProvider.credential(
        accessToken: googleAuth.accessToken,
        idToken: googleAuth.idToken,
      );

      // 4. Firebase에 자격증명으로 로그인
      final UserCredential userCredential = 
          await _auth.signInWithCredential(credential);

      // 5. 로그인 성공 - UI 업데이트
      setState(() {
        _user = userCredential.user;
      });

      print('로그인 성공: ${_user?.displayName}');
      
    } catch (e) {
      // 로그인 실패시 에러 출력
      print('로그인 실패: $e');
      
      // 사용자에게 에러 메시지 표시
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('로그인 실패: $e')),
        );
      }
    }
  }

  // 로그아웃 함수
  Future<void> _signOut() async {
    try {
      // Firebase에서 로그아웃
      await _auth.signOut();
      
      // Google Sign-In에서도 로그아웃 (다음 로그인시 계정 선택 가능)
      await _googleSignIn.signOut();

      // UI 업데이트
      setState(() {
        _user = null;
      });

      print('로그아웃 성공');
      
    } catch (e) {
      print('로그아웃 실패: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('구글 로그인 학습'),
        centerTitle: true,
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: _user == null
              ? _buildSignInUI()  // 로그인 안된 상태 UI
              : _buildUserInfoUI(), // 로그인된 상태 UI
        ),
      ),
    );
  }

  // 로그인 버튼 UI (로그인 전)
  Widget _buildSignInUI() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Icon(
          Icons.account_circle,
          size: 100,
          color: Colors.grey,
        ),
        const SizedBox(height: 30),
        const Text(
          '구글 계정으로 로그인하세요',
          style: TextStyle(fontSize: 18),
        ),
        const SizedBox(height: 30),
        
        // 구글 로그인 버튼
        ElevatedButton.icon(
          onPressed: _signInWithGoogle,
          icon: const Icon(Icons.login),
          label: const Text('Google로 로그인'),
          style: ElevatedButton.styleFrom(
            padding: const EdgeInsets.symmetric(
              horizontal: 30,
              vertical: 15,
            ),
            textStyle: const TextStyle(fontSize: 16),
          ),
        ),
      ],
    );
  }

  // 사용자 정보 UI (로그인 후)
  Widget _buildUserInfoUI() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 프로필 사진 (없으면 기본 아이콘)
        _user?.photoURL != null
            ? CircleAvatar(
                radius: 50,
                backgroundImage: NetworkImage(_user!.photoURL!),
              )
            : const CircleAvatar(
                radius: 50,
                child: Icon(Icons.person, size: 50),
              ),
        const SizedBox(height: 20),
        
        // 사용자 이름
        Text(
          _user?.displayName ?? '이름 없음',
          style: const TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 10),
        
        // 이메일
        Text(
          _user?.email ?? '이메일 없음',
          style: const TextStyle(
            fontSize: 16,
            color: Colors.grey,
          ),
        ),
        const SizedBox(height: 10),
        
        // UID (Firebase에서 부여한 고유 ID)
        Text(
          'UID: ${_user?.uid}',
          style: const TextStyle(
            fontSize: 12,
            color: Colors.grey,
          ),
          textAlign: TextAlign.center,
        ),
        const SizedBox(height: 30),
        
        // 로그아웃 버튼
        ElevatedButton.icon(
          onPressed: _signOut,
          icon: const Icon(Icons.logout),
          label: const Text('로그아웃'),
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.red,
            foregroundColor: Colors.white,
            padding: const EdgeInsets.symmetric(
              horizontal: 30,
              vertical: 15,
            ),
            textStyle: const TextStyle(fontSize: 16),
          ),
        ),
      ],
    );
  }
}

</syntaxhighlight>