Zenn
🔥

【flutter】FirebaseAuthenticationで匿名登録する

2022/05/31に公開
Android
Firebase
Flutter
アプリ
tech

以前VuetifyでFirebaseのAuthentication関連の記事を書いたんですが、今回はflutterでユーザー登録を実装していきます。
ちなみにAndroidで実装していきます。iOSは別途記事を書いていきたいと思います。

環境

  • Windows(10)
  • Flutter（2.10.2）
    • Dart（2.16.1）
    • flutter_native_splash（^2.1.2+1）

事前準備

  • Firebase Authentication
    • Firebaseのプロジェクト作成
  • flutterプロジェクトの生成

手順

flutterプロジェクトの準備

1. flutterプロジェクトの作成

コマンドプロンプトを開いて下記コマンドを実行します。

flutter create {プロジェクト名}

2. パッケージのインストール

  • firebase_authをインストールします。
flutter pub add firebase_auth
  • firebase_coreをインストールします。
flutter pub add firebase_core

3. google-services.jsonの配置

手順が前後してしまいますが、後述のjsonを入手したら
Firebaseの手順通りにgoogle.services.jsonを配置します。

{プロジェクト}
　　└ app
       └ src
          └ ★google-services.json

Firebaseプロジェクトの準備

1. Androidプロジェクト作成

  • 『アプリを追加』をクリック

  • 『Androidのマーク』をクリック

  • Androidパッケージ名を追加
    下記のbuild.gradleに記載してあるapplicationIdを入力する

<project>/<app-module>/build.gradle
android {
～中略～
    defaultConfig {
        // ↓ここにあるID
        applicationId "com.example.flutter_firebase_sample"
    }
～中略～
}

  • google-services.jsonをダウンロード
    ダウンロードしたjsonファイルはのちほど配置します。

  • {project}/build.gradleへ追記
    プロジェクト配下にあるファイルです。

<project>/build.gradle
buildscript {
  dependencies {
    // ↓追加行
    classpath 'com.google.gms:google-services:4.3.10'
  }
}
  • {project}/app/build.gradleへ追記
    プロジェクト＞app配下にあるファイルです。
<project>/<app-module>/build.gradle
// ↓追加行
apply plugin: 'com.google.gms.google-services'

dependencies {
  // ↓追加行（バージョンに注意）
  implementation platform('com.google.firebase:firebase-bom:30.1.0')
  // 追加しなくてもOK
  implementation 'com.google.firebase:firebase-analytics'
}

ソースコードの修正

1. ソースコード修正

コメント行はさっぱり削除してあります。

キモの部分は、mainメソッドがFutureになっていることでしょうか。
その他は登録のメソッド追加したりしてます。

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

Future<void> main() async {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(
    const MyApp()
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  String _result = '';

  void onSignInWithAnonymousUser() async {
    await FirebaseAuth.instance.signInAnonymously()
      .then((value) {
        print(value);
        setState(() {
          _result = '登録成功';
        });
      })
      .onError((error, stackTrace) {
        print(error);
          setState(() {
          _result = '登録失敗';
        });
      });
  }

  @override
  void initState() {
    super.initState();
    onSignInWithAnonymousUser();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '登録結果:',
            ),
            Text(
              '$_result',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

2. ビルドと確認

ビルド（＋デバッグ）で匿名登録が成功すると、↓の画面になります。

（失敗のルートをテストしてませんが・・・）

そして、Firebase側に

こんな感じで登録されます。

あとがき

Vuetifyでやった時と同じくめちゃくちゃ簡単でした。
あとは、ユーザー認証あたりと、ユーザーの付加情報の登録方法(firestore)の記事を書いていこうと思ってます。

参考記事

Github

  • 準備中

Discussion