Flutter

【Flutter】get_itとFirebaseのAuthenticationを使用し、ユーザー登録機能を実装する

作成日：2022年04月13日

更新日：2022年04月13日

前回は、Flutter で Firebase を使用するために設定し、ログインを実装しました。

今回は、ユーザー登録機能を実装します。

今回も Firebase と Flutter をやりとりするのには、パッケージで get_it を使用します。

Firebase の設定やログインのソースコードは、前回の内容をご確認ください。

【Flutter】get_itでFirebaseを設定し、ログイン機能を実装する

まずは、firebase_service.dart に Authentication と連携するため、registerUser関数を作成します。

registerUserでは、emailとpasswordを設定します。

dart
class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;

  FirebaseService();

  Future<bool> registerUser({
    required String email,
    required String password,
  })

FirebaseAuthのcreateUserWithEmailAndPasswordを使用し、email と password を非同期で確認します。

email と password が存在していた場合 true を返し、存在していない場合 false を開始ます。

また、ログイン時エラーが発生した場合 false を返すように、try/catch で設定します。

dart
Future<bool> registerUser({
  required String email,
  required String password,
}) async {
  try {
    UserCredential _userCredential = await _auth
        .createUserWithEmailAndPassword(email: email, password: password);
    return true;
  } catch (e) {
    print(e);
    return false;
  }
}

次は、register.dart を作成します。

dart
class Register extends StatefulWidget {
  Register({Key? key}) : super(key: key);

  @override
  State<Register> createState() => _RegisterState();
}

class _RegisterState extends State<Register> {
  double? _deviceWidth, _deviceHeight;

  final GlobalKey<FormState> _registerKey = GlobalKey<FormState>();

  String? _email;
  String? _password;

  void _register() async {
    _registerKey.currentState!.save();

  }

  @override
  Widget build(BuildContext context) {
    _deviceWidth = MediaQuery.of(context).size.width;
    _deviceHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(
            horizontal: _deviceWidth! * 0.05,
          ),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const Text(
                  'ユーザー登録',
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
                Container(
                  height: _deviceHeight! * 0.2,
                  child: Form(
                    key: _registerKey,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        TextFormField(
                          decoration:
                              const InputDecoration(hintText: 'メールアドレス'),
                          onSaved: (_value) {
                            setState(() {
                              _email = _value;
                            });
                          },
                        ),
                        TextFormField(
                          obscureText: true,
                          decoration: const InputDecoration(hintText: 'パスワード'),
                          onSaved: (_value) {
                            setState(() {
                              _password = _value;
                            });
                          },
                        ),
                      ],
                    ),
                  ),
                ),
                MaterialButton(
                  onPressed: _register,
                  minWidth: _deviceWidth! * 0.5,
                  height: _deviceHeight! * 0.06,
                  color: Colors.blueAccent,
                  child: const Text(
                    '登録',
                    style: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

get_itとfirebase_serviceをインポートします。

dart
import 'package:get_it/get_it.dart';
import 'package:test_form/services/firebase_service.dart';

FirebaseService の変数を作成します。

dart
class _RegisterState extends State<Register> {
  double? _deviceWidth, _deviceHeight;

  FirebaseService? _firebaseService;

initStateを作成し、GetItのgetでFirebaseServiceを呼び出します。

dart
@override
void initState() {
  super.initState();
  _firebaseService = GetIt.instance.get<FirebaseService>();
}

Firebase の Authentication の接続を確認するために、_registerで_firebaseServiceのregisterUserを設定します。

_resultを表示できるようにしておきましょう。

一通り完成したので、動作確認します。

メールアドレスとパスワードを入力し、登録ボタンをタップすると、

認証結果：true が返ってきました。

Firebase の Authentication にアクセスしてみます。

先程登録したメールアドレスが追加されていました。

では、メールアドレスではない文字を入力し、登録ボタンをタップします。

認証結果：false が返ってきました。

次回は、get_it と cloud_firestore で、Firebase のデータベースを実装する

【Flutter】get_itとcloud_firestoreで、Firebaseのデータベースを実装する

お知らせ

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

【Flutter】get_itとFirebaseのAuthenticationを使用し、ユーザー登録機能を実装する

お知らせ

カテゴリ

最新順

【React】Zustandで、簡単に状態管理する

【Ruby on Rails】登録フォームを作成し、データベースを保存する

【Ruby on Rails】ルーティングを設定する

【Ruby on Rails】データベースの内容をブラウザに表示する

【Ruby on Rails】rails consoleを使い、データベースを追加する