#はじめに
前回に引き続き、ユーザー登録機能を実装していきます。
①ユーザー登録希望者がユーザー登録ページから申請する。
→アカウントはこの時点で作成されるが、まだ無効の状態。ログインできない。
②申請内容が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の編集を行っていきます。
次回でユーザー登録編終わるといいなあ（ ＾ω＾）・・・
それではまた。