FlutterでFirebaseを使ったログイン認証、プロジェクト作成手順まとめ

2023年5月9日Dart/FlutterDart,Firebase,Flutter

極稀にしか使わないので備忘録。

手順が多いのでメモを残しておかないと忘れてしまう。

Firebaseに登録

プロジェクト作成
プロジェクト名とかそんなやつ。ここでプロジェクトIDが決まる。

Flutterアプリ登録
Flutterアイコンがあるのでそれで。

Authenticationの設定
Sign-inメソッドの設定
メール等のテンプレートの設定と言語
先にユーザーを作っておく必要があればここで作っておく

Firebase CLIインストール

npm install -g firebase-tools

Firebaseログインチェック

firebase login

なんかブラウザとかが立ち上がってログイン認証が走る。

FlutterFire CLIインストール

dart pub global activate flutterfire_cli

Flutterでアプリ作成

flutter create flutter_firebaseauth

ガーっとFlutterのソースツリーが作られる

Flutterアプリにfirebaseライブラリインストール

基本ライブラリ

flutter pub add firebase_core

windowsアプリやLinuxアプリ向けにリリースする場合はこれも追加

flutter pub add firebase_core_desktop
flutter pub add firebase_auth_desktop

※但し、結構古いfirebaseライブラリとの組み合わせでないと依存関係で導入出来ない。

Firebase Auth用ライブラリ

flutter pub add firebase_auth

FlutterアプリのFirebase関連設定を初期化（？）コンフィグ反映？

flutter install

これでさっきインストールしたライブラリがソースツリーに追加される

flutterfire configure --project=flutter-firebaseauth-base

なんか設定ファイルを再構築するっぽい

※リリース対象を増やしたり新しくプラグインを追加する度にconfigureする事

これで firefirebase_options.dart が作られる

Flutterアプリにinclude追加

import './firebase_options.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';

ソースの頭にこれらをはっつけておく。

Flutterアプリに初期化処理追加

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

Firebaseのイニシャライズをmainの初めの方にはっつけておく。

Flutterアプリ開発開始

Flutterでコード書き開始。

多いな・・・

Flutterは色々概念が違うのでちょっと覚える事多いです。

どこかGitHubにでもリポジトリ残しておいた方が楽でいいやも。

とりあえずFirebaseのオフィシャルHPのリンクも載せておきます。

地味にリンクを残しておくと思い出す。

Dart/FlutterDart,Firebase,Flutter

Posted by 工兵. PV2