はじめに
【Flutter】Firebase Authenticationを使ってログイン/ユーザー登録画面を作成する(その3)の続きです。
前回はメールアドレスでのユーザー登録の実装を行いました。
今回はログイン画面を作成し、ログインできるように実装します。
引き続きVSCodeのMac版を利用していますので、AndroidStudio利用の方は適宜読み替えて行ってみてください。
更新履歴
2024.1.18 初回投稿
ログインボタンを追加してログイン処理を実装
- 前回のコードにログインボタンとログアウトボタンを追加します。
SizedBox( width: double.infinity, // ログインボタン child: ElevatedButton( child: const Text('ログイン'), onPressed: () async { try { // メール/パスワードでログイン final FirebaseAuth auth = FirebaseAuth.instance; await auth.signInWithEmailAndPassword( email: email, password: password, ); // ユーザー登録に成功した場合 setState(() { infoText = "ログインに成功しました！"; }); } catch (e) { // ユーザー登録に失敗した場合 setState(() { infoText = "ログインに失敗しました：${e.toString()}"; }); } }, ), ),
ログアウトボタンを追加してログアウト処理を実装
- 次にログアウトボタンを追加して、ログアウト処理を追加します。
SizedBox( width: double.infinity, // ログアウトボタン child: ElevatedButton( child: const Text('ログアウト'), onPressed: () async { try { // ログアウト await FirebaseAuth.instance.signOut(); // ユーザー登録に成功した場合 setState(() { infoText = "ログアウトしました"; }); } catch (e) { // ユーザー登録に失敗した場合 setState(() { infoText = "ログアウトに失敗しました：${e.toString()}"; }); } }, ), ),
ここまでの全コード
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const LoginSample());
}
class LoginSample extends StatelessWidget {
const LoginSample({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Login Sample',
home: LoginPage(),
);
}
}
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
// メッセージ表示用
String infoText = '';
// 入力したメールアドレス・パスワード
String email = '';
String password = '';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// メールアドレス入力
TextFormField(
decoration: const InputDecoration(labelText: 'メールアドレス'),
onChanged: (String value) {
setState(() {
email = value;
});
},
),
// パスワード入力
TextFormField(
decoration: const InputDecoration(labelText: 'パスワード'),
obscureText: true,
onChanged: (String value) {
setState(() {
password = value;
});
},
),
Container(
padding: const EdgeInsets.all(8),
// メッセージ表示
child: Text(infoText),
),
SizedBox(
width: double.infinity,
// ユーザー登録ボタン
child: ElevatedButton(
child: const Text('ユーザー登録'),
onPressed: () async {
try {
// メール/パスワードでユーザー登録
final FirebaseAuth auth = FirebaseAuth.instance;
await auth.createUserWithEmailAndPassword(
email: email,
password: password,
);
// ユーザー登録に成功した場合
setState(() {
infoText = "登録に成功しました！";
});
} catch (e) {
// ユーザー登録に失敗した場合
setState(() {
infoText = "登録に失敗しました：${e.toString()}";
});
}
},
),
),
SizedBox(
width: double.infinity,
// ログインボタン
child: ElevatedButton(
child: const Text('ログイン'),
onPressed: () async {
try {
// メール/パスワードでログイン
final FirebaseAuth auth = FirebaseAuth.instance;
await auth.signInWithEmailAndPassword(
email: email,
password: password,
);
// ユーザー登録に成功した場合
setState(() {
infoText = "ログインに成功しました！";
});
} catch (e) {
// ユーザー登録に失敗した場合
setState(() {
infoText = "ログインに失敗しました：${e.toString()}";
});
}
},
),
),
SizedBox(
width: double.infinity,
// ログアウトボタン
child: ElevatedButton(
child: const Text('ログアウト'),
onPressed: () async {
try {
// ログアウト
await FirebaseAuth.instance.signOut();
// ユーザー登録に成功した場合
setState(() {
infoText = "ログアウトしました";
});
} catch (e) {
// ユーザー登録に失敗した場合
setState(() {
infoText = "ログアウトに失敗しました：${e.toString()}";
});
}
},
),
),
],
),
),
),
);
}
}
次は、パスワードリセットを実装していきたいと思います。