あんまりにもFirebaseのログイン処理を書きたくなかったので、Firebase Auth UIを呼び出せないかと試行錯誤してみました。
(プラグイン名とかで何か都合が悪くなったら取り下げたいなと思うけれど、)pub.devにも公開中です。 とりあえず別の開発中のアプリで取り込んでみて、動作見ながら安定させるまではbetaなイメージ。
プラグインの説明
Firebase UI
Firebaseにはいくつか便利な機能がありますが、ユーザーを"Firebase User"として扱うためFirebase Authenticationを利用することは多いですよね。 ログインユーザーの管理、Google sing inやFacabook Loginのサポートなどなど至れり尽くせり。
ただ、どうしてもメールアドレスのバリデーションやなんらかの自動提案など、よいログイン機能を提供するのは骨が折れます。 パスワードの自動生成がiOSでできるからとAndroidでやろうとしたら、うまくいかないなんてこともあったり。Sign in with Appleの見せ方がわからなかったり。
そんな時に便利なのがFirebase UIです。
Webもあるよ。
ざっくり言うと、Sign up/Sign in画面が用意されているので、使ってねっていうライブラリです。 各プラットフォームそこそこ細かいカスタマイズができて、Terms of Serviceのリンクや一部画面のみのカスタマイズなんかもできます。
FlutterとFirebase UI
Flutter向けのFirebase Pluginは非常に強くサポートされているのですが、Firebase Auth UIはまだ提案段階です。
このため、Dartで書かれた下記のライブラリがよく利用されていました。 ※いたようです、ユーザー数が多い
ただ悲しいことに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); }), ], ), ), ), ); } }
使うとこんな感じ。
やりたかったのはこれだよこれ感。 pic.twitter.com/LKfszHmHB1
— Koji Wakamiya(だぐりば) (@D_R_1009) January 5, 2020
Firebase Auth UIには Logout
メソッドもあるのですが、今のところ「ログイン処理をFlutter Auth UIを呼び出して利用する」ことを主眼にしているので追加していません。
同様にAndroidとiOSのそれぞれにある細やかなカスタマイズ機能も未実装です。
とりあえずFirebase Auth UIを呼び出してユーザーにログインしてもらう、成功したら user
が返ってくる/失敗したらnullが返ってくるという感じです。
作ってみての感想
- Webのサポートどうすればいいのか全然わからない、jsのライブラリをscriptとして読み込んで利用すればいいのだろう
- iOSのcocoapod追加が鬼門、staticで読み込んじゃったので何か問題があったらなんとかしたい
- AndroidのminSDKVersionに迷う、Flutterが16サポートしているけれど少なくとも21にしたかったのでしてみた。いいのだろうか?
- 1月2日から大体2週間ぐらいでできたので年始のFlutterはじめっぽくてよかった
自分のアプリに利用するベースでいじっていきます。 よろしくお願いします。
基礎から学んだ方がいいかなーと最近思案中。
Twitter見返したら10月ごろに一度チャレンジして挫折してたのを思い出した。
FlutterでFirebase UI使いたいから自分で書くか。
— Koji Wakamiya(だぐりば) (@D_R_1009) October 6, 2019
FlutterからFirebase UI呼び出すSDK書いてみてたけど、どーにもうまくいかないし断念。
— Koji Wakamiya(だぐりば) (@D_R_1009) October 13, 2019
ちょっと成長した感じがあってよかった。