第１回 ユーザ登録をしてみよう
Bubbleでノーコードライフを楽しんでいますでしょうか？
Bubbleでは、今までの記事でもあったように、様々な機能がノーコードで実現できますよね！
なんとログイン処理も簡単に実装できてしまうんです！ エラーチェックもしてくれちゃいます！！
今回は、BubbleでWebアプリでは頻度の高い、ログインについて３回（予定）にわけてご説明します。
第１回では、ユーザ登録をしてみましょう！
ユーザ登録の流れについて
本ブログでは以下のような流れでユーザ登録を行うことにします。
メールアドレスとパスワードよりユーザ登録 ※この時点では仮登録とします
登録されたメールアドレスにメールを送信
ユーザは2で送信されたメールの確認のリンクをクリック
3のリンクをクリックしたことで、本登録とする
本登録を持ってログイン可能とする
また、画面は以下の3画面を用意しました。
- サインイン・サインアップする画面（index）
- 仮登録後メールのリンクの画面（confirm_registration）
- 本登録後のログイン画面 （mypage）
1.サインアップをしよう！
まずはユーザ登録できるようにしましょう。
必要な入力項目は、メールアドレス、パスワード、パスワード（確認用）。 あとはサインアップのボタンです。
各入力項目は、「This input should not be empty」にチェック、「Content format」それぞれ、EMail、Passwordを選択しましょう。
また、入力欄の下にエラーメッセージも表示するようにしていますが、 エラー処理についてはまた今度。
画面ができたら、Workflowです。サインアップボタンを押下した時の処理を追加しましょう。
WorkflowのAccountから「Sign the user up」を選択します。
BubbleではDataに「User」が予め用意されていますが、このアクションを使用すると、「User」に全て登録されるようになっています。
設定値はここでは以下の画面のようにします。
簡単に説明すると、
- Emai - メールアドレス
- Password - パスワード
- Require a password confirmation - 確認用のパスワードを要求するか
- Confirmation - パスワード（確認用）
- Send an email to confirm the email - 同時に確認用のメールを送るか
- Confirmation page - 確認用メールのリンクから飛ばすページ
- Remember the email - 今後メールアドレスをブラウザに記憶させておくか
これでお気づきでしょうか。 ユーザ登録の流れで説明したうちの、1～3までできるのです。
メールに関しては、設定したメール本文の最後に自動でリンクをつけてくれて、そのリンク先のページが「Confirmation page」で設定したページになっています。
ちなみに送信するメールの題名、本文及び確認画面へのリンク文はSettingsタブのLanguagesからそれぞれ下記の値に設定できるようになっています。
- CORE - Email confirmation subject
- CORE - Email confirmation body
- CORE - Confirmation Link
日本語にすると、自動で翻訳された文章が設定されていますが、あくまで自動で翻訳なので、適宜修正しましょう。
2.仮登録から本登録へ
ユーザの登録から確認メールの送信までができるようになりました。
ここで、確認メール先に書かれているリンクをクリックした場合の処理を行いますが、実はページを作成する以外、特にする必要はありません。
ログインユーザの情報は、「User」データから取得されます。Dataタブから見れるデータはEmail、Created Date、Modified Dateしかありませんが、実は各エレメントのプロパティから「Current User」（ログイン中のユーザ情報です）を選択すると、これら以外の項目も見れます。
その中の一つの「email_confirmed」という項目がありますが、確認メールのリンク先を表示すると、この項目が自動的にnoからyesに変更されます！
この項目を見るだけで、登録確認しているかのチェックができるのです！
とても便利ですよね！！
3.ログインについて
ユーザ登録もでき、登録確認もできるようになりました。
では、早速ログインについてもBubbleで作ってみましょう。
必要な入力項目は、メールアドレス、パスワード。 あとはサインインのボタンです。今回は、サインアップとサインインは同じ画面で、クリックによって切り替えするようにしています。
各入力項目の設定は、サインアップの時と同じです。
サインインボタン押下時のWorkflowを追加しましょう。 Accountから「Log the user in」を選択します。
サインアップよりシンプルですが、一つ違う項目があります。
- Stay logged In - 24時間ログイン状態にするか
これは、アプリの設計により決めてください。とりあえず「はい」にしています。
Step2には、ログイン後の画面（mypage）に遷移させます。
ここでのポイントは条件です。 仮登録状態ではログインはさせたくないので、条件を付けています。
「Only when」のところに、「Current User's email confirmed」を条件に入れています。このパラメータ、先ほど説明しましたね。登録確認画面を表示するとBubbleが自動で更新する項目です。これが「yes」なら確認されているということです！
ちなみに、Step3、4ではエラーメッセージを表示させるようにしています。 エラー内容は、登録確認が取れていないためログイン不可エラーです。
これで、一通りユーザ登録～ログインまでの機能ができました！
ここまでノーコードでできて、本当に便利だなと実感します。
2020/01/10 補足（Q&A）
いくつかご質問をいただきましたので、回答させていただきます。
Q1: 仮登録時（ユーザーがメールを確認する前）には User テーブルに該当のユーザーは登録されるのか？
仮登録時（ユーザーがメールを確認する前）にも User テーブルに該当のユーザーは登録されます。仮登録と本登録の違いは該当ユーザーの email_confirmed の値だけであり、仮登録時にはこの値が No になっています。本登録（メールを確認）後は email_confirmed の値が Yes になります。
Q2: 仮登録のユーザーもログインできるのか？
仮登録時のユーザーも特に条件を付けなければログインできてしまいます。本ブログではログイン後に次の画面への遷移をするタイミングで email_confirmed のチェックをしており、email_confirmed が Yes のユーザーのみ次の画面へ遷移できるようにしています。
ただし、この状態だと直接 URL を叩けば、仮登録のユーザーもログイン後の画面を見れてしまいます。仮登録のユーザーに見せたくないページでは、ログインされていても email_confirmed が No の場合は、「email を確認してください」などのメッセージを表示させてトップページやログインページに追い出してしまう処理を入れておいた方が良いです。
次の画像では、email_confirmed が No の場合は、強制的にログアウトさせています。 また、ログアウトした場合はログインページに遷移する処理が入っています。そのため、email_confirmed が No のユーザーは強制的にログアウトされてログインページに飛ばされてしまいます。
また、ログインページで email_confirmed を確認して、No のユーザーはログインさせないという方法もアリだと思います。
次の画像ではログインの条件式（Only when）で User テーブルを email = Input Email's value で検索し、見つかったらその User の email_confirmed が Yes の場合のみログインするように設定しています。
なお、条件式には Current User's email_confirmed is Yes と入れてしまいたいところではありますが、ログイン前では Current User が使えませんので、User テーブルの中を検索する必要があります。
Q3: email_confirmed の値はどうやって確認するのか？
残念ながら、email_confirmed の値は App data などでは確認できません。 ただし、text エレメントなどで表示させることはできますので、ログイン後であれば Current User's email confirmed を表示させることで確認できます。
なお、日本語環境だと、Yes / No ではなく、はい / いいえ で表示されます。
次回について
一通りユーザ登録＆ログイン機能についてご説明しました。
次回以降の予定は、
- エラーについて
- パスワードを忘れた場合
- パスワードポリシー
- ログアウト
について説明する予定です。
ここまで読んでいただきありがとうございました！
