FlutterFlowでメールアドレス認証の実装方法

FlutterFlowでメールアドレスが認証されたユーザーだけログインを可能とする実装方法を解説します。

FlutterFlowではFirebaseと連携させることで簡単にログイン機能が実装できますが、デフォルトではダミーのメールアドレスでもアカウントの作成が可能となっています。それでは実用面で問題がでてくるので入力されたメールアドレスの確認が完了したユーザーのみログインを許容する実装が必要となってきます。

前提

• FlutterFlowとFirebaseを接続済み
• メールアドレス認証を含まないアカウント作成は経験済み（テンプレートを追加すると勝手に実装されていますが）

具体的な手順

では、さっそくメールアドレスの確認を含めたアカウント作成手順を解説していきます。

アカウント作成ページを作成

• テンプレートからそれらしいアカウント作成ページを選択。
  Auth配下にあるCreate Accountからよさそうなものを選んでいただければよいと思います。

• 以下のようなアカウント作成ページが出来ます。この時点でCreate Accountボタンに対してメールアドレスを使った認証は実装されています。

アカウント作成時に確認用メールを送信

• Create Accountボタンに対してのアクションを修正していきます。
• 以下はCreate AccountボタンのActionのゴールイメージです。デフォルトでは一番上のAuth “Create Account”のみ設定されているかと思います。

• 2番目のアクションとしてメール確認用のリンクを含んだリンクを通知する処理を追加します。
• アクションにSend E-mail Verification Linkを追加します。

• その下にLog outを含めます。アカウント作成後にログインが自動で行われないようにしています。

• 最後にNavigate Toを使ってメール送信が完了した画面に遷移させます。

ログイン機能の実装

ログイン時にメール確認が終わっているユーザーのみログインを許容する実装をします。

• テンプレートからログインページを選んでログインページを作成してください。

• Sign inボタンを押した際のActionを設定していきます。ゴールイメージはこんな感じです。
  デフォルトでEmailとパスワードによるログイン機能が実装されているかと思います。それにいくつかアクションを追加していきます。

• ログイン認証処理後にConditionalを追加し、Email Verifiedを選択。

• True（メールが確認済み）の場合にHomeページへ遷移、False（メール未確認）の場合はAlert Dialogを表示するよう設定

Firebaseでのメッセージの変更

• 通知されるメールの設定を一部変更できます。
  Firebase→Authentication→テンプレート→メールアドレスの確認
  で設定を変更できます。
• テンプレート言語も日本語にしておいてください。

テスト

これでアカウント作成時に入力したメールアドレスへ確認用通知が送られてくるはずです。

まとめ

今回はアカウント作成に必須となるメールアドレスの認証方法について解説しました。Firebaseの機能を使うことで非常に簡単に実装できたかと思います。