Flutter에서 Google 로그인

Flutter는 2017년 Google이 선보인 크로스 플랫폼 프레임워크로, 하나의 코드로 모바일, 웹, 데스크톱 앱을 모두 개발할 수 있는 강력한 도구입니다. Material Design과 Hot Reload와 같은 특징적인 기능들로 빠르고 효율적인 개발이 가능하며, 오늘은 Flutter 앱에서 가장 널리 사용되는 인증 방식인 Google 로그인 기능을 구현하는 방법에 대해 알아봅니다.

Flutter에서 Google 로그인

0. 로그인 완료 화면

이해를 돕기 위해 결과 화면부터 보겠습니다. 아래 Google 로그인 구현의 최종 결과 화면입니다. 사용자가 Google 계정으로 로그인한 후 기본적인 프로필 정보가 표시되는데, 프로필 이미지, 사용자 이름(makecode), 그리고 이메일 주소(makepluscode@gmail.com)를 확인할 수 있습니다. 이 정보들은 Google 계정에서 제공하는 기본 사용자 정보로, Flutter 앱에서 Google Sign-In API를 통해 안전하게 가져온 데이터입니다

1. 구글 로그인 준비사항

Google Cloud Console에서 새 프로젝트를 생성한 후, OAuth 동의 화면 설정, OAuth 클라이언트 ID 생성, 그리고 People API 활성화 작업이 필요합니다. 이 과정들은 Google 로그인 기능을 사용하기 위한 필수적인 준비 단계로, 사용자 인증과 프로필 정보 접근 권한을 설정하는 중요한 작업입니다. 구글 클라우드 콘솔에서 아래 순서대로 진행하세요.

Google Cloud Console에서 새 프로젝트를 생성합니다.
"OAuth 동의 화면"을 구성하고, 필요한 사용자 권한 범위를 설정합니다.
"사용자 인증 정보"에서 OAuth 클라이언트 ID를 생성합니다.
People API를 사용 설정합니다.

위 그림의 Google Cloud Console의 주요 메뉴는 아래 설명을 참고하세요.

프로젝트 선택 영역: 상단의 'test' 프로젝트가 선택된 부분에서 새 프로젝트를 생성하거나 선택할 수 있습니다.
OAuth 동의 화면 설정: 왼쪽 메뉴의 'OAuth consent screen'에서 앱 이름, 사용자 지원 이메일 등 기본 정보를 설정합니다.
사용자 인증 정보: 'Credentials' 메뉴에서 OAuth 클라이언트 ID를 생성하고 관리할 수 있습니다.
API 설정: 'Enabled APIs & services'에서 필요한 API를 활성화할 수 있으며, 여기서 People API를 사용 설정해야 합니다.

2. 필요한 패키지 설치

Flutter 프로젝트에서 Google 로그인 기능을 구현하기 위해서는 두 가지 패키지가 필요합니다. pubspec.yaml 파일의 dependencies 항목에 google_sign_in 패키지(버전 6.2.1)와 http 패키지(버전 1.2.0)를 추가해야 합니다.

dependencies:
  google_sign_in: ^6.2.1
  http: ^1.2.0

이 중에 google_sign_in은 Google 계정 인증을 처리하고, http는 네트워크 요청을 위해 사용됩니다.

3. 코드 구현

기본 앱 구조 생성

MyApp 클래스는 Flutter 앱의 진입점으로, MaterialApp 위젯을 반환하며 앱의 기본적인 테마와 제목을 설정합니다.

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

void main() {
  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,
        useMaterial3: true,
      ),
      home: const LoginPage(),
    );
  }
}

MaterialApp의 theme 속성에서는 기본 색상으로 파란색을 사용하고 Material3 디자인을 적용하도록 설정했습니다. home 속성에는 앱이 시작될 때 처음 보여질 화면으로 LoginPage 위젯을 지정했습니다.

로그인 페이지 구현

