省エネ

Flutter、vue3修行中。

【Flutter】Flutter + Firebase Authenticationで匿名ログイン

ここ最近はFlutetrで何かアプリを作ってGooglePlayへリリースするところまでやってみたいなと思い、アプリを作り始めています。

ただ、サーバーを用意するのが手間なので、ネイティブ以外の作業は全てFirebaseで賄おうと思っています。

とりあえずはFirebaseをFlutterアプリに入れてみます。
今回はAndroidだけですが、いずれiOSも対応したいと思います。

FirebaseをFlutterアプリへ

Flutter アプリに Firebase を追加する  |  Firebase

結構丁寧にここにやり方が書かれています。
AndroidもしくはiOSアプリにFirebaseを入れたことがある人なら簡単にできると思います。
ただ、途中やり方が変わってきます。

Firebase ConsoleからAndroidアプリを追加します。
google-services.jsonをダウンロードし、android/appに置きます。

gradle

トップレベルのgradleに

buildscript {
    ext.kotlin_version = '1.3.21'
    repositories {
        google()
        jcenter()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:3.2.1'
    }
}

のように

classpath 'com.google.gms:google-services:3.2.1'

を追加します。

現時点で、もっと大きいバージョンがあるみたいですが、上にリンクしたFirebaseのページには、

注: Flutter は現在、バージョン 3.2.1 の Google サービス プラグインと互換性があります。

とあるので、バージョンは動かさないほうがよさそうです。

app下のgradleには一番下に

apply plugin: 'com.google.gms.google-services'

を追加するだけでOKです。

pubspec.yml

flutter用のfirebase pluginがあるようなので、package getで取得します。

pubspec.ymlに下記を追加。

dependencies:
  flutter:
    sdk: flutter

  firebase_core: 0.2.5+1
  firebase_analytics: 1.1.0
  firebase_auth: 0.7.0

ここでハマったのですが、

firebaseopensource.com

ここを見て最新のバージョンを使おうとすると、package getは問題なく通るのですが、ビルドが通らなくなります。

AndroidX関係でエラーになるので、下記のリンク先のバージョンに合わせます。

flutter.dev

ここに書かれているバージョンに直したところ、問題なくビルドし、機能が使える様になりました。

f:id:qkuroneko:20190315134318p:plain:w320

アプリをインストールすると、Androidアプリが認識されました。

匿名ログイン

Firebase Consoleからプロジェクトを開き、開発→Authenticationページを開きます。

f:id:qkuroneko:20190315134757p:plain:w320

一番下の「匿名」を有効にします。

あとは匿名ログインしたいタイミングで、

FirebaseAuth#signInAnonymously();

を呼び出せはOKです。

私の場合はスプラッシュ画面でしれっとログインしてしまおうと思ったので、こんな風にしてます。

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:own_note/views/todays_photo_list.dart';
import 'package:splashscreen/splashscreen.dart';

class SplashView extends StatelessWidget {

  final FirebaseAuth firebaseAuth = FirebaseAuth.instance;

  Future<FirebaseUser> signInAnon() async {
    FirebaseUser user = await firebaseAuth.signInAnonymously();
    return user;
  }


  SplashView() {
    signInAnon().then((FirebaseUser user) {
      print('User ${user.uid}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return SplashScreen(
      seconds: 2,
      navigateAfterSeconds: TodaysPhotoListView(),
      image: new Image.network(
          'https://flutter.io/images/catalog-widget-placeholder.png'),
      photoSize: 100.0,
      gradientBackground: LinearGradient(colors: [Colors.cyan],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight),
    );
  }

}

雑に実装した感じだとこんな感じ。

www.youtube.com

こちらの動画を参考にしました!