Flutter _ Login 기능 구현 준비 (VScode Flutter 프로젝트에 FireBase 연동하기)

230622

 

 

---

오늘은 현재 진행중인

Music is Life라는 개인 프로젝트의

UI 구성 중 로그인 기능이 필요하여

정리를 같이 해보도록 하겠다.

 

 

---

어떤 응용프로그램에

로그인 기능을 구현하는 방법은 다양하다.

 

조건문을 이용하여 데이터 비교로 구현하거나

DataBase를 연동하여 SQL문으로 확인하여 구현하는 방법이나

특정 웹이나 앱의 프레임워크의 Authorization을 이용한 방법등이 있는데

 

Flutter의 경우 

조금 특별하게 Google에서 인수한

FireBase라는 플랫폼으로 구현할 수 있다.

 

---

FireBase는

위와 같이 여러 빌드를 사용할 수 있는

웹 애플리케이션 플랫폼인데

 

인증이나 실시간 데이터베이스의 기능등을 사용하여

회원가입 기능이나 로그인 기능을 구현할 수 있고

 

나머지 기능들 또한

Flutter와 FireBase를 연동하여

조금 더 업그레이드된 서비스를 만들 수 있을 것 같다.

 

---

1.  FireBase와 Flutter 프로젝트 연동하기

 

Flutter3.0 버전부터

이전과 다르게 이제 FireBase 공식 홈페이지에서

쉽게 Flutter를 연동할 수 있는데

 

https://firebase.google.com/docs/flutter/setup?hl=ko&platform=android

Flutter 앱에 Firebase 추가

위 공식 문서를 따라

지금부터 연동을 해보겠다.

 

 

가장 먼저

준비해야 할 목록들이 나와있는데

 

기본적으로 Flutter로 프로젝트를

진행하고 있는 상황으로

 

편집기 또는 IDE 설치 부분에서는 VScode를 사용중이고

에뮬레이터는 안드로이드 에뮬레이터를 설치 했고

Flutter SDK 또한 설치되어있다.

 

( Flutter Doctor로 확인했을 때 문제없으면 될듯하다. )

 

그리고 Firebase에 로그인까지 해주자!

( Google 계정으로 손쉽게 가능 )

---

그리고 가장 먼저 해야 할 것은

Firebase CLI 설치다.

 

https://firebase.google.com/docs/cli?hl=ko#setup_update_cli

Firebase CLI 참조  |  Firebase 문서

 

위 링크에서 손쉽게 설치할 수 있는데

 

Firebase Command Line Interface는

Firebase 프로젝트를

관리, 조회, 배포할 수 있는 다양한 도구를 제공하는

터미널로 생각하면 된다.

 

 

각 운영체제에 맞게 설치하는 방법들이 나와있으며

Windows 로 설치를 해보겠다.

 

 

Windows 에서는현재 독립 실행형 바이너리와 npm 두 가지를 방향으로다운 받을 수 있는데

 

추천 대상을 참고하여다운받으면 된다.

 

이때 중요한 점은Node.js가 설치되어있어야 한다.

 

https://nodejs.org/ko

Node.js

만약 Node.js가 설치되어 있지 않다면

위 링크를 통해 설치가 가능하다.

 

현재 나는 Node.js가 설치되어 있지 않기 때문에

같이 설치 해보겠다.

 

---

홈페이지에 들어가면

간단한 Node.js 소개와

 

두 가지 다운로드 버전을 제시하는데

항상 이런것은 최신보다는

안정적인 버전이 Error도 덜하기 때문에

 

왼쪽 버전으로 다운 받겠다.

 

다운로드한 파일을 실행하고

위 화면이 뜨면 Next를 클릭한다.

 

 

약관 동의 후 Next

 

다운받을 경로를 지정하는 부분인데

이게 Node.js의 환경변수이니

 

관리자 권한이 필요한 디렉토리는 피해주는게

경험상 좋다.

 

지정했으면

Next

 

사용자 지정 설치 부분이다.

 

위와 같이 총 66MB는 필요하다고 나와있다

 

나는 그냥 Next를 눌렀다.

 

다음으로는

특정 누군가는 Native Modules인

Python과 Visual Studio Build Tools가 필요한 경우가 있기에

이것도 같이 설치할지 친절하게 물어봐 주는 구간이다.

 

우리는 Firebase연동 목적으로 CLI 깔아야 하는데

Node.js가 필요한 상황이므로

 

가볍게 Next를 누르자.

 

자 이제 설치할 준비가 완료됬냐고 물어보니

Install을 눌러주자.

 

 

잘 설치가 되고있고

약 1분 안으로 설치되는것 같다.

 

 

설치가 완료되었다는

창이 뜨면 끝이다.

 

마지막 확인을 위해

CMD (명령 프롬프트 창)을 열어

 

node -v

위와 같이 입력하여

node.js의 버전을 확인해서

 

위와 같이 버전이 잘 뜨면 성공이다.

 

만약 버전이 안뜬다면

환경변수의 문제가 있으니

 

환경변수를 설치중의 경로로 하여

다시 설정해 보면 좋을것 같다.

 

---

자 다시 Firebase CLI 설치로 돌아와서

 

위의 링크를 통해 Firebase CLI 바이너리를 다운받자.

 

다운 받은 파일을 실행 하면

 

나는 위와 같은 경고 문이 떴는데

( 이유는 모르겠다. )

 

이런 경우 위의 추가정보를 클릭하면

 

위와 같이 실행 버튼이 뜬다.

실행을 눌러보자.

 

 

그럼 위와 같이 Firebase CLI가 실행되고

몇 가지 환경을 체크 후

로그인을 해보자는 메세지와 함께

 

error reporting information 할건지 물어보면?

y를 입력해 주면 된다.

 

 

그럼 바로 구글 로그인 창이 나온다.

 

원하는 계정을 선택 후

 

권한을 허용해주면?

 

 

Firebase CLI에 로그인이 성공한다.

 

그리고 Firebase CLI에서도

로그인이 성공했다는 메세지가 출력되고

 

이제 'firebase' 와 'npm' 명령어를 쓸 수 있다고 한다.

 

firebase projects:list

 

가볍게 테스트를 위해 

위 명령어로 

firebase의 project 목록을 출력해보면?

 

현재 만든 프로젝트가 없기에

No projects found가 출력된다.

 

---

자 이제 Firebase Poject를 만들어 보자.

 

https://console.firebase.google.com

 

위 링크를 통해

Firebase Console 페이지로 이동이 가능한데

 

여기서 프로젝트 만들기를 클릭한다.

 

그리고 프로젝트 이름부터 설정하는데

구글 Firebase를 이용한 프로젝트는

수 만개 이므로 굉장히 복잡하게 짓는게 좋다고 한다.

 

이름을 정했으면

계속을 클릭!

 

구글 애널리틱스 사용할건지 물어보는 부분인데

좋은게 좋은거니 계속을 누르자.

 

애널리틱스 위치와 약관 동의 후

프로젝트 만들기 클릭!

 

 

약간의 로딩 후 프로젝트가 만들어 진다.

계속을 누르면?

 

위와 같은

내가 만든 프로젝트 Console 창이 나오고

 

나는 현재 플러터 프로젝트를

Firebase와 연동해야하니

 

Flutter 아이콘을 클릭한다.

 

 

드디어 끝이 보이는것 같다.

 

Flutter앱에 Firebase를 추가하기 위해서

Firebase CLI 설치 ( 위에서 했다. )

Flutter SDK 설치 ( 프로젝트를 만들고 있으니 당연히 있다. )

Flutter 프로젝트 만들기 ( 이것도 말해뭐해.. )

 

3가지 조건이 충족됬으니

다음!

 

 

자 여기가 굉장히 중요하다.

많이 헷갈려 하는 부분인데

 

위의 코드는 현재 나의 Flutter 프로젝트에 쓰는 것이다.

쉽게 말하면

 

현재 나는 VScode에서 Flutter를 사용중인데

위의 명령어는 VScode의 터미널에서

현재 내가 작업중인 Flutter 프로젝트로 디렉터리를 이동 후

실행하는 명령어이다.

 

위와 같이

내가 작업중인 프로젝트 디렉터리에

 

dart pub global activate flutterfire_cli

첫 번째 flutterfire_cli를 실행시키는

코드를 입력한다.

 

위와 같이 flutterfire_cli가 설치 되고

경고 문이 떴다.

 

첫 줄의 bin으로 끝나는 설치 경로를

환경 변수로 등록해야 한다는데

 

바로 윈도우 검색에 

시스템 환경변수 검색해서 들어간 다음

 

위 메세지 대로

시스템 변수의 Path에 추가해 준다.

 

그리고 VScode를 재시작 해주자.

 

다시 터미널에

 

dart pub global activate flutterfire_cli

 

명령어를 입력하면?

 

Path에 대한 불평없이 위와 같이

잘 activate 된다.

 

flutterfire configure --project=musicislife-naspace

 

그 다음 두 번째 코드를 입력하는 것인데

현재 나의 Flutter 프로젝트를

Firebase 프로젝트와 연결 시켜주는 작업이다.

 

위의 코드를 입력하면?

 

FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command.

위와 같은 에러가 떴다.

 

정말 이 에러를 해결하기 위해 

환경변수도 체크하고 구글링도 오랜시간동안한 결과

 

해결책은 바로 upgrade였다.

 

가장 큰 힌트는  firebase --version을 확인하라고 하는데

실제로 터미널에 위 명령어를 쳐도 안먹힌다.

 

이를 위한 해결 방법으로는 

 

바로 위의 코드였다.

최신의 Firebase CLI를 요구하는것 같은데

 

아이러니하게도

우리는 npm으로 다운받지 않았지만

저 박스의 코드를 입력해야 됬나보다..

 

npm install -g firebase-tools

말도 안되게 위의 코드를 VScode의 터미널에 입력하자

업데이트가 이루어졌다...

 

그리고 다시 VScode의 터미널에

flutterfire configure --project=musicislife-naspace

입력하자...

 

진행이 되었다..

 

그리고 먼저 어떤 플랫폼을 선택할건지

목록이 나오는데

 

이때 나는 그냥 모든 플랫폼을 선택하기 위해

Enter를 눌렀다

 

그리고 잠시 후 플랫폼 별로 무언가 깔기 시작하고

 

위와 같이 Id가 생성되며

 

lib/firebase_options.dart 파일이 생성된다.

 

이제 연동이 끝난것이다.

 

flutter pub add firebase_core

추가적으로 터미널에서

firebase_core도 pub add 해주자

 

 

마지막 단계로

Firebase 초기화 및 플러그인 추가를 할 수 있는데

 

현재 나의 프로젝트의

main.dart로 와서

 

main()를 위와 같이 앱이 실행될때

초기화 되게 바꿔주었다.

 

이제 Firebase 연동이 끝이 났고

위와 같은 플러그인들을 사용할 수 있게 되었다!!