Flutter with Firebase (Flutter와 Firebase 연결하기)

Flutter로 인증을 구현하려고 하는데,

각종 Social Service를 통해 가입을 할 수 있도록 하려면 왠지 힘들것 같다.

그런데, Firebase를 이용하면

이 부분을 손쉽게 할 수 있다고 해서 한 번 알아보고자 한다.

1. Flutter Project 생성

   - 기본 환경 구축은 아래 링크를 통해서 진행했다고 가정하고...

      - Flutter 설치 : https://www.whatwant.com/entry/Flutter-Install-Flutter-설치하기-Windows

      - Flutter with VSCode : https://www.whatwant.com/entry/Flutter-with-Visual-Studio-CodeVSCode

   - Flutter로 로그인 페이지를 꾸밀 프로젝트를 하나 생성하자.

   - 이름 정해주고, 위치 잡아주면 열심히 기본 프로젝트 생성된다.

   - 일단 여기까지만 해놓고... Firebase로 넘어가자.

2. Firebase Project 생성

   - 가입/로그인은... Google 계정으로 가뿐하게 하시면 되고...

   - 시작하고 프로젝트 만들기에 들어가보자.

   - 이름은 마음에 드는 것으로...

   - 당장은 애널리틱스에 대해서 고려하지 않을거지만, 왠지 안하면 섭섭하니...

   - 아직 뭔지 모르겠지만... 뭐 그냥 해보자.

   - 이제 마무리다~ 고고!! 고고!!

   - 그러면, 예쁜 페이지가 짠~!!

3. Android App에 Firebase 추가

   - Flutter와 Firebase 사이에 연결고리를 추가하는 과정이다.

   - 위 홈페이지 프로젝트 이름 밑에 동그란 아이콘 3개가 보일 것이다. 가운데에 있는 안드로이드를 클릭하자

   - 응?! 패키지 이름 정해준 적 없는데?!

   - command-line으로 Flutter 프로젝트를 생성했으면 명시했겠지만, VSCode에서는 그냥 이름으로 생성했는데...

   - 찾아보자.

   - 아까 생성한 Project에서 android - app - src - main 경로에 있는 "AndroidManifest,xml" 파일을 보면 package 이름이 보인다.

   - 패키지 이름은 그렇게 넣어주면 되고... 닉네임은 그냥 마음대로 넣으면 되고... 어?! 인증서?!

   - 물음표에 마우스 올리면 위와 같이 설명이 나온다. 참조할 페이지 클릭!

   - 개발용으로 쓰이는 key값은 이미 있기에 그걸로 불러오면 된다.

   - 위와 같이 사용자 계정 폴더에 있는 .android 디렉토리 밑에 보면 위와 같이 파일들이 주르륵 있는 것이 보일 것이다.

   - PowerShell 실행해서 위의 홈페이지에 있는 명령어를 실행해야 하는데...

   - 아뿔사~ JDK가 없다. ㅋㅋㅋ

   - OpenJDK 접속

      - https://github.com/ojdkbuild/ojdkbuild

   - 일단 LTS 버전 중에서 11 버전의 msi 다운로드 받아서 설치했다.

   - PowerShell 재시작 하고...

   - 잘된다 !!!

> keytool -list -v -alias androiddebugkey -keystore C:\Users\xxx\.android\debug.keystore

   - 비밀번호를 갑자기 물어본다고 당황하지 말고... 위의 홈페이지에 친절하게 쓰여져있다. "android"

   - 우리에게 필요한 값은? SHA1 값 !!!

   - 드디어 넣을 것 다 넣었다... 앱 등록 !!!

   - json 파일 다운로드 받아서 쩌~기 위치에 넣으란다.

   - android - app 밑에다가 넣어주면 된다.

   - 실제로 잘 들어가 있는 모습을 볼 수 있다.

   - 이제 다음~

   - 위 화면에서 녹색으로 보이는 부분을 복사해서 build.gradle 파일에 붙여넣기 하면 된다.

   - 주의할 점은 android 경로 바로 밑에 있는 build.gradle 파일의 dependencies 부분에 넣어줘야 한다.

   - 밑에 있는 것들도 마찬가지로 진행하면 된다.

   - 주의할 점은 밑에 있는 것들은 android - app 밑에 있는 build.gradle에 반영해야 된다는 점!!!

   - 첫번째 녹색 라인은 이미 반영되어 있으니, 2/3번째 녹색 라인만 위치에 맞게 넣어주면 된다.

   - 알맞게~

   - Sync는 뭐 넘어가고 이제 다음 단계로 가자!

   - 어?! 확인을 해야 한단다.

   - 놀고 있는 폰을 연결하고... (당연히 개발자 모드 열어서 USB 디버그 모드 설정해서)

   - flutter: select device 열어서

   - 연결한 스마트폰 설정하고

   - 왼쪽 4번째 아이콘 클릭해서... Run and Debug 눌러주면 된다.

   - false 뜬다고 당황하지 말고... 좀 기다리면 된다.

   - 그러면 위와 같이 수고했다는 메시지를 볼 수 있다.

에고 에고... 힘들었다.