こんにちは。今日はNo-Codeツールの一つであるFlutterFlowを使ってメールアドレス認証の実装方法について解説したいと思います。
FlutterFlowの場合、テンプレートを使って認証機能を作るとメールアドレスとパスワードを使ったサインアップ・ログイン機能がデフォルトで作れれてると思います。、FlutterFlowでは、それだけでなく「メールアドレスの認証機能」も実装することが可能です。この「認証」とは、
ユーザーがサインアップ画面でメールアドレスとパスワードを入力すると、
指定したメールアドレスに確認メールが送信され、
そのメール内に含まれるリンクをクリックすることで認証が完了し、
ログイン画面から先ほどのメールアドレスでログインする。
というものです。
認証が完了すれば、その後は入力されたメールアドレスとパスワードでログインすることが可能となります。今日はこの一連の流れをFlutterFlowで実装する方法について、以下で詳しく解説していきたいと思います。
FlutterFlowでメールアドレス認証機能の作り方
では早速FlutterFlowでのメールアドレス認証機能の実装方法について書いていきましょう。
まずはテンプレートからサインアップ画面・ログイン画面を作成
テンプレートを利用して認証画面を作成します。テンプレートのAuthのところから探して好きな画面を作りましょう。以下のような感じですね。
SignUpボタンのActionを修正
SignUpボタンには以下スクショの一番上のようにAuthのCreate Accountというアクションが最初から書いてあるかと思います。
その下に、以下の赤枠のようにSend E-mail verification linkというのを選択・追加します。
そのあとは、「メールアドレスを送信しました〜」のメッセージを表示する画面に遷移させたいので、以下のような画面を作成し、Navigate Toで遷移させます。
ログインボタン押下時に判定処理を実装
最後はログイン画面です。ログインボタンを押した際にAuth のLoginアクションがデフォルトで書かれているかと思います。
その後add conditionalからEmail Verifiedを選択します。すると、そのメールアドレスが認証済みかを判定できるようになります。
認証済みであればTRUEなのでHOME画面へ、そうでなければFLASEなのでアラートダイアログをあげるように作ってみました。
Youtube動画でFlutterFlowのメールアドレス認証を解説
動画でもFlutterFlowのメールアドレス認証について解説しているので、動画で見たい方はこちらもどうぞ。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。