[Flutter] Firebase Authentication - 이메일 회원가입/로그인, 구글 로그인(firebase_auth, Google_sign_in)

• 파이어베이스(Firebase)에서는 Authentication 기능을 제공합니다. 이번 포스팅에서 배워볼 것은 이메일 회원가입/로그인 방법과 구글 로그인(구글 시작하기)을 통하여 인증받는 방법을 다뤄보도록 하겠습니다. 그 외에도 애플, 페이스북, 마이크로소프트, 트위터 등의 인증기능도 제공하고 있습니다.

 

Firebase Authentication 사용하기

 

 

 

 

1. Firebase Console - Authentication 기능 활성화 하기

< 이메일/비밀전호 인증(Authentication) 활성화 >

• 파이어베이스 콘솔 - 연결된 프로젝트 선택 (좌측 이미지)
• 인증(Authentication) 선택 (우측 이미지)

 

• 인증(Authentication) 시작하기 - 처음 한번만 나옴 (좌측 이미지)
• 이메일/비밀번호 인증 선택 (우측 이미지)

 

• 이메일/비밀번호 인증 사용 설정 >> 적용

 

 

 

 

< 구글 인증(Authentication) 활성화 >

• 구글(Google) 인증(Autenticatio) 선택 (좌측 이미지)
• 구글(Google) 인증 사용 설정 >> 적용 (우측 이미지)

 

• 구글 인증은 SHA-1 인증서를 등록하라고 메시지 나옴 >> 완료 (좌측 이미지)
• SHA-1 인증서 등록 진행 - 설정 >> 프로젝트 설정 (우측 이미지)

 

• VScode Terminal 입력 (좌측 이미지)

        - keytool 명령어 사용할 수 없다는 에러가 발생한다면 JDK 설치 요망

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

• keytool에서 얻는 SHA1과 SHA256 전부 등록 (우측 이미지)

 

• 등록 성공 시 이미지

여기까지 따라오셨다면 Firebase Authentication 사용을 위한 준비단계 마무리!! 이제 코드에서 사용해 봅시다.

 

 

 

 

2. Firebase Authentication - 이메일/비밀번호 회원가입, 로그인 구현

<이메일/비밀번호 회원가입>

• VScode Terminal 플러그인 설치 (좌측 이미지)

flutter pub add firebase_auth

• pubspec.yaml 파일 >> firebase_auth 플러그인 설치 확인 (우측 이미지)

 

• 이메일/비밀번호 회원가입 코드 (좌측 이미지)
• 첫 실행 시 에러 발생 : 시뮬레이터 다시 시작하고 빌드하면 정상 동작됨 (우측 이미지)

 

• 모바일 애플리케이션 회원가입 진행 (좌측 이미지)
• Firebase Console >> Authentication >> Users 통해서 가입한 내역을 확인

 

<이메일/비밀번호 로그인>

• Firebase Authentication - 로그인 코드와 실행 성공화면

 

 

 

 

3. Firebase Authentication - 구글로 시작하기(회원가입, 로그인)

• 구글 로그인 플러그인 설치 >> pubspec.yaml 파일 통해 설치 성공 확인

flutter pub add google_sign_in

 

• 구글 로그인 실행 코드 (좌측 이미지)
• 구글 로그인 실행 화면 (우측 이미지)

 

• 처음 실행 시 에러 (좌측 이미지) : 에뮬레이터 다시 시작 해결
• 에뮬레이터 다시 시작 한 이후 에러 (우측 이미지) : 에뮬레이터 삭제 후 다시 만들고 재 실행

구글 플러그인 설치 후 실행 시 꼭 처음에 에러가 발생한다. 정확한 이유는 파악하지 못했지만 다시 시작 및 에뮬레이터 재설치하면 그냥 해결이 됩니다. 구조상 문제인지, 버그인지 확인해야 할 뜻 합니다.

 

• 구글 로그인 화면 생성 >> 로그인 진행하기 (좌측 이미지)
• 구글 회원가입 성공 화면 (우측 이미지)

 

 

 

 

 플러터(Flutter) Firebase Authentication 마무리

플러터와 파이어베이스 인증 방법을 사용하면 백엔드 작업을 하지 않아도 회원가입 및 로그인 인증을 할 수 있어서 1인 개발자들에게 인기가 높고 사용하기가 편합니다. 다만 아직은 플러터 지원하는데 버그성 문제들을 띄고 있습니다. 첫 실행 시 에러들을 자주 만나게 되며, 특별한 수정 없이 재시작 및 에뮬레이터 재설치로 해결이 됩니다. 좀 더 안정적으로 플랫폼이 운영되었으면 합니다. 해당 코드의 전체 코드는 아래 포스팅으로 확인이 가능합니다.

👇 👇 👇

[Flutter] Firebase Authentication - 이메일 회원가입/로그인, 구글로그인 전체 소스 코드

 

이 포스팅을 보기 전에 플러터(Flutter)와 파이어베이스(Firebase) 연동 초기 세팅을 구성하셔야 인증이 가능합니다. 파이어베이스(Firebase) 연동 초기 셋팅을 하지 않으셨다면 아래 포스팅을 확인하여 셋팅 이후에 다시 와서 진행하시길 바랍니다.

👇 👇 👇

[Flutter] 플러터 Firebase 연동을 위한 초기 셋팅 방법