今回は前回に引き続きFlutter Flowの使い方をやっていきましょう。
前回の記事↓
今回は新規登録の機能のための項目の追加から進めていきます。
- 入力項目の追加
- 新規登録のActionの設定
- ログインActionの設定
- ログアウトボタンの作成
前編の想定作業時間は40分程度です。
こちらのQRコードを読み取ることで、この記事をスマホで表示させることができます。
モニターが複数台ない方はスマホで動画を見ながら作業すると効率よく進められるかと思います。
入力項目の追加
まずは、usersコレクションに合わせて入力項目を追加します。
コレクションを確認して新規登録時に入力させたい項目を把握
1からWidgetを設置して作成してもいいのですが、複製してちょっとだけ変更するようにします。
変更するプロパティ
- Widget名：displayname_Create
- Label Text：Displayname
- Auto Fill Hint Option：Name
- Keyboard Type：Text
新規登録のActionの追加
続いて新規登録のボタンにアカウント作成のActionを追加していきます。
動画内では既存のActionを削除してご自身で設定を行うようにしています。
削除したら「Add Action」を選択して「Search for Action」に「Auth」と入力すると「Create Account」が表示されるのでそれを選択
Firebaseのサービスの1つでユーザーを認証し、アプリへのアクセスを管理するためのサービスです。
ここで疑問に思うのが、FlutterFlow内にあるコレクションとは何が違うのかと思いますよね。
FlutterFlowのコレクションはあくまでFlutterFlow内でユーザー情報を利用するためのものです。
例を挙げるとマイページなどです。
マイページはログイン中のユーザー情報が表示されますよね？
この情報はusersコレクションから引っ張ってきて表示させます。
対してFirebaseのAuthenticationは、アプリにログインするための情報を保存してアプリへのアクセスを管理します。
FirebaseAuthenticationを利用することで、今回はメールアドレスとパスワードでのログイン機能ですが、電話番号やソーシャルログインを容易に実装することができます。
さらに、セキュリティも強化されます。
ちなみに、パスワードはFirebaseのAuthenticationで管理しているのでusersコレクションからは変更はできません。
今回の記事では便宜上コレクションに追加という表現で進めていますが正しくは、FirebaseのAuthenticationとusersコレクションにそれぞれアカウント情報やユーザー情報を追加する機能となります。
変更する設定
- Auth Provider：Email
- Email Field：emailAddress_Create
- Password Field：password_Create
- Confirm Password Field：空白
- Create User Document：ON
Add Fieldをクリックすると選択したコレクションが持っているFieldが順番に追加されていきます。
必要なFieldのみ設定します。
変更する設定
- Collection：users
- email Value Source：From Variable
- email UNSET：Widget State→emailAddress_Create
- display_name Value Source：From Variable
- display_name UNSET：Widget State→displayName_Create
- created_time Value Source：From Variable
- created_time UNSET：Global Properties→Current Time
- photo_url / uid / phon_number：Remove
ログインActionの設定
続いてログインActionを設定していきましょう。
動画内では既存のActionを削除してご自身で設定を行うようにしています。
削除したら「Add Action」を選択して「Search for Action」に「login」と入力すると「Login」が表示されるのでそれを選択
変更する設定
- Auth Provider：Email
- Email Field：emailAddress
- Password Field：password
それぞれのFieldはWidget名で選択していて、どのWidgetに入力された値を参照してFirebaseのAuthenticationの情報と照らし合わせるかを設定してます。
ログアウトの実装
最後にログアウトの実装です。
Column Widgetにbutton Widgetを配置して、画面中央に配置します。
配置手順
Column Widget：Main Axis Alignmentで縦中央にする。
button Widget：Alignmentで横中央にする。
ActionのSearch for Actionでlogoutを検索して、LogOut Actionを選択する。
- 新規登録はFirebaseのAuthenticationに対しての設定とコレクションに対しての設定がある
- ログインはコレクションの情報を参照しているのではなく、FirebaseのAuthenticationの情報と入力された値を照らし合わせている
ここまでお疲れ様でした！
今回のログインまでの機能を何も見ずに実装できるようになるだけで、FlutterFlowに対して理解度が増し、他の機能を実装するときに受け入れやすくなるかと思います。
今回は実装しませんでしたが、Confirm Password（確認用パスワード）もぜひご自身で実装してみてください。