認証周りは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