【FlutterFlow】できたメール認証！いよいよテストラン！

はい、こんにちは～。前回記事からの続きです。ただいまFlutterFlowでメール認証に取り組んでいます。

前回は、テストランの前にバグとりをしました。バグをとるといっても、テンプレートにある不要なアクションやウィジェットを削除しただけなんですけれども。あるあるです。

今回は、今度こそテストランをやりましょう！サインアップができれば成功です。動くかな～。動かないかな～。どきどきです。

では行ってみよ～。

サインアップしてユーザ登録

では、今回やることを確認します。下図のようなサインアップページを作りましたね。NameとAgeはコレクションとの紐づけをしていないので、EmailとPasswordのみを入力してサインアップしたいと思います。

Signupボタンを押すと２つのアクションが走ります。アカウント作成とメール認証用のメール送信です。

心配な点は、CreateAccountアクションにおけるPasswordフィールドの紐づけです。下図のようにアクション設定では、「Password」としてしか設定できませんでした。

本当は、PasswordSignUpというテキストフィールドと紐づけしたかったのですが、できていないように見えます。う～ん。

何はともあれテストラン

心配してもきりがありません。とりあえずテストランをやります。ぽちっとな。

サインアップページを開きます。あれ、もう最初からおかしいです。パスワード入力（入力文字が隠されるもの）になってないです。

Signinの方は、どうでしょう。ああ、きちんとPassword入力用のフィールになっていますね。

明らかにサインアップ側の設定がおかしいです。この時点でビルダーに戻ります！

サインアップページを修正

サインアップページのパスワードフィールドを修正します。

何か忘れている…。これだ！Password Fieldがオフになっていました。だから、Create AccountアクションでPasswordフィールドの候補として表示されなかったのかな～。

ああ、やっぱりそうだ～。これでPasswordフィールドの紐づけがうまくいったはず。

これに加えて学んだことは、フィールド名はきちんと識別できるように名前をつけましょう、ということです。「Password」がチョイスとしてあがりましたが、これはSigninページにあるパスワードフィールド名でした。分かりにくいね。。。

テストランをもう1回

メールアドレスとパスワードを入力して、サインアップを押します。

おや、ログイン後のページに入れちゃったぞ～。いいのか。

一方、メール認証のリンクはとどきました。

リンクをクリックすると、メールが認証されたよ～と表示されました。

いったんログアウトしました。こんどはサインイン。

きちんと登録されているならサインインできるはず…。

できた～。

Firebaseのログイン履歴もばっちり登録されています。

ただ、ユーザーの一覧をうまく表示できませんでした。何がいけないのか？多分Firebaseのセキュリティ設定に引っかかっていると思います。

はい、本日は以上です。何はともあれメール認証をおわらせることができました！ここまで書いて、できませんでした～、では読者様にご迷惑ですので、よかったよかった。

次回は、パスワードリセットをやりましょうか。では。