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