FlutterFlowで作成！テンプレートでタスク登録アプリー第3回アカウント作成をしてみよう（１）

FlutterFlowで作成！テンプレートでタスク登録アプリー第3回アカウント作成をしてみよう（１）

FlutterFlowで作成！テンプレートでタスク登録アプリー第3回アカウント作成をしてみよう（１）

こんにちは！

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

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

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

第１回目のコンテンツはこちらです。 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をクリックします。

デプロイされるのに、２～３分ほどかかるので、待ちましょう。

デプロイされると、以下のように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を設定します。