Firebase Auth UIをFlutterで使いたかったので作ってみた

Flutter Library

あんまりにもFirebaseのログイン処理を書きたくなかったので、Firebase Auth UIを呼び出せないかと試行錯誤してみました。

github.com

（プラグイン名とかで何か都合が悪くなったら取り下げたいなと思うけれど、）pub.devにも公開中です。 とりあえず別の開発中のアプリで取り込んでみて、動作見ながら安定させるまではbetaなイメージ。

pub.dev

プラグインの説明

Firebase UI

Firebaseにはいくつか便利な機能がありますが、ユーザーを"Firebase User"として扱うためFirebase Authenticationを利用することは多いですよね。 ログインユーザーの管理、Google sing inやFacabook Loginのサポートなどなど至れり尽くせり。

firebase.google.com

ただ、どうしてもメールアドレスのバリデーションやなんらかの自動提案など、よいログイン機能を提供するのは骨が折れます。 パスワードの自動生成がiOSでできるからとAndroidでやろうとしたら、うまくいかないなんてこともあったり。Sign in with Appleの見せ方がわからなかったり。

そんな時に便利なのがFirebase UIです。

firebase.google.com

firebase.google.com

Webもあるよ。

firebase.google.com

ざっくり言うと、Sign up/Sign in画面が用意されているので、使ってねっていうライブラリです。 各プラットフォームそこそこ細かいカスタマイズができて、Terms of Serviceのリンクや一部画面のみのカスタマイズなんかもできます。

FlutterとFirebase UI

Flutter向けのFirebase Pluginは非常に強くサポートされているのですが、Firebase Auth UIはまだ提案段階です。

github.com

github.com

このため、Dartで書かれた下記のライブラリがよく利用されていました。 ※いたようです、ユーザー数が多い

pub.dev

pub.dev

ただ悲しいことにTwitter SDKが死んでしまった関係などで、ライブラリの利用が難しい状況になっています。 そんなわけで、AndroidとiOSのネイティブSDKを利用してpluginを書いてみようかなと思った次第です。

使い方

まだまだ自分の中でもしっくりきていないのですが、大体下記のようにするとFirebase UIが呼び出せるようにしてあります。

class _MyAppState extends State<MyApp> {

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

  Future<void> initProviders() async {
    FlutterAuthUi.setEmail();
    FlutterAuthUi.setApple();
    FlutterAuthUi.setGithub();
    FlutterAuthUi.setGoogle();
    FlutterAuthUi.setMicrosoft();
    FlutterAuthUi.setYahoo();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            children: [
              RaisedButton(
                  child: const Text("start ui"),
                  onPressed: () async {
                    final user = await FlutterAuthUi.startUi();
                    print(user);
                  }),
            ],
          ),
        ),
      ),
    );
  }
}

使うとこんな感じ。

Firebase Auth UIには Logout メソッドもあるのですが、今のところ「ログイン処理をFlutter Auth UIを呼び出して利用する」ことを主眼にしているので追加していません。 同様にAndroidとiOSのそれぞれにある細やかなカスタマイズ機能も未実装です。

とりあえずFirebase Auth UIを呼び出してユーザーにログインしてもらう、成功したら user が返ってくる/失敗したらnullが返ってくるという感じです。

作ってみての感想

  1. Webのサポートどうすればいいのか全然わからない、jsのライブラリをscriptとして読み込んで利用すればいいのだろう
  2. iOSのcocoapod追加が鬼門、staticで読み込んじゃったので何か問題があったらなんとかしたい
  3. AndroidのminSDKVersionに迷う、Flutterが16サポートしているけれど少なくとも21にしたかったのでしてみた。いいのだろうか？
  4. 1月2日から大体2週間ぐらいでできたので年始のFlutterはじめっぽくてよかった

自分のアプリに利用するベースでいじっていきます。 よろしくお願いします。

基礎から学ぶ Flutter

基礎から学ぶ Flutter

  • 作者:石井幸次
  • 出版社/メーカー: シーアンドアール研究所
  • 発売日: 2019/12/25
  • メディア: Kindle版

基礎から学んだ方がいいかなーと最近思案中。

Twitter見返したら10月ごろに一度チャレンジして挫折してたのを思い出した。

ちょっと成長した感じがあってよかった。