[Flutter] - 로그인 구현 ( feat. Firebase )

 

역할분담

 

일단 로그인을 맡게 되었다.... ! 로그인 자체를 API로 구현을 해달라고 부탁을 해야하나 어떻게 해야하다가 먼저 firebase로 간단하게 구현을 해보려고 한다. 같은 구글에서 만들어서 아마.. 사용이 쉬울거라 예상이 되었다. 그리고 문서가 정말 잘 되어있어서 따라할 수 있었다. 

 

세팅 

1 . 파이어베이스에 구글 계정 연동 및 프로젝트 생성

2. 파이어베이스 CLI 설치하기 

https://firebase.google.com/docs/cli#setup_update_cli

Firebase CLI 참조  |  Firebase 문서

// firebase-CLI 사용할 수 있게해주는 패키지 npm install -g firebase-tools
 
firebase --version
// login CLI 실행확인
firebase login// 플러터 프로젝트 어디서든 사용가능하게 활성화 시켜준다. dart pub global activate flutterfire_cli

 

 

위에 커맨드를 실행시키면 위 캡쳐같이 뜨게 되는데, 저 PATH를 복사해서 터미널에 집어넣고 엔터를 누르면 shell 설정파일에 자동으로 경로 설정을 해준다고 한다. 

 

---

3.  파이어베이스 사용을 위한 설정 

flutterfire configure

현재 플러터 프로젝트를 파이어베이스와 연동합니다. 

 

여기서 이제 내가 아까 만든 프로젝트를 고르고 플랫폼을 고르면 알아서 세팅을 해준다. 

 

---

 

4. 앱 내 파이어베이스 초기화 

// firebase_core 패키지 설치flutter pub add firebase_core
// 현재 파이어베이스가 최신 상태인지 확인을 하기 위한 실행
flutterfire configure

일단 제일먼저 pubspec.yaml에 firebase_auth를 설치해주세요. 

 

https://firebase.google.com/docs/auth/flutter/password-auth

Flutter에서 비밀번호 기반 계정으로 Firebase에 인증  |  Firebase 문서

 

1. 이메일 / 비밀번호 로그인 활성화 

파이어 베이스 인증에 들어가서 이메일 / 비밀번호를 활성화 시켜줍니다.

 

2. 임시 유저 아이디 생성

 

 

3. 입력 필드 생성 

 

로그인 페이지에서 대강 짤라서 올린거긴한데 참고할겸 올려봤다. FormTextField라는 컴포넌트를 만들고, 프롭스로 필요한 컨트롤러랑, hintText( 라벨로 쓰일 문자열 ), obscureText 이렇게 3개를 넘겼는데, 각 설명은 아래와 같다.

 

TextEditingController

TextEditingController는 TextField 위젯에서 편집 중인 텍스트를 제어하는 데 사용되는 Flutter의 클래스입니다.
이 클래스를 사용하면 사용자가 TextField에 입력한 텍스트를 읽고 수정할 수 있습니다. TextEditingController를 사용하여 텍스트 필드의 초기 값을 설정하고, 텍스트 필드의 현재 값을 검색하고, 사용자가 입력한 텍스트의 변경 사항을 수신할 수 있습니다. 

 

obscureText

obscureText는 사용자가 입력한 텍스트를 가리는 데 사용되는 Flutter의 TextField 위젯의 속성입니다. obscureText가 true로 설정되면 사용자가 입력한 텍스트가 별표나 점으로 대체되어 실제 텍스트가 숨겨집니다. 이 설정은 일반적으로 다른 사람이 입력 중인 비밀번호를 볼 수 없도록 하기 위해 비밀번호 필드에 사용됩니다.

 

필드 컴포넌트는 대강 아래와 같다

 

그리고 이렇게 하면 부모쪽에서 넘겨준 Controller를 통해서 입력받은 값을 제어 할 수 있게된다. 

 

4. 로그인 함수 생성 

공홈에도 나와있는 코드 그대로지만 여기서 로딩하는 동안 스피너 돌리면서 끝나거나 실패했을때 Navigator.pop을 통해 Dialog 박스를 제거합니다. 그리고 아까 위에서 필드에 주입했던 controller를 그대로 가져와서 입력값으로 사용하고 있는것을 볼 수 있다.

 

Navigator.pop(context) 

Navigator.pop(context) is a method in Flutter that is used to remove the topmost route from the navigation stack. It is commonly used to dismiss a dialog or a screen that was previously pushed onto the navigation stack.

네이게이션 스택에서 최상단의 라우트를 제거하는 프럴터 메소드인데, 흔히 네비게이션 스택에 바로 전에 푸시된 화면 혹은 다이얼로그를 끄는데 사용합니다.

 

5. 로그인 확인 

아무 버튼이나 만들어서 onTap에 signUserIn 함수를 넣어서 실행시켜보자. 정상적으로 된다면 로그인이 될 것이다. 

 

6. 로그아웃

홈화면에 간단하게 버튼하나 만들어주고, 이거는 파이어베이스에서 제공하는 함수 그대로 넣어주면된다.