LoginPage 클래스는 앱의 첫 화면으로, 중앙에 'Google로 로그인' 버튼을 배치하여 사용자가 쉽게 로그인할 수 있도록 구현했습니다.

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

  Future<void> _handleSignIn(BuildContext context) async {
    try {
      final GoogleSignIn googleSignIn = GoogleSignIn(
        scopes: [
          'email',
          'profile',
        ],
      );

      final GoogleSignInAccount? account = await googleSignIn.signIn();

      if (account != null) {
        // 로그인 성공, 사용자 정보 페이지로 이동
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => UserInfoPage(user: account),
          ),
        );
      }
    } catch (error) {
      print('로그인 에러: $error');
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('로그인 중 오류가 발생했습니다.'),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google 로그인 데모'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _handleSignIn(context),
          child: const Text('Google로 로그인'),
        ),
      ),
    );
  }
}

_handleSignIn 메서드에서는 GoogleSignIn 인스턴스를 생성하고 이메일과 프로필 정보에 대한 접근 권한을 요청하며, 로그인 성공 시 사용자 정보 페이지로 자동 이동합니다. 로그인 과정에서 오류가 발생하면 SnackBar를 통해 사용자에게 오류 메시지를 표시하여 적절한 피드백을 제공합니다.

로그인 성공 페이지 구현

아래 UserInfoPage는 Google 로그인 후 사용자의 기본 정보를 보여주는 화면으로, StatelessWidget을 사용하여 구현됩니다. 화면 상단에는 CircleAvatar 위젯을 사용하여 사용자의 프로필 이미지를 둥근 원형으로 표시하고, 그 아래에 사용자의 이름과 이메일 주소를 Text 위젯으로 표시합니다.

class UserInfoPage extends StatelessWidget {
  final GoogleSignInAccount user;

  const UserInfoPage({super.key, required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('사용자 정보'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            CircleAvatar(
              radius: 40,
              backgroundImage: NetworkImage(user.photoUrl ?? ''),
            ),
            const SizedBox(height: 16),
            Text(
              '이름: ${user.displayName}',
              style: const TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 8),
            Text(
              '이메일: ${user.email}',
              style: const TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

위의 모든 요소들은 Column 위젯 안에 배치되어 있으며, 각 요소 사이에는 SizedBox를 사용하여 적절한 간격을 유지합니다. 텍스트 스타일은 fontSize: 18로 통일하여 일관된 디자인을 제공하며, 전체 내용은 Padding 위젯으로 감싸서 화면 가장자리와 적절한 여백을 유지합니다.

4. OAuth 클라이언트 ID 설정

Google 로그인을 웹에서 사용하기 위해서는, web/index.html 파일에 다음과 같은 메타 태그를 추가해야 합니다:

<head>
  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>

이때 'YOUR_CLIENT_ID'에는 Google Cloud Console에서 받은 실제 OAuth 클라이언트 ID를 입력해야 합니다. 이 클라이언트 ID는 웹 애플리케이션 유형으로 생성되어야 하며, 승인된 자바스크립트 원본과 리디렉션 URI를 적절히 설정해야 합니다.

주의할 점은 로컬 개발 시에는 다음의 URI들을 승인된 목록에 추가해야 합니다:

자바스크립트 원본: http://localhost
리디렉션 URI: http://localhost

5. 실행화면

위와 같이 구현하면 사용자가 Google 계정으로 로그인 후, 프로필 이미지와 함께 이름과 이메일 주소를 확인할 수 있는 간단한 정보 화면이 표시됩니다. 이 예제를 기반으로 로그아웃 기능을 추가하거나, 더 많은 사용자 정보를 표시하도록 확장할 수 있습니다.

Flutter와 Google Sign-In API를 활용하면 이처럼 안전하고 사용자 친화적인 로그인 기능을 쉽게 구현할 수 있습니다. 다음 포스팅에서는 이 기능을 활용하여 더 다양한 기능을 구현하는 방법에 대해 알아보도록 하겠습니다.

'프로그래밍' 카테고리의 다른 글

Flutter 애드센스 수익조회 (2)	2024.12.14
Windows에서 Flutter 개발하기 (1)	2024.12.12

Flutter에서 Google 로그인