はじめに
【Flutter】Firebase Authenticationを使ってログイン/ユーザー登録画面を作成する(その4)の続きです。
前回はログインとログアウトを実装しました。
今回はパスワードリセット画面を作成し、パスワードリセットのためのメールを送信する実装を行います。
引き続きVSCodeのMac版を利用していますので、AndroidStudio利用の方は適宜読み替えて行ってみてください。
更新履歴
2024.1.18 初回投稿
2024.1.27 誤字修正
Firebaseプロジェクト側でパスワードリセットメールのテンプレートを変更する
- Firebaseのプロジェクトショートカットから「Authentication」をクリックして「Templates」を選択します。
- テンプレート画面左下の「テンプレート言語」横の鉛筆マークをクリックして、テンプレート言語を「日本語」に設定します。
- テンプレートを編集したい場合は「送信元」横の鉛筆マークをクリックして、編集できます。
- 編集したら保存ボタンを押して完了です。
パスワードリセット画面を作成する。
- 「reset_password_screen.dart」というファイル名でファイルを作成します。
- 最初に作成したユーザ登録画面からWidgetをコピーしてきて、メールアドレスのフィールドのみ残しておきます。
- 以下のようになります。
import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/material.dart'; class ResetPasswordScreen extends StatefulWidget { const ResetPasswordScreen({super.key}); @override State<ResetPasswordScreen> createState() => _ResetPasswordScreenState(); } class _ResetPasswordScreenState extends State<ResetPasswordScreen> { // メッセージ表示用 String infoText = ''; String mailAddress = ''; @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) { mailAddress = value; }, ), Container( padding: const EdgeInsets.all(8), // メッセージ表示 child: Text(infoText), ), ], ), ), ), ); } } - 次に、パスワードリセットボタンと処理をメッセージ表示Containerの下に追加します。
SizedBox( width: double.infinity, // ユーザー登録ボタン child: ElevatedButton( child: const Text('パスワードリセット'), onPressed: () async { try { final FirebaseAuth auth = FirebaseAuth.instance; await auth.sendPasswordResetEmail(email: mailAddress); setState(() { infoText = "パスワードリセットメールを送信しました。"; }); } catch (e) { setState(() { infoText = "パスワードリセットメールの送信に失敗しました：${e.toString()}"; }); } }, ), )
最初のログイン/ユーザー登録画面にパスワードリセットボタンを追加します。
- ログアウトボタンの下に以下のコードを追加します。
TextButton( onPressed: () { Navigator.of(context).push( MaterialPageRoute( builder: (context) { return const ResetPasswordScreen(); }, ), ); }, child: const Text( 'パスワードを忘れたら', style: TextStyle( color: Colors.red, fontWeight: FontWeight.bold, ), ), )
パスワードリセット画面にAppBarを追加する
- このままのパスワードリセット画面だと前のログイン/パスワード画面に戻れなくなるので、AppBarを追加して、前の画面に戻れるようにします。
reset_password_screen.dartのコード
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
class ResetPasswordScreen extends StatefulWidget {
const ResetPasswordScreen({super.key});
@override
State<ResetPasswordScreen> createState() => _ResetPasswordScreenState();
}
class _ResetPasswordScreenState extends State<ResetPasswordScreen> {
// メッセージ表示用
String infoText = '';
String mailAddress = '';
@override
Widget build(BuildContext context) {
return Scaffold(
//ここから追加
appBar: AppBar(
title: Text(
'パスワードリセット',
),
),
//ここまで追加
body: Center(
child: Container(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// メールアドレス入力
TextFormField(
decoration: const InputDecoration(labelText: 'メールアドレス'),
onChanged: (String value) {
mailAddress = 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.sendPasswordResetEmail(email: mailAddress);
setState(() {
infoText = "パスワードリセットメールを送信しました。";
});
} catch (e) {
setState(() {
infoText = "パスワードリセットメールの送信に失敗しました：${e.toString()}";
});
}
},
),
)
],
),
),
),
);
}
}
- パスワードリセット画面
動作確認
- パスワードリセット画面から任意のメールアドレスを入力して、「パスワードリセット」ボタンをタップします。
- すると、「パスワードリセットメールを送信しました。」と表示されますので、入力したメールアドレスを確認します。
- メールに添付されたURLをクリックして、パスワードリセット画面が表示されます(PC側)ので、新しいパスワードを入力して「保存」ボタンをクリックします。
- パスワードが変わっているかアプリでログイン画面に戻って、変更したパスワードでログインしてみて、ログイン成功すればOKです
次はバリデーションチェックの実装を行なっていきたいかと思います。