소개

많은 스마트 폰 앱에는 사용자를 식별하는 기능이 있습니다.
전용 계정을 만들고 가입하거나 Google, Facebook 등 기존 서비스 계정을 사용하여 로그인할 수 있습니다.

이전에는 Flutter 앱에 Firebase 추가에서 Flutter로 만든 프로젝트에 Firebase를 추가하는 방법을 요약했습니다. 스마트 폰 앱의 "로그인 인증 기능"은 Firebase Firebase Authentication를 사용하여 쉽게 구현할 수 있습니다.

이번에는 Flutter와 Firebase에서 로그인 화면을 구현하는 방법을 비망록으로 정리했습니다.

사전 준비

Flutter로 스마트 폰 앱 개발 확인

Flutter 개발 환경 구축 및 프로젝트 만들기

Google 계정으로 Firebase에 로그인

Firebase 프로젝트 만들기

Firebase 프로젝트 이해하기 확인

Flutter 앱에 Firebase 추가 확인

구현에는 이하의 사이트를 참고로 했습니다.

참고 사이트
htps : ///bccb 등 ry. 에서 v / # / f ぅ는 r

참고 코드
htps : // 기주 b. 코 m / 고양이 하루 유키 / f ㅅ는 r_ st / t ree / m s r / f ぅ r_

완성 이미지

구현

pubspec.yaml에 패키지를 추가합니다.

pubspec.yaml

environment:
  sdk: ">=2.6.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  bloc: ^6.1.0
  equatable: ^1.2.3
  flutter_bloc: ^6.1.0
  font_awesome_flutter: ^8.4.0
  formz: ^0.3.0
  google_fonts: ^1.1.0
  meta: ^1.1.8
  pedantic: ^1.9.0
  authentication_repository:
    path: packages/authentication_repository

dev_dependencies:
  flutter_test:
    sdk: flutter
  bloc_test: ^7.1.0
  mockito: ^4.0.0

flutter:
  uses-material-design: true
  assets:
    - assets/

프로젝트의 루트에 assets 디렉토리 만들기

flutter packages get

Firebase 설정

애플리케이션을 firebase에 연결하고 google_signin을 사용하도록 설정하려면 firebase_auth의 사용 지침을 따라야 합니다.

Android의 google-services.json과 iOS의 GoogleService-Info.plist를 업데이트하는 것을 잊지 마십시오. 응용 프로그램이 충돌합니다.

요약

이번에는 Flutter와 Firebase에서 로그인 화면을 구현하는 방법을 비망록으로 정리했습니다.
Firebase를 사용하는 것으로, 계정을 사용해 로그인하는 구현을 간단하게 할 수 있었습니다.