[Flutter x Firebase] 구글 소셜로그인 google social Login + keytool 사용법

오랜만이에요!! 그만큼 개발 외에 일이 그동안 너무 바빴는데요! 

다시 열심히 개발블로그도 시작해보도록 하겠습니다ㅎㅎㅎ

 

오늘은 Firebase를 이용한 구글 소셜로그인을 만들어 볼거에요.

이전 firebase에 앱 등록하기 과정을 완료했다는 가정하에 바로 시작하겠습니다!

(firebase 앱 등록은 아래링크 참고)

https://dev-vlog200ok.tistory.com/22?category=944330 

[Flutter #3] Firebase 연동하기(android) 1

 

여기서 추가로, 소셜로그인시 hasKey를 보관하기위해 SHA-1이 필요합니다!

따라서 처음 firebase-앱 연동시에 SHA인증서를 입력하지 않으신 분은 반드시 따라해주세요!

 

keytool을 사용해 SHA인증서 받기

( keytool은 Keystore 기반으로 인증서와 키를 관리할 수 있는 커맨드 방식의 유틸리티로 JDK 에 포함되어 있고, 커맨드 방식의 openssl 과 비슷한 용도로 사용할 수 있는 프로그램입니다.)

 

firebase 프로젝트 > 프로젝트 설정 에 들어가서 아래의 SHA인증서->디지털 지문추가를 해줄거에요.

이 인증서는 어디서 받을 수 있냐! 바로 keytool을 이용하게

(※ windows 에서 keytool을 사용하기 위한 선행 작업 - JDK가 설치되어 있고 환경 변수도 셋팅이 되어 있어야 함)

 

 

이제 아래의 명령어를 실행하고 위의 비번을 입력하면 잘 작동됩니다.

key tool -list -v

---

이제 공식문서를 따라 아래의 명령어를 입력해 SHA1을 받아보겠습니다.

첫줄 슬래시는 지우고 아래와 같이 명령어 입력

비번은 무조건 android 로 입력(keytool -list -v에 입력한 비번 아님!)

SHA1이 나왔습니다~~ 

이제 앞서 firebase 프로젝트 설정에서 SHA인증서 지문 추가를 누르고 붙여넣기해 주세요.

 

사용자 인증을 위한 1단계 준비가 드디어 끝났습니다... ㅠㅠㅠㅠㅠ

이제 본격적인 소셜로그인 구현을 해보겠습니다.

---

 

Firebase Authentication

 

 

저는 Google 소셜로그인을 만들거라서 Google을 선택하였습니다.

구글 클릭 - 프로젝트이름/이메일 선택 후 완료 

 

 

 

사용될 패키지!

 

 

 

installing을 위해 pubspec.yaml에 추가(저장하면 자동으로 flutter pub get이 실행됩니다.)

dependencies:
  google_sign_in: ^5.0.7
  firebase_core: ^1.5.0
  firebase_auth: ^3.0.2

 

이용될 페이지에 import해주세요!

import 'package:google_sign_in/google_sign_in.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';

---

모든 준비가 끝났습니다!

이제 코드치러 거거거거거~~~~

 

 

stream:FirebaseAuth.instance.authStateChanges()   //로그인 여부 판별

 

 

 

https://firebase.flutter.dev/docs/auth/social

Social Authentication | FlutterFire

위의 docs에서 아래의 코드를 복사해서 로그인 화면에 해당하는 login_screen.dart(예시)에 넣어줍니다.

//로그인 페이지의 dart파일내에 추가!
  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);
  }

 

 

 

 

 

 

 

---

ERROR

I/System.out: (HTTPLog)-Static: isSBSettingEnabled false

android:usesCleartextTraffic="true" //AndroidManifest.xml <application> 태그 내에 입력

 

 

 

 

---

 

Reference

https://debaeloper.tistory.com/62

Firebase_auth - Android 설정 (windows10/VSCode) #01

https://velog.io/@ohseungo/Flutter-with-Firebase-Google-%EB%A1%9C%EA%B7%B8%EC%9D%B8-1-%EA%B0%9C%EC%9A%94

Flutter with Firebase - Google 로그인 #1 개요

 

streamBuilder/FutureBuilder 관련

https://devmg.tistory.com/183

[Flutter]플러터 Futurebuilder / Streambuilder란??

https://young-duck.tistory.com/m/56?category=849826 

StreamBuilder vs FutureBuilder 스트림빌더 / 퓨처빌더

https://m.blog.naver.com/handong217/222145028756

[Flutter Firebase] _ StreamBuilder , FutureBuilder / 데이터 읽어드리기