🧯

[Flutter×Firebase] firebase_authのエラーハンドリング(例外処理、try-catch)を学ぶ

2022/05/03に公開約4,200字

記事の内容

アプリを作っていると、必要な時に応じてエラーを返したいと思うことありますよね。
「状況に応じてDialogにて、エラーハンドリングを表示させる」記事になります。

エラーハンドリング(例外処理)とは

プログラムの処理中に処理が妨げられる事象が発生した際、その処理をエラーとして対処する処理のことである。 例外処理とも呼ばれる。

今回使う、例外処理の基本(try-catch)

    try{
      ログインする
    }
    catch(e){
      print(e); //エラー内容が出力
      //出力例) パスワードが間違っています
    }

Dartの例外処理の基本が上記のtry-catch文です。
tryで実行された処理にエラーが発生した際に、catchで指定した処理が実行されます。
引数のeでtryが失敗したときのエラーを受け取ることができます。

新規登録画面 エラーハンドリング

新規登録画面 コード

ElevatedButton(
              onPressed: () async {
                startLoading();
                try {
                  await signUp();
                } on FirebaseAuthException catch (e) {
                  if (e.code == 'email-already-in-use') {
                    _emailAlreadyInUseDialog(context);
                  }
		  if (e.code == 'weak-password') {
                    _weakPasswordDialog(context);
                  }
                }
              },
              child: Text(
                '登録',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),

コード解説

on FirebaseAuthExceptionを指定すると、e.codeで発生したエラーコードを取得でき、
エラー別に実行する処理を指定できます。
FirebaseAuthExceptionによって起こる可能性があるエラーコードはfirebase_authのドキュメントから確認できます。

メソッド

  • email-already-in-use:
    • メールアドレスが有効でない場合にスローされます。
  • invalid-email:
    • 指定されたメールアドレスを持つアカウントが既に存在する場合にスローされます。
  • operation-not-allowed:
    • email/password アカウントが有効でない場合にスローされます。Firebase コンソールの Auth タブで、メール/パスワード アカウントを有効にしてください。
  • weak-password:
    • パスワードが十分に強くない場合に投げられる。

新規登録処理のe.codeは公式ドキュメントに記載されております。

https://pub.dev/documentation/firebase_auth/latest/firebase_auth/FirebaseAuth/createUserWithEmailAndPassword.html

ログイン画面 エラーハンドリング

ログイン画面 コード

ElevatedButton(
                      onPressed: () async {
                        startLoading();
                        try {
                          await login();
                        } on FirebaseAuthException catch (e) {
                          if (e.code == 'user-not-found') {
                            _userNotFoundDialog(context);
                          } else if (e.code == 'invalid-email') {
                            _invalidEmailDialog(context);
                          }
                        }
                        endLoading();
                      },
                      child: Text(
                        'ログイン',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),

メソッド

  • invalid-email:
    • メールアドレスが有効でない場合にスローされます。
  • user-disabled:
    • 指定されたメールに対応するユーザが無効化されている場合にスローされる。
  • user-not-found:
    • 与えられたメールに対応するユーザが存在しない場合にスローされます。
  • wrong-password:
    • 与えられた電子メールのパスワードが無効であるか、または電子メールに対応するアカウントにパスワードが設定されていない場合にスローされます。

公式ドキュメント

https://pub.dev/documentation/firebase_auth/latest/firebase_auth/FirebaseAuth/signInWithEmailAndPassword.html

Dialogでエラーハンドリングを表示

今回はDialogにてエラーハンドリングを表示させます。
他にもSnackBar classなどを使用して、エラーハンドリングを表示するのも良いですね!

https://api.flutter.dev/flutter/material/SnackBar-class.html

新規登録 エラーハンドリングDialog

void _emailAlreadyInUseDialog(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext dialogContext) {
      return AlertDialog(
        title: Text('指定したメールアドレスは登録済みです'),
        actions: <Widget>[
          TextButton(
            child: Text('OK'),
            onPressed: () {
              Navigator.pop(dialogContext);
            },
          ),
        ],
      );
    },
  );
}

ログイン エラーハンドリングDialog

void _userNotFoundDialog(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext dialogContext) {
      return AlertDialog(
        title: Text('ユーザーが見つかりません'),
        actions: <Widget>[
          TextButton(
            child: Text('OK'),
            onPressed: () {
              Navigator.pop(dialogContext);
            },
          ),
        ],
      );
    },
  );
}

終わりに

いかがでしょうか?
今回の記事は駆け出しエンジニア、これからFlutterでの業務を行う方への力になれる記事にしてみました!
何か意見がありましたら私のツイッターまでご連絡ください。

https://twitter.com/hikarugp24

Discussion

ログインするとコメントできます