【5分で分かる】Flutter WebでFirebaseを使う

ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事は、Flutter WebでFirebaseを使う方法をハンズオン形式の記事です。

想定読者

Flutter WebでFirebaseを使いたい方

また、本記事のソースコードは以下で公開しています。

GitHub - kimuson/flutter-firebase-sample

Contribute to kimuson/flutter-firebase-sample development by creating an account on GitHub.

検証環境
Flutter WebでFirebaseを使う方法

Flutterプロジェクトの作成
Firebaseプロジェクトの作成
FirebaseプロジェクトにWebアプリの登録する
FlutterプロジェクトにFirebase設定を追加する
Firebaseでログイン処理を実装してみる

まとめ：FirebaseはFlutter初学者にとってもおすすめです！

検証環境

本記事は以下の実行環境とソフトウェアバージョンにより検証いたしました。

実行環境

macOS Big Sur 11.5.2
Flutter 2.8.1
firebase_core 1.11.0
firebase_auth 3.3.5

Flutter WebでFirebaseを使う方法

Flutterプロジェクトの作成

最初にFlutterプロジェクトを作成します。

今回は「firebase_demo」という名前でプロジェクトを作成しましょう。

# プロジェクト作成
flutter create firebase_demo
# プロジェクト配下に移動
cd firebase_demo 
# Flutterの実行
flutter run

以下のようにChromeブラウザで初期画面が表示されたら成功です。

Firebaseプロジェクトの作成

まずはFirebaseのホームページに行ってください。

自身のGoogleアカウントでログインしたら「コンソールへ移動」を押下しましょう。

任意のプロジェクト名を入力してください。

今回は「Firebase-sample」という名前に設定します。

入力が終わったら「続行」を押下してください。

今回はGoogleアナリティクスを使用しないので、有効をオフにしましょう。

最後に「プロジェクトの作成」を押下します。

プロジェクトの準備ができたら「続行」を

以下のようなダッシュボードが表示されば無事Firebaseプロジェクトが作成されたことになります。

FirebaseプロジェクトにWebアプリの登録する

次に作成したFirebaseプロジェクトにこれから作成するWebアプリの登録をしていきます。

以下のボタンを押下して、アプリ登録画面に進みます。

最初にアプリの名前を入力します。今回は「Firebase-sample-app」とします。

入力が完了したら「アプリを登録」を押下しましょう。

「Firebase SDK の追加」項目では、'<script>タグを使用する’にチェックを付けて、スクリプトの内容をコピーしてどこかに一時的に保存しておいてください。

最後に「コンソールに進む」を押下します。

これでFirebase側の登録が完了しました。

FlutterプロジェクトにFirebase設定を追加する

次は先ほど作成したFlutterプロジェクトにFirebaseを利用するための設定を行なっていきます。

firebase_demo/web配下にある「index.html」に先ほどコピーしたscriptタグの内容をbodyタグの直下に追加します。

以下のように追加してください。(※一部セキュリティの関係上ソースをマスキングしています。)

<!DOCTYPE html>
<html>
<head>
  ...省略...
</head>
<body>
  <script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries
  
    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "...",
      authDomain: "...",
      projectId: "...",
      storageBucket: "...",
      messagingSenderId: "...",
      appId: "..."
    };
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
  </script>
 ...省略...
</body>
</html>

これで初期設定は完了しました。

Firebaseでログイン処理を実装してみる

では、実際にFirebaseのAuthentication機能を利用して簡単なログイン機能を作成してみましょう。

Firebase側でAuthentication機能を有効化

まず初めにFirebase側でAuthentication機能を有効化します。

サイドバーの「Authentication」から、「始める」を押下してください。

「Sign-in method」タブを選択し「メール/パスワード」を押下してください。

「メール/パスワード」を「有効にする」をオンにします。

その後、「保存」を押下します。

これでFirebase側の設定は完了になります。

FlutterプロジェクトにFirebaseのライブラリを追加する

次に、今回Firebaseにアクセスするために使用するライブラリをFlutterに設定します。

プロジェクト直下のpubspec.yamlに以下の内容を追記してください。（※dependencies:の下に追記します。）

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.11.0 # 追記
  firebase_auth: ^3.3.5 # 追記

トップページを作成する

ログイン画面と、新規アカウントページにアクセスするためのボタンを設置する画面を用意します。

lib配下のmain.dartに以下のソースコードを記載してください。（※既存のコードは全て削除して大丈夫です。）

❕注意点

以下のソースコードの中で「..省略..」となっている部分はご自身のクレデンシャル情報を入力してください。こちらの内容はFirebaseでの初期設定時にコピーした内容と同じ値を設定してください。

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_demo/LoginPage.dart';
import 'package:firebase_demo/RegisterPage.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: const FirebaseOptions(
        apiKey: "..省略..",
        authDomain: "..省略..",
        projectId: "..省略..",
        storageBucket: "..省略..",
        messagingSenderId: "..省略..",
        appId: "..省略.."),
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TopPage(),
    );
  }
}

class TopPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: Text('ログイン'),
              onPressed: () async {
                await Navigator.of(context).pushReplacement(
                  MaterialPageRoute(builder: (context) {
                    return LoginPage();
                  }),
                );
              },
            ),
            Padding(padding: EdgeInsets.all(20)),
            ElevatedButton(
              child: Text('アカウント作成'),
              onPressed: () async {
                await Navigator.of(context).pushReplacement(
                  MaterialPageRoute(builder: (context) {
                    return RegisterPage();
                  }),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

ユーザー新規登録ページを作成する

新規登録ページを作成します。

lib配下にRegisterPage.dartというファイルを新規で作成し、以下のソースコードを記載してください。

import 'package:firebase_demo/main.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  // メッセージ表示用
  String infoText = '';
  // 入力したメールアドレス・パスワード
  String email = '';
  String password = '';
  String userName = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // メールアドレス入力
              TextFormField(
                decoration: InputDecoration(labelText: 'メールアドレス'),
                onChanged: (String value) {
                  setState(() {
                    email = value;
                  });
                },
              ),
              // パスワード入力
              TextFormField(
                decoration: InputDecoration(labelText: 'パスワード'),
                obscureText: true,
                onChanged: (String value) {
                  setState(() {
                    password = value;
                  });
                },
              ),
              Container(
                padding: EdgeInsets.all(8),
                // メッセージ表示
                child: Text(infoText),
              ),
              Container(
                width: double.infinity,
                // ユーザー登録ボタン
                child: ElevatedButton(
                  child: Text('ユーザ登録'),
                  onPressed: () async {
                    try {
                      // メール/パスワードでユーザ登録
                      final FirebaseAuth auth = FirebaseAuth.instance;
                      await auth.createUserWithEmailAndPassword(
                        email: email,
                        password: password,
                      );

                      // ユーザー登録に成功した場合
                      await Navigator.of(context).pushReplacement(
                        MaterialPageRoute(builder: (context) {
                          return TopPage();
                        }),
                      );
                    } catch (e) {
                      // ユーザー登録に失敗した場合
                      setState(() {
                        infoText = "登録に失敗しました：${e.toString()}";
                      });
                    }
                  },
                ),
              ),
              Container(
                padding: EdgeInsets.all(8),
              ),
              Container(
                width: double.infinity,
                // ユーザー登録ボタン
                child: ElevatedButton(
                  child: Text('戻る'),
                  onPressed: () async {
                    await Navigator.of(context).pushReplacement(
                      MaterialPageRoute(builder: (context) {
                        return TopPage();
                      }),
                    );
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

ログインページを作成する

最後にログインページを作成します。

lib配下にLoginPage.dartというファイルを新規で作成し、以下のソースコードを記載してください。

import 'package:firebase_demo/main.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // メッセージ表示用
  String infoText = '';
  // 入力したメールアドレス・パスワード
  String email = '';
  String password = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // メールアドレス入力
              TextFormField(
                decoration: InputDecoration(labelText: 'メールアドレス'),
                onChanged: (String value) {
                  setState(() {
                    email = value;
                  });
                },
              ),
              // パスワード入力
              TextFormField(
                decoration: InputDecoration(labelText: 'パスワード'),
                obscureText: true,
                onChanged: (String value) {
                  setState(() {
                    password = value;
                  });
                },
              ),
              Container(
                padding: EdgeInsets.all(8),
                // メッセージ表示
                child: Text(infoText),
              ),
              Container(
                width: double.infinity,
                // ユーザー登録ボタン
                child: ElevatedButton(
                  child: Text('ログイン'),
                  onPressed: () async {
                    try {
                      // メール/パスワードでログイン
                      final FirebaseAuth auth = FirebaseAuth.instance;
                      await auth.signInWithEmailAndPassword(
                        email: email,
                        password: password,
                      );
                      // ユーザー登録に成功した場合
                      setState(() {
                        infoText = "ログインに成功しました";
                      });
                    } catch (e) {
                      // ユーザー登録に失敗した場合
                      setState(() {
                        infoText = "登録に失敗しました：${e.toString()}";
                      });
                    }
                  },
                ),
              ),
              Container(
                padding: EdgeInsets.all(8),
              ),
              Container(
                width: double.infinity,
                // ユーザー登録ボタン
                child: ElevatedButton(
                  child: Text('戻る'),
                  onPressed: () async {
                    await Navigator.of(context).pushReplacement(
                      MaterialPageRoute(builder: (context) {
                        return TopPage();
                      }),
                    );
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}