🐈

Firebaseを使って新規登録をしてユーザー登録してみよう

2023/10/30に公開

はじめに

Firebaseで新規登録してuidを発行したいと考えたため、この記事を書いた。

Firerbaseを使って新規登録するためにはなにがあるのか?

よく使われているものを挙げると...

メール認証
電話番号認証
匿名認証
Appleアカウント認証
Google認証
Line認証
などたくさんの認証(新規登録)できるものがありますが、
今回はメールアドレスとパスワードを使って新規登録できるようにしていきます。

Firerbaseを使うためにAppとFirebaseを連携させる。

今回、FirebaseCLIを用います。
こちらの記事を参考にしていただければできると思います。
https://firebase.flutter.dev/docs/cli/
https://firebase.google.com/docs/cli?hl=ja#windows-npm

メール認証作成に必要なものを上げていく

・Firebaseのパッケージをpubspec.yamlファイルに入れる。
・メールアドレスとパスワードを用意する。
・Firebaseに登録するロジックを書く。
・Firebaseを開いて登録できているか確認する。

FirebaseAuthで用いるパッケージをpubspec.yamlファイルに導入する

今回、導入するパッケージは以下です。
https://pub.dev/packages/firebase_auth
https://pub.dev/packages/firebase_core

この2つをdependenciesに

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^4.12.0
  firebase_core: ^2.20.0

Firebase Authenticationを設定してメールアドレス認証を使えるようにする。

この画面になっていたら問題なく設定できている。

main.dartにおまじないを追加する

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

これを記載しないとFirebaseと接続できないので注意が必要

メールアドレスとパスワードを用意する。

自分の好きなメールアドレスとパスワードを用意しよう。
メールアドレスはメール認証を入れるのであれば現在、使っているものを使う。
パスワードは大文字を含めた6文字以上で作成する(Firebaseの固有設定)

Firebaseに登録するロジックを書く

            ElevatedButton(
                onPressed: () {
                  final email = emailController.text;
                  final password = passwordController.text;
                  FirebaseAuth.instance.createUserWithEmailAndPassword(
                    email: email,
                    password: password,
                  );
                },
                child: const Text('新規登録'),
              )

実際にFirebaseに登録できているか確認する。

uidが発行されているため、ユーザー登録できていることがわかった。

参考文献

Flutter大学

Discussion