최근 Flutter에서 앱 개발 학습을 시작한 taikt입니다.

유저 로그인을 하는 것 같은 앱을 만들려고 생각해, Firebase Authentication과 Google 로그인을 사용해 유저 인증을 해 보았으므로 비망록도 할 수 있어 순서를 남깁니다.

Flutter 프로젝트 만들기

Flutter 프로젝트는 공식을 참고로 작성.
htps : // f ぅ라고 r. v / 두 cs / 게s ts r d / in s ta l

Firebase 프로젝트 설정

Firebase Authentication 기능을 이용하기 위해서는 우선 Firebase 설정을 합니다.

프로젝트 만들기

먼저 Firebase 콘솔에서 프로젝트를 만듭니다.
- 프로젝트 이름 입력
- Google 애널리틱스 설정을 권장하지만 이번에는 테스트이므로 설정하지 않습니다.
- 프로젝트 만들기

앱 설정

앱에서 Firebase를 사용하기 위해 앱을 설정합니다.
이번에는 Android 앱을 설정했습니다.

프로젝트 홈 화면에서 Android를 선택합니다.


앱 정보를 입력합니다.

Android 패키지 이름

앱 수준 bundle.gradle 파일의 applicationId에 나열되어 있습니다. (android/app/bundle.gradle)

디버깅을 위한 서명 인증서 SHA-1

Google 로그인 사용에 필요하므로 여기도 설정합니다.

keytool을 사용하여 SHA-1 해시를 얻을 수 있습니다.

keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

google-service.json을 Flutter 앱에 추가

Firebase 구성 파일(google-service.json)을 다운로드하여 Flutter 프로젝트의 android/app/ 아래에 배치합니다.

Gradle 파일 수정

google-services 플러그인을 사용할 수 있습니다.

프로젝트 수준 gralde 파일에 google-services 플러그인을 추가합니다.

android/bundle.gradle

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

앱 레벨 gradle 파일에 다음을 추가.

android/app/bundle.gradle

dependencies {
//...
}
pply plugin: 'com.google.gms.google-services'

로그인 처리 구현

먼저 Firebase 및 Google 로그인 플러그인을 Flutter에 추가합니다.

pubspec.yml

firebase_core: 0.4.4+3
firebase_auth: 0.16.0
google_sign_in: ^4.0.14

다음에 로그인 처리를 실시하는 화면을 구현합니다.

Login.dart

import 'package:flutter/material.dart';
// https://pub.dev/documentation/google_sign_in/latest/google_sign_in/google_sign_in-library.html
import 'package:google_sign_in/google_sign_in.dart';
import 'package:firebase_auth/firebase_auth.dart';

class Login extends StatefulWidget {
  @override
  _Login createState() => _Login();
}

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

  Future<FirebaseUser> _handleSignIn() async {
    GoogleSignInAccount currentUser = _googleSignIn.currentUser;

    try {
      currentUser ??= await _googleSignIn.signInSilently();
      currentUser ??= await _googleSignIn.signIn();
      if (currentUser == null) return null;

      final GoogleSignInAuthentication googleAuth = await currentUser.authentication;
      final AuthCredential credential = GoogleAuthProvider.getCredential(
          idToken: googleAuth.idToken,
          accessToken: googleAuth.accessToken
      );
      final FirebaseUser user = (await _auth.signInWithCredential(credential)).user;
      return user;
    } catch(e) {
      print(e);
    }
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text('Chat')
      ),
      body: Center(
          child: Column(
            children: <Widget>[
              SizedBox(height: 24.0),
              FlatButton(
                  child: Text('SignIn'),
                  onPressed: () => _handleSignIn()
                      .then((FirebaseUser user) {
                        print(user);
                        Navigator.pushReplacementNamed(context, "/");
                  }).catchError((e) => print(e))
              )
            ],
          )
      ),
    );
  }
}

이제 Google 로그인으로 인증한 사용자의 정보를 얻을 수 있습니다.

인증한 사용자의 정보를 표시해 봅니다.

Home.dart

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

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  FirebaseUser user;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  Future<void> _handleSignOut(context) async {
    await FirebaseAuth.instance.signOut();
    try {
      await _googleSignIn.signOut();
    } catch (e) {
      print(e);
    }

    Navigator.pushReplacementNamed(context, "/");
  }

  @override
  void initState() {
    super.initState();
    FirebaseAuth.instance
        .currentUser()
        .then((currentUser) => {user = currentUser});
  }

  @override
  Widget build(BuildContext context) {
    print(this.user.displayName);
    return Scaffold(
        body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(user.displayName),
                FlatButton(
                    child: Text('SignOut'), onPressed: () => _handleSignOut(context))
              ],
            )
        )
    );
  }
}

Google 계정의 사용자 이름이 표시되었습니다.

참고

Firebase 프로젝트 설정
htps : // 푹 빠져라. 오, ぇ. 이 m/두 cs/fぅ는 r/세츠 p? hl = 그럼

로그인 처리 주위
htps // 푸 b. V / Pac 게이 s / 흠뻑 _ th