ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。

FlutterFlowで作成!テンプレートでタスク登録アプリ ー 第3回 アカウント作成をしてみよう(1)

FlutterFlowで作成!テンプレートでタスク登録アプリ ー 第3回 アカウント作成をしてみよう(1)

こんにちは!

今回はFlutterFlow初心者向けシリーズ「FlutterFlowで作成! テンプレートでタスク登録アプリ」の第3回「アカウント作成をしてみよう(1)」です。

今回は、ユーザーアカウント作成に関するところを見ていこうと思います。

前回のコンテンツはこちらです。 blog.nocodelab.jp

第1回目のコンテンツはこちらです。 blog.nocodelab.jp

1.アカウント作成について

FlutterFlowでは、FirebaseのAuthenticationを利用してアカウント作成/ログイン処理を行います。
RobinDoのテンプレートでは、予めAuthenticationが使用できるような設定になっており、認証方法は、メールアドレスとパスワードを利用した認証になります。
※FlutterFlowは他にもGoogleやFacebook等での認証方法も可能です。

実際にAuthenticationが有効になっているか確認してみましょう。

2.Authenticationの設定について

左メニューの「Authentication」をクリックすると、Authenticationの設定画面が開きます。

上部にある「Enable Authentication」のトグルが右になっているとON=有効ですので、有効になっていることが確認できます。
このトグルをONにすることでFirebaseのAuthenticationと連携できるようになっています。

また、その下にある「Initial Page」の「Entry Page」は未ログイン状態でのトップページ、「Logged in Page」はログイン状態でのトップページの画面を設定します。
ここでは、それぞれ、SplashScreen/myTasks 画面が設定されていることが確認できます。

3.Usersコレクションについて

RobinDoではアカウント作成すると、アカウント情報は「Users」コレクションに登録するようになっています。
Usersコレクションの中も確認してみましょう。

ちなみに、FlutterFlowでは「Users」という名前でコレクションを作成すると、自動で必要なフィールドを予め追加してくれます。
上図でラインを引いている項目が自動で設定されたフィールドになります。

  • uid
  • email
  • display_name
  • created_time
  • phone_number
  • photo_url

アカウントのデータを保持するコレクションは「Users」にする、というのがFlutterFlowではデフォルトのようになっていますが、「Account」コレクションでもどんな名称にしても大丈夫です。
ただし、上記のフィールドを定義しておくことは必須ですのでご注意ください。

また、RobinDoのUsersコレクションには、

  • Password
  • FullName

と必須項目以外にフィールドが追加されています。
Passwordは使用しないので、削除しても大丈夫です。
※パスワードに関しては、Firebaseでパスワード管理されるのでUsersコレクションにパスワードを保持する必要はありません。また、ログインパスワードを目に見える形でDBに保存するのはセキュリティ上望ましくありません。 もし保存するなら暗号化する必要があるかと思います。

FullNameは入力項目にFullNameとあるので、残しておきましょう。

当ブログではFlutterFlowのサインイン/サインアップについて詳しく触れていますので、こちらもご覧ください。

こちらもFirebaseのAuthenticationを利用したメールアドレス/パスワードでの認証方法になっています。

blog.nocodelab.jp

では、アカウント作成を行うRegister画面を見てみましょう。

4.Register画面

Register画面でアカウント作成を行います。
画面の主な部品は以下の通りです。

Widget 内容 備考
TextField FullName入力フィールド ※アカウント作成時の必須項目ではありません
TextField メールアドレス入力フィールド
TextField パスワード入力フィールド
TextField パスワード(確認)入力フィールド
Button Create Account アカウント作成処理を実行
Button Login Login画面へ遷移

4.1.TextFieldの設定

パスワードTextFieldの主な設定を見てみましょう。

