mailによる認証
firebaseでmail認証の有効化

左メニュの「Authentication」を選択。
ログイン方法から「メール/パスワード」を有効化
ログインページの作成
画像を配置します。
今回はFlutter公式からダウンロードしたこちらの画像を使います。
flutter-todo/assets/flutter.png
画像を読み込みます。
flutter-todo/pubspec.yaml
# assets/ と設定するでassetsフォルダ内の画像を全て読み込みます assets: - assets/
flutter-todo/lib/ui/login.dart
import 'package:flutter/material.dart'; import 'package:firebase_auth/firebase_auth.dart'; class LoginPage extends StatefulWidget { LoginPage(); @override State<StatefulWidget> createState() => new _LoginPageState(); } class _LoginPageState extends State<LoginPage> { final emailInputController = new TextEditingController(); final passwordInputController = new TextEditingController(); final FirebaseAuth _firebaseAuth = FirebaseAuth.instance; Future<FirebaseUser> _signIn(String email, String password) async { final FirebaseUser user = await _firebaseAuth.signInWithEmailAndPassword( email: email, password: password); if (user.uid.length > 0 && user.uid != null) { Navigator.pushNamed(context, '/home'); } return user; } Future<FirebaseUser> _signUp(String email, String password) async { FirebaseUser user = await _firebaseAuth.createUserWithEmailAndPassword( email: email, password: password); if (user.uid.length > 0 && user.uid != null) { Navigator.pushNamed(context, '/home'); } return user; } Widget _showBody() { return Center( child: Form( child: SingleChildScrollView( padding: const EdgeInsets.symmetric( horizontal: 16.0), // horizontal : left = horizontal, right = horizontal child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ _showIcon(), const SizedBox(height: 250.0), _showEmailForm(), const SizedBox(height: 24.0), _showPasswordForm(), const SizedBox(height: 24.0), Padding( padding: EdgeInsets.symmetric(horizontal: 20), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ _showLoginButton(), _showSignUpButton(), ], ), ), ], ), ), ), ); } Widget _showIcon() { return Center( child: Image.asset( 'assets/flutter.png', width: 100.0, ), ); } Widget _showEmailForm() { return TextFormField( controller: emailInputController, decoration: InputDecoration( border: const UnderlineInputBorder(), labelText: 'Email', ), ); } Widget _showPasswordForm() { return TextFormField( controller: passwordInputController, decoration: InputDecoration( border: const UnderlineInputBorder(), labelText: 'Password', ), ); } Widget _showLoginButton() { return Center( child: RaisedButton( child: const Text( 'Login', style: TextStyle(color: Colors.white)), color: Colors.lightBlueAccent, onPressed: () { var email = emailInputController.text; var password = passwordInputController.text; return _signIn(email, password) .then((FirebaseUser user) => print(user)) .catchError((e) => print(e)); }, ) ); } Widget _showSignUpButton() { return Center( child: RaisedButton( child: const Text('SignUp'), onPressed: () { var email = emailInputController.text; var password = passwordInputController.text; return _signUp(email, password) .then((FirebaseUser user) => print(user)) .catchError((e) => print(e)); }, ) ); } @override Widget build(BuildContext context) { return Scaffold( body: _showBody(), ); } }
routeの設定をします。
flutter-todo/lib/main.dart
@override Widget build(BuildContext context) { return MaterialApp( title: 'Todo List', navigatorObservers: <NavigatorObserver>[observer], home: LoginPage(), routes: <String, WidgetBuilder> { '/login': (BuildContext context) => new LoginPage(), '/home': (BuildContext context) => new ListViewNote( title: 'Todo List', analytics: analytics, observer: observer, ), }, ); } }
firebaseの
「createUserWithEmailAndPassword」
メソッドにemailとpasswordを渡してあげるだけで簡単にユーザ登録を実装できます
「createUserWithEmailAndPassword」
メソッドにemailとpasswordを渡してあげるだけで簡単にユーザ登録を実装できます
新規にユーザを登録してみましょう

登録に成功するとfirebaseのコンソールからユーザを確認することができるようになります。
ここまでで認証の実装は終わりです。
成果物
こちらが完成した成果物になります。
ソースコードはこちら。
