こんにちは。今日は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のメールアドレス認証について解説しているので、動画で見たい方はこちらもどうぞ。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FYeg2WfY4rnI%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eアプリ・Webサービスの開発の無料相談はこちらAdalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。