Firebase - Google 로그인 / 로그아웃 #02

Firebase sns_login 두 번째 시간이다.  오늘은 구글 로그인을 구현하기로 한다. 

Flutter & Firebase console 세팅이 필요하다면 아래 지난 포스팅을 선행학습하면 된다.

지난 포스팅 바로기가  >>>  Firebase_auth - Android 설정 (windows10/VSCode) #01

 

 

Index 

• Firebase Autentication 설정
• pub.dev - google_sign_in 패키지 설정 
• Google 로그인 / 로그아웃 구현

 

Firebase Autenication 설정

Firebase 콘솔로 이동해서 Autentication으로 이동하고 "시작하기" 클릭

firebase Autentication

 

로그인 제공업체 종류 확인 및 구글 로그인 선택

 

로그인 제공업체 목록

사용 설정 활성화 > 프로젝트 공개용 이름 작성 > 프로젝트 지원 이메일 선택 > "저장"클릭

 

구글 로그인 "사용 설정됨"으로 변경됨

 

구글 로그인 사용설정 ON

 

 

 

pub.dev - google_sign_in 패키지 설정 

dev.pub로 이동 > google_sign_in 검색

google_sign_in > Installing > dependencies 아래 코드 복사 

패키지 Installing Tab

pubspec.yaml 파일에 "google_sign_in: ^5.0.4" 붙여 넣기 

프로젝트 적용

 

Google 로그인 / 로그아웃 구현

login.dart 파일 생성 및 기본 코드 작성

import 'package:flutter/material.dart';
 
class Login extends StatelessWidget {
  const Login({Key key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SNS Login"),
      ),
      body: Column(
        children: [
          TextButton(
            child: Text("Google Login"),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}
 

FlutterFire

 

login.dart 파일에 복사한 코드 붙여 넣기 

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
 
class Login extends StatelessWidget {
  const Login({Key key}) : super(key: key);
 
  Future<UserCredential> signInWithGoogle() async {
    // Trigger the authentication flow
    final GoogleSignInAccount googleUser = await GoogleSignIn().signIn();
 
    // Obtain the auth details from the request
    final GoogleSignInAuthentication googleAuth =
        await googleUser.authentication;
 
    // Create a new credential
    final credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
 
    // Once signed in, return the UserCredential
    return await FirebaseAuth.instance.signInWithCredential(credential);
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SNS Login"),
      ),
      body: Column(
        children: [
          TextButton(
            child: Text("Google Login"),
           onPressed:signInWithGoogle,
          ),
        ],
      ),
    );
  }
}
 

 home.dart 로그인 상태확인 코드 추가

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:test_sns_login/src/pages/login.dart';
 
class Home extends StatelessWidget {
  const Home({Key key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: StreamBuilder(
          stream: FirebaseAuth.instance.authStateChanges(),
          builder: (BuildContext context, AsyncSnapshot<User> snapshot) {
            if (!snapshot.hasData) {
              return Login();
            } else {
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text("${snapshot.data.displayName}님 반갑습니다."),
                    TextButton(
                      child: Text("로그아웃"),
                      onPressed: () {
                        FirebaseAuth.instance.signOut();
                      },
                    ),
                  ],
                ),
              );
            }
          },
        ),
      ),
    );
  }
}
 

1. Scaffold 를 SafeArea로 감싼다 ( 단순히 핸드폰의 안전한 영역으로...)

2. 기존 코드에서 AppBar는 삭제 

3. body 에 StreamBuilder 를 추가하고 stream으로 FirebaseAuth.instance.authStateChanges()를 호출함.

 

로직설명 

1. app이 실행되고 firebase core 연결이 정상이면 home화면을 호출한다. 

2. home에서 snapshot에 data가 있는지 확인하고 ( snapshot.hasData ) 없다면 로그인 화면을 호출한다.

3. home에서 snapshot에 data가 있는지 확인하고 ( snapshot.hasData ) 있다면 Text위젯에 displayName을 보여준다.

4. 로그인이 된 상태에서 "로그아웃" 버튼을 누르면 다시 Login 페이지로 이동한다.