[flutter] 한번에 플러터 앱 만들기 #2 - 플러터 로그인 버튼 구현

 [flutter] 한번에 앱 만들기 #1 - 파이어베이스 & 구글 로그인

• 파이어베이스 ui 로그인 공식 패키지: firebase_ui_auth.git

저번 화에서는 로그인을 구현할때 기본적으로 필요한 서버 설정을 다뤘습니다. (파이어베이스, 구글 콘솔)
이번 화에서는 본격적으로 플러터 코드 구현에 대한 것을 다뤄볼 생각입니다.

 

1.  구글 로그인 버튼 브랜딩 가이드라인

구글은 로그인 버튼을 만들 때, 권고사항이 있습니다. 추후 문제를 방지하려면 가이드라인은 준수해야 합니다.

[구글 - Google's Sign-In Branding Guidelines]
[유튜브 - YouTube API Services - Branding Guidelines]
[플레이 게임 - Play Games Branding Guidelines]

제 깃허브를 클론하여 사용하신다면 2022년 12월 기준으로 준수하였습니다. 관련 에셋들을 확인하실 수가 있습니다.
유튜브 API 스코프를 사용하실 땐, 유튜브 관련 규정을 준수하여 주시고, 게임이라면 플레이 게임에 맞는 가이드라인을 준수하시면 됩니다. 

• 버튼 색상: 밝은색 (Light, White, #FFFFFF) or 파랑 (Dark, Blue, #4285F4)
• 아이콘색상: 변경불가
• 폰트: Roboto (Roboto-Medium.ttf, 플러터 폰트 적용하기 참고 )
• 크기: 앱에 맞게 변형 가능하나, 비율은 유지하여 구글 아이콘의 비율이 변경되면 안됨
• 패딩: 이미지 참고

구글 로그인 버튼

 

2. 구글 로그인 버튼 위젯 [패키지 활용]

1번 내용은 가이드라인을 준수해야하지만,
사실 따로 구현할 필요없이 위와 같이 구글에서 만들어놓은 클래스를 활용하면 되겠습니다. ^^;

위 브랜딩 가이드와 다른 부분이 있는 것 같지만 구글에서 만든 것이니까요, 믿고 쓰도록 합시다.

• 파이어베이스 공식 oauth 패키지: firebase_ui_oauth_google: ^1.0.8

import 'package:firebase_ui_oauth_google/firebase_ui_oauth_google.dart';

GoogleSignInButton(loadingIndicator: [로딩 위젯], clientId: "[구글 클라이언트 ID]")

이렇게 호출해서 사용하시면 됩니다. 아래는 구글 로그인이 포함된 앱 메인 전체 코드입니다.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:firebase_ui_oauth_google/firebase_ui_oauth_google.dart';

const GOOGLE_CLIENT_ID =
    "514950904660-pibfd53qck3jecinbvqc3rmvp1tiafq9.apps.googleusercontent.com";

const GOOGLE_CLIENT_ID = "[구글 클라이언트 아이디]";

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  try {
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );
  } catch (e, stacktrace) {}
  FirebaseUIAuth.configureProviders([
    GoogleProvider(clientId: GOOGLE_CLIENT_ID),
  ]);
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '플러터 로그인 샘플 앱',
      theme: ThemeData(
        fontFamily: GoogleFonts.roboto().fontFamily,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '플러터 구글 로그인 데모'),
    );
  }
}


class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: const Center(
          child: GoogleSignInButton(
            loadingIndicator: [로딩 위젯], // CircularProgressIndicator()
            clientId: GOOGLE_CLIENT_ID,
          ),
        ));
  }
}

 

2. OAuth 2.0 인증 다루기

이제 구글 버튼이 성공적으로 디자인되었지만, 로그인을 사용하려면 한단계가 필요합니다. 앱이 구글 로그인을 사용해야 하는데, 다른 사람이 우리의 앱인척 "구글 로그인"을 사용하면 구글 측에선 도용문제가 발생하게 됩니다.

따라서 우리 앱이 우리가 만든 것이다 인증하기 위한 절차가 필요합니다.

구글 로그인을 사용하려면 ..

1. [파이어베이스 콘솔]  프로젝트 설정 - 인증 - 구글 로그인 사용(enable)" 체크
2. [파이어베이스 콘솔] 일반 - 안드로이드앱 - google-services.json 다운로드
3. [로컬 개발환경] -  [플러터 프로젝트]/anroid/app/google-services.json 업데이트
4. [로컬 개발환경] -  firebase SDK 를 사용하기 위해 [플러터프로젝트]/android/build.gradle 업데이트
5. [파이어베이스 콘솔] 현재 개발에 사용중인 컴퓨터의 SHA-1 키를 파이어베이스에 등록
   (구글 공식 참고, 한국어 블로그: https://kyungsnim.net/200)
   [로컬 개발환경] 에서 SHA-1 조회방법: [플러터 프로젝트]/android/ 에서 아래 명령어 입력

./gradlew signingReport

 

3. 로그인 확인

아래와 같이 로그인에 성공했을때 팝업창을 띄우도록 설정해줍니다.

GoogleSignInButton(
    loadingIndicator: const CircularProgressIndicator(),
    clientId: GOOGLE_CLIENT_ID,
    onSignedIn: ((credential) async {
      await showDialog(
          context: context,
          builder: (context) {
            return const AlertDialog(
              title: Text("로그인 성공"),
            );
          });
    }),
    onCanceled: () => print('cancel'),
    onError: (e) => print('error $e'),
),

 

네! 잘 되었네요. 로그인이 잘 되는 것을 확인할수 있었습니다.
로그인에 성공했으니 다음편은 페이지 전환에 대해서 다뤄보겠습니다.