FlutterとFirebaseでログイン画面を実装する

はじめに

多くのスマホアプリには、ユーザーを識別する機能があります。
専用アカウントを作成してサインアップするものや、 Google や Facebook などの既存のサービスのアカウントを使ってログインするものなどがあります。

以前、Flutter アプリに Firebase を追加する で、Flutterで作成したプロジェクトにFirebaseを追加する方法をまとめました。スマホアプリの「ログイン認証機能」は、Firebase の Firebase Authentication を使用すると簡単に実装することが出来ます。

今回は、FlutterとFirebaseでログイン画面を実装する方法を備忘録としてまとめました。

事前準備

• Flutter によるスマホアプリ開発 を確認
  • Flutterの開発環境構築とプロジェクトを作成
• Google アカウントを使って Firebase にログイン
  • Firebase プロジェクトを作成
  • Firebase プロジェクトについて理解する を確認
• Flutter アプリに Firebase を追加する を確認

実装には以下のサイトを参考にしました。

参考サイト
https://bloclibrary.dev/#/flutterfirebaselogintutorial

参考コード
https://github.com/nekoharuyuki/flutter_test/tree/master/flutter_firebase_login

完成イメージ

実装

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を使用する事で、アカウントを使ってログインする実装が簡単に出来ました。