プロパティ 内容 備考
Password Field パスワード パスワードの項目の場合はONにします。
ONにすると、「Toggle Hide Password Icon」のプロパティが表示されます。Toggle Hide Icon Sizeを未入力にしても「Toggle Hide Password Icon」の機能はなくならないのでご注意ください。
※「Toggle Hide Password Icon」 はパスワードを可視化するためのアイコンのことです。
Initial Value 初期値の設定
Label Text TextFieldのラベル テキストにフォーカスをあてるとテキストボックスの上部に表示されます。
Hint Text 入力内容のヒント HTMLのplaceholderと同じです。

4.2.Actionsの設定ーCreate Account

では次にボタンのアクションを見てみましょう。

「Create Account」ボタンのアクションを確認してみましょう。
「Create Account」ボタンを選択し、右のパネルの「Actions」タブから「Open」ボタンをクリックします。

Actions Editorが開かれます。
これを確認すると、 タップした時に、アカウント作成のAction(Create Account)が実行される設定になっています。

Actionの設定項目も確認してみましょう。

項目 設定値 説明
Action Auth Create Account Firebase Authentication->Create Accountを選択します。
Auth Provider Email 認証方法を選択します。
ここでは、Email+パスワードなので、Emailを選択します。
Email Field EmailのText Field Emailを入力するTextFieldを設定します。
Password Field パスワードのText Field パスワードを入力するTextFieldを設定します。
Confirm Password Field パスワード(確認)のText Field パスワード(確認用)を入力するTextFieldを設定します。
Create User Document ON アカウント作成時に、データーベースに登録するかどうかを設定します。
ONにすると、このアクション内で自動でデータが登録されます。
Collection Users アカウント作成時に、登録対象となるコレクションを設定します。
ただし、前述したとおり必須フィールドがあることに注意してください。
Set Fields display_name Usersコレクションに登録するフィールドがある場合、設定します。
RobinDoテンプレートではdisplay_nameを登録するようになっています。

Set Fieldsには、アドレス以外に登録したいコレクションのフィールドを設定します。
今回は、「FullName」のTextFieldを「display_name」に設定するようになっています。
※ちなみに、PasswordもUsersコレクションにありますが、こちらは自動で登録されません。

Usersコレクションのdisplay_nameは必須項目ですが、せっかく、UsersコレクションにFullNameフィールドが用意されているので、ここではFullNameフィールドに設定するように変更してみましょう。

  • FieldにFullNameを設定
  • Value SourceにFrom Variableを設定

上記の「UNSET」の編集アイコンを押下して、FullNameのTextFieldを選択します。

5.実行してみよう

では、実際に実行して確認してみましょう!

実行は右上部のTest Iconをクリックします。

デプロイされるのに、2~3分ほどかかるので、待ちましょう。

デプロイされると、以下のようにSplashScreen画面が表示されます。

「Register」ボタンをクリックします。
クリックすると、Register画面へ遷移されます。

Full Name、Email Address、Password、Confirm Passwordをそれぞれ入力して「Create Account」ボタンをクリックします。

クリックすると、アカウントが作成されます。
アカウント作成されるとログイン状態になるので、myTasks画面へ遷移されます。

では、アカウントが正しく生成されているか実際にFirebaseをみてみましょう。

まずは、Firebase Authenticationから、ユーザーが生成されているか確認します。
アプリに設定したFirebaseのプロジェクトのコンソールより、Firebase Authenticationを選択します。

ユーザーの一覧がここで確認できるので、表示してみると、 先ほど登録したメールアドレスのユーザーが登録されていることがわかります。

次に、Firebase Firestoreでコレクションの確認をしましょう。
Usersコレクションに、email、FullNameに入力された値が正しく登録されることが確認できますね。

他のuid、created_timeの項目はアカウント生成の時に自動に設定されるフィールドになります。

これでアカウント生成されていることが確認できました。

また、アカウント作成時のエラーもFirebase Authenticationで自動で行うようになっています。
たとえば、メールアドレスではない場合、既に登録済みのメールアドレスの場合等以下のように、画面下部にエラーメッセージが表示されるようになっています。

ちなみに、パスワードポリシーに関しては、ここではFirebase Authenticationのパスワードポリシーに則ったものとなっています。
Firebase Authenticationのパスワードポリシーは6桁以上になっています。 より複雑なパスワードポリシー(例えば英数字両方含む等)にする場合は、FlutterFlowの入力チェックでチェックする必要があります。

6.Login画面

では、次にログイン画面を見てみましょう。 Login画面の主な画面部品は以下の通りです。

Widget 内容 備考
TextField メールアドレス入力フィールド
TextField パスワード入力フィールド
Button Login ログイン処理を実行
Button Register Register画面へ遷移

6.1.Actionsの設定ーログインボタン

それでは、ログインのActionについて見ましょう。
「Login」ボタンを選択し、右パネルの「Actions」より確認します。

「Login」ボタンをタップしたらログインするように設定されています。

Actionの設定項目は以下のようになっています。

項目 設定値 説明
Action Auth Login Firebase Authentication->Log inを選択します。
Auth Provider Email 認証方法を選択します。
ここでは、Email+パスワードなので、Emailを選択します。
Email Field EmailのText Field Emailを入力するTextFieldを設定します。
Password Field パスワードのText Field パスワードを入力するTextFieldを設定します。

7. ログインしてみよう

では、ログインも実行してみましょう。
再度、TestModeを起動してください。

TestModeを起動すると、どの画面が表示されましたか?
おそらく、先ほどRegister画面でアカウント作成された後かと思いますので、認証済みと判断され、「myTasks」画面が初めに表示されたかと思います。

これは、前述のとおり、ログイン済みの場合の初期表示画面が「myTasks」画面に設定されているからです。
設定箇所は、Setting->Authenticationの「Logged in Page」になります。

ログインができるかどうか確認したいので、一度ログアウト行いましょう。
ログアウト画面は、下部のメニューバーの右のアイコンをクリックします。

クリックするとMyProfile画面へ遷移します。
そこの「Logout」ボタンがありますので、それをクリックします。

ログアウトすると、SplashScreen画面へ遷移されるので、「Login」ボタンを押下し、Login画面を表示します。

Login画面で、先ほど作成したアカウントのメールアドレス&パスワードを入力し、ログインボタンをクリックします。

ログインできればmyTasks画面へ遷移されます。

もちろん、Loginのチェック自体はFirebase Authenticationが行ってくれます。 ログインエラーが発生した場合、Register画面と同じように、画面の下部にエラーメッセージが表示されます。

これで、アカウント作成/ログインについて確認できました。

9.まとめ

認証は基本的にすべてFirebase Authenticationにお任せになります。
未ログインとログイン時とで遷移先の画面を簡単に設定できるので便利ですね。ただ、権限によってトップページが変更になる、といった場合は自分で制御する必要があります。

今回はアカウント作成/ログインの基本部分のみでしたが、もう少しユーザーアカウント作成について掘り下げていく予定にしています。
例えば、アカウント作成時にメールアドレスの確認メールを送る、エラーメッセージを日本語表記するについてもまた今後説明する予定にしています。

今回は、ここまで。
最後まで読んでいただきありがとうございました!

コンテンツ

第1回 はじめてみよう。

第2回 テンプレートを色々みてみよう。

第3回 アカウント作成をしてみよう(1)(今回です)

第4回 画面遷移をしてみよう。

第5回 ユーザー編集を修正してみよう。

第6回 タスク一覧を修正してみよう。

第7回 エラーメッセージを出してみよう(1)

第8回 エラーメッセージを出してみよう(2)

第9回 アカウント作成しよう(2)

※ コンテンツが追加されるとリンクされるようになります。今しばらくお待ちください😌

※全9回の予定ですが、内容やボリュームによって前後する可能性もあることをご了承ください。