【Firebase④】Firebase Authで新規登録とログイン機能を実装する

Firebase公式チュートリアルを参考にしています

本記事では、Flutter× Firebaseの設定及び連携の方法は理解している前提で解説をしていきたいと思います!Firebaseを最初から学んでいきたいよーって方は、下記の記事からチェック✅してみて下さい👇

今回はFirebaseの機能の一つであるFirebase Authを使ってアプリの新規登録やログイン機能の実装方法を解説していきたいと思います。この機能はアプリ開発において必須のスキルとなりますので、一緒に学んでいきましょー!

Firebase Authの設定

Authenticationの設定

FirebaseのAuthencationを設定することで、メールアドレスやSNS情報でアプリにログインできるようになります。その手順を見ていきます。

👇 Firebaseプロジェクトを一つ作成し、Authenticationの”ログイン方法を設定”をクリックします

👇 今回は練習でメール/パスワードでのログイン機能を実装していきましょう。下記をクリックします。

👇 “有効にする”をタップし、”保存”を選択します。

👇 “メール/パスワード”が有効になっているのが確認できます。これでAuthenticationの設定は完了です。

Firestore Databaseの設定

ユーザーの新規登録のタイミングでFirebaseeのAuthenticationにユーザー情報を書き込みにいきますが、それ以外の情報(パスワード、ユーザーネーム等)はFirebase FireStoreに情報を書き込みに行けるようにしたいため、FireStoreの設定もしていきます。

詳細は下記の記事の”データベースの設定”をご覧ください

👇 ユーザー情報を保存するための箱を用意します

👇 詳細の設定をしていきます。コードでFireStoreに直接ユーザー情報を書き込めるようにしていきますが、今回は仮で作成します。”ドキュメントID”は自動IDをクリック、 “フィールド”と”タイプ”をそれぞれ以下のように設定し”保存”をクリックします。

👇 するとこのように登録できたかと思います(この画像には関係ない項目もありますが気にしないで大丈夫です) ひとまずこれでFIreStoreの設定は完了です。

Flutterの設定

pubspec.yamlの設定

公式ドキュメント(firebase_auth)から設定方法を確認します。”Installing”に記載あるコードを転記します

Fluttterで実装

Firebase Authに新規登録

Firebase Authでログインする