関連のツールの紹介、使い方などをやさしく説明しています。エラーチェックもしてくれちゃいます!!今回は、BubbleでWebアプリでは頻度の高い、ログインについて3回(予定)にわけてご説明します。第1回では、ユーザ登録をしてみましょう!ユーザ登録の流れについて本ブログでは以下のような流れでユーザ登録を行うことにします。※この時点では仮登録とします登録されたメールアドレスにメールを送信ユーザは2で送信されたメールの確認のリンクをクリック3のリンクをクリックしたことで、本登録とする本登録を持ってログイン可能とするまた、画面は以下の3画面を用意しました。(mypage)1.サインアップをしよう!まずはユーザ登録できるようにしましょう。必要な入力項目は、メールアドレス、パスワード、パスワード(確認用)。あとはサインアップのボタンです。format」それぞれ、EMail、Passwordを選択しましょう。エラー処理についてはまた今度。画面ができたら、Workflowです。サインアップボタンを押下した時の処理を追加しましょう。BubbleではDataに「User」が予め用意されていますが、このアクションを使用すると、「User」に全て登録されるようになっています。設定値はここでは以下の画面のようにします。今後メールアドレスをブラウザに記憶させておくかこれでお気づきでしょうか。ユーザ登録の流れで説明したうちの、1~3までできるのです。page」で設定したページになっています。ちなみに送信するメールの題名、本文及び確認画面へのリンク文はSettingsタブのLanguagesからそれぞれ下記の値に設定できるようになっています。Link日本語にすると、自動で翻訳された文章が設定されていますが、あくまで自動で翻訳なので、適宜修正しましょう。2.仮登録から本登録へユーザの登録から確認メールの送信までができるようになりました。ここで、確認メール先に書かれているリンクをクリックした場合の処理を行いますが、実はページを作成する以外、特にする必要はありません。ログインユーザの情報は、「User」データから取得されます。User」(ログイン中のユーザ情報です)を選択すると、これら以外の項目も見れます。その中の一つの「email_confirmed」という項目がありますが、確認メールのリンク先を表示すると、この項目が自動的にnoからyesに変更されます!この項目を見るだけで、登録確認しているかのチェックができるのです!とても便利ですよね!!3.ログインについてユーザ登録もでき、登録確認もできるようになりました。ログインについてもBubbleで作ってみましょう。必要な入力項目は、メールアドレス、パスワード。あとはサインインのボタンです。今回は、サインアップとサインインは同じ画面で、クリックによって切り替えするようにしています。各入力項目の設定は、サインアップの時と同じです。サインインボタン押下時のWorkflowを追加しましょう。サインアップよりシンプルですが、一つ違う項目があります。24時間ログイン状態にするかこれは、アプリの設計により決めてください。「はい」にしています。Step2には、ログイン後の画面(mypage)に遷移させます。ここでのポイントは条件です。仮登録状態ではログインはさせたくないので、条件を付けています。confirmed」を条件に入れています。このパラメータ、先ほど説明しましたね。登録確認画面を表示するとBubbleが自動で更新する項目です。これが「yes」なら確認されているということです!ちなみに、Step3、4ではエラーメッセージを表示させるようにしています。エラー内容は、登録確認が取れていないためログイン不可エラーです。これで、一通りユーザ登録~ログインまでの機能ができました!ここまでノーコードでできて、本当に便利だなと実感します。補足(Q&A)いくつかご質問をいただきましたので、回答させていただきます。テーブルに該当のユーザーは登録されます。