はじめに

前回に引き続き、ユーザー登録機能を実装していきます。

①ユーザー登録希望者がユーザー登録ページから申請する。
　→アカウントはこの時点で作成されるが、まだ無効の状態。ログインできない。
②申請内容がSNS管理者にメールで通知される。
③申請内容をSNS管理者がチェックする。
　→管理者が問題ないと判断すればアカウントを有効化する。
④アカウントが有効化されると申請者に通知される。

前回で①が完成したので、今回は②の部分を実装します。

メール通知

といっても②は①に比べると圧倒的に簡単です。
Workflowいじるだけ。
前回も触ったユーザー登録処理のWorkflowを編集します。

Click here to add an action > Email > Send emailを選択します。
Send emailウィンドウが出てくるので、必要情報を入力していきます。

Toにはメールを送信したいアドレスを入力します。

ここで画面右上、「1 issues」とあり、何やら怒られています。

どうやらWorkflowの順番がダメみたいです。
今作った「Send email」を「Go to page for after_signup」の前に持ってきます。

issueが消えました。

Previewからやってみる

いい感じにメールが届きました。

これで②終わりです笑。

アカウント有効化

③部分の実装に入ります。
今の時点ではまだアカウントは無効なので、有効にしてやらんといかんと。なるほど。
ぶっちゃけ、要件が③までなら、BubbleのData画面から直接手動で「Approval flag」を「yes」に変えてしまえばいい話です。
しかし、今回は④まで要件がある（　＾ω＾）・・・

お察しの通り、④はWorkflowで処理するわけですが、そのWorkflowをキックするイベントをBubbleのアプリ上で作ってやらないといけません。
言い方を変えると、Data画面から手動でフラグを変えたらメールも手動で送らないといけなくなるよ？ってことです。
それはだるすぎる。

というわけで、張り切っていきましょう！

ロジックを考える

では、どのようにしてアプリ内からアカウントを有効化させるのか。
下記のように考えました。

⑴とりあえず専用のページはあった方がよさげ

⑵どのアカウントを有効化するか指定するため、メールアドレスの入力は必須
メールアドレスは一意で、重複はありません。
すでに登録済みのメールアドレスでユーザー登録を試みた際はBubbleにはじかれます。

⑶内部の人間しか知らない情報を入力する必要がある
⑵までだと、ユーザー登録申請者自ら承認用ページにアクセスし、自らのアカウントを有効化することができてしまいます。
それはちょっと嫌だ。

今回はかの有名なノーコードラボさんの記事『Bubble から SMS を送信して電話番号認証をする方法』から着想を得て、ランダムな4桁の数字（以下承認コード）を内部情報として発行したいと思います。

まとめると、承認まわりのロジックはこうなります。
❶ユーザー登録と同時にそのアカウントの承認コードが発行され、DBに保管される
❷先ほど作ったメールで承認コードが届く
❸メールを受け取った者がユーザー登録承認ページにアクセスし、メールアドレスと承認コードを入力して承認する
❹ユーザー登録が承認された旨が申請者に通知される（要件④）

承認コード発行

承認コード周りの機能を実装します。

データベースの準備

承認コードを作る前に、まずは承認コードを格納するフィールドを作ってやります。
「Approval flag」を作ったときと同様の手順です。

「Approval code」というフィールドを作りました。
中身は数字が入りますが、その数字で何か計算したりとかはしないので、typeはtextでいいでしょう。

承認コードを取得する

承認コード（ランダムな4桁の数字）はプラグイン「Random Number Generator」を使って生成します。
Plugins画面に移り、「+Add plugins」ボタンからインストールします。

「Install」をクリックし（一瞬でインストールされます）、下部の「DONE」をクリックします。

Design画面に移り、Visual elementsを確認すると、「Random Number」が追加されていることが分かります。

この「Random Number」のエレメントをuser_registrationページに追加します。
いつものようにドラッグアンドドロップ。
ユーザーからは見えないので、場所は適当でOKです笑（The element is visible on page loadにチェックが付いているか確認してください）。

設定ウィンドウが開くので、名前を「RandomNumber 承認コード」に変えます。
4桁の数字を作りたいので、Minimun を「1000」、Maximum を「9999」と設定します。

ユーザー登録承認ページを作る

メールにユーザー登録承認ページのリンクが埋め込んであったら便利ですよね。
ということで、いつものように「Add a new page...」から新規ページを作っていきます。

名前は「account_approval」にしました。
Inputでメールアドレスと承認コードの入力フォームを作ります。
Content formatはメールアドレスの方は「Email」、承認コードの方は「Text」に設定しておきます。
名前はそれぞれ「Input メールアドレス_承認用」、「Input 承認コード_承認用」にしておきました。
※「承認用」の前にアンダーバーを入れているんですが、Qiitaの仕様で表示されないですね。

続いて「承認」ボタンを配置します。

Placeholderはいい感じに設定しておきましょう。

実際、ユーザー登録承認ページはもう少し作りこむところ（承認したあとポップアップ出したいとか）があるんですが、それはまた後日。

Workflow設定

user_registarationページのWorkflow画面に移ります。
まずはユーザー登録処理と同時に承認コードが発行されるようにします。
「When Button OK is clicked」から「Sign the user up」をクリックし、「Change another field」から「Approval code = RandomNumber 承認コード's Number」を追加します。

これでユーザー登録と同時に承認コードが発行され、DBに保管されるようになりました。

メールの内容も追加しましょう。
「Send email」をクリックし、承認コードとユーザー登録承認ページのリンクを追記します。
リンクの記述の仕方は以前の記事で紹介しました。

やってみる

この内容でテストしてみます。

いい感じにメールが届きました。

リンクをクリックするとユーザー登録承認ページに飛ぶことも確認できました。
いいね！
続いてData画面から胡蝶さんの承認コードを確認してみましょう。

メールで届いた承認コードと一致しています。
いいね！！

終わりに

まあまあな長さになったので、いったんここで切ります。

次回は「承認」ボタンを押した後に出てくるポップアップの作成や、Workflowの編集を行っていきます。
次回でユーザー登録編終わるといいなあ（　＾ω＾）・・・
それではまた。