• 3年前

Firebase UI Flutter版のflutter_auth_uiを使って みる

認証周りはFirebase authを使うと楽ですよね。 ただ、providerごとに実装を持つのは大変だと思います。 そこで、AndroidやiOSにあるFlutterUIライブラリがないかなっと思い探していたところ、以下のライブラリを見つけたので検証してみました。


内部の処理を見てみたところ MethodChannelを利用して、Android/iOSのFirebaseUIのライブラリを呼び出している様な構成でした。
導入から書いていきたいと思います。

※前提としてFirebaseのconsoleで各providerの authをonにしておく必要があります。

導入方法

dependencies:
  flutter_auth_ui: ^2.1.0


pubspeck.yamlに上記を追加し pub get します

次にコードです。

import 'package:flutter/material.dart';
import 'package:flutter_auth_ui/flutter_auth_ui.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            children: [
              ElevatedButton(
                child: const Text("start ui"),
                onPressed: () async {
                  final providers = [
                    AuthUiProvider.anonymous,
                    AuthUiProvider.email,
                    AuthUiProvider.phone,
                    AuthUiProvider.apple,
                    AuthUiProvider.github,
                    AuthUiProvider.google,
                    AuthUiProvider.microsoft,
                    AuthUiProvider.yahoo,
                  ];

                  final result = await FlutterAuthUi.startUi(
                    items: providers,
                    tosAndPrivacyPolicy: TosAndPrivacyPolicy(
                      tosUrl: "https://www.google.com",
                      privacyPolicyUrl: "https://www.google.com",
                    ),
                    androidOption: AndroidOption(
                      enableSmartLock: false, // default true
                      showLogo: true, // default false
                      overrideTheme: true, // default false
                    ),
                    emailAuthOption: EmailAuthOption(
                      requireDisplayName: true, // default true
                      enableMailLink: false, // default false
                      handleURL: '',
                      androidPackageName: '',
                      androidMinimumVersion: '',
                    ),
                  );
                  print(result);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}


flutter run してstart uiを押すと各プロバイダーのログインボタンが表示された画面が表示されるはずです。

Providerによっては設定が必要になるためiOSとAndroidで本家のリファレンスを参考に設定してください。
https://firebase.google.com/docs/auth/ios/firebaseui?hl=ja

yass

Flutter/Android/Nuxt/Django/Firebase/iOS

東京、武蔵野市にあるWebサイト制作、Webシステム開発、モバイルアプリ開発、システム設計、構築、ITコンサルティングを行なっている会社です。 開発会社、ベンチャー、フリーランスで10年以上フルスタックエンジニアとして開発してきた代表が理想とする開発基盤、システム運用手法、最新技術を取り入れ、受託開発や自社サービスの開発を行っています。

info@lorchestra.dev
042-266-2750(代表)