Bubbleでクローズドな教育系SNSを作る【ユーザー登録編⑤】

#はじめに
[前回](https://qiita.com/yuki_ink/items/88668b8384a22330d787)に引き続き、ユーザー登録機能を実装していきます。

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

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

#メール通知
といっても②は①に比べると圧倒的に簡単です。
Workflowいじるだけ。
[前回も触ったユーザー登録処理のWorkflow](https://qiita.com/yuki_ink/items/88668b8384a22330d787#workflow%E4%BF%AE%E6%AD%A3)を編集します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/5f7c746f-3f89-7f81-f9f9-bbf16dba6eda.png)
Click here to add an action > Email > Send emailを選択します。
Send emailウィンドウが出てくるので、必要情報を入力していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/014b30d4-82dc-408c-6177-be74ffe34984.png)
Toにはメールを送信したいアドレスを入力します。

ここで画面右上、「1 issues」とあり、何やら怒られています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/cbd4714a-381d-f579-ab4e-01bb8ab933ef.png)
どうやらWorkflowの順番がダメみたいです。
今作った「Send email」を「Go to page for after_signup」の前に持ってきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/f5b418b6-c1b4-8c62-aa1f-b2ebfefa31c9.png)
issueが消えました。

###Previewからやってみる
いい感じにメールが届きました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/3005847c-a1db-2259-d3bc-e9cd165d975a.png)
これで②終わりです笑。

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

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

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

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

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


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

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

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

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

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

###データベースの準備
承認コードを作る前に、まずは承認コードを格納するフィールドを作ってやります。
[「Approval flag」を作ったとき](https://qiita.com/yuki_ink/items/88668b8384a22330d787#%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E6%89%BF%E8%AA%8D%E3%83%95%E3%83%A9%E3%82%B0%E3%82%92%E4%BD%9C%E3%82%8B)と同様の手順です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/aa336761-b6e5-a1e7-0f87-7662fde64bd4.png)
「Approval code」というフィールドを作りました。
中身は数字が入りますが、その数字で何か計算したりとかはしないので、typeはtextでいいでしょう。

###承認コードを取得する
承認コード（ランダムな4桁の数字）はプラグイン「Random Number Generator」を使って生成します。
Plugins画面に移り、「+Add plugins」ボタンからインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/07a75025-6b3d-9ced-3cb6-9493ac22438a.png)
「Install」をクリックし（一瞬でインストールされます）、下部の「DONE」をクリックします。

Design画面に移り、Visual elementsを確認すると、「Random Number」が追加されていることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/dd9a8df8-a62e-8ebc-2d06-31ece7af4da1.png)
この「Random Number」のエレメントをuser_registrationページに追加します。
いつものようにドラッグアンドドロップ。
ユーザーからは見えないので、場所は適当でOKです笑（The element is visible on page loadにチェックが付いているか確認してください）。

設定ウィンドウが開くので、名前を「RandomNumber 承認コード」に変えます。
4桁の数字を作りたいので、Minimun を「1000」、Maximum を「9999」と設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/0d331054-fa98-4355-82ec-cb65e06c68f6.png)

##ユーザー登録承認ページを作る
メールにユーザー登録承認ページのリンクが埋め込んであったら便利ですよね。
ということで、いつものように「Add a new page...」から新規ページを作っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/348aadfe-a6e0-e381-84af-031169cc77a8.png)
名前は「account_approval」にしました。
Inputでメールアドレスと承認コードの入力フォームを作ります。
Content formatはメールアドレスの方は「Email」、承認コードの方は「Text」に設定しておきます。
名前はそれぞれ「Input メールアドレス_承認用」、「Input 承認コード_承認用」にしておきました。
※「承認用」の前にアンダーバーを入れているんですが、Qiitaの仕様で表示されないですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/5c5b9935-3f40-31d9-4bdc-37c0870899a3.png)
続いて「承認」ボタンを配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/3aecec51-1749-7406-f40f-c72517bae121.png)
Placeholderはいい感じに設定しておきましょう。

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

##Workflow設定
user_registarationページのWorkflow画面に移ります。
まずはユーザー登録処理と同時に承認コードが発行されるようにします。
「When Button OK is clicked」から「Sign the user up」をクリックし、「Change another field」から「Approval code = RandomNumber 承認コード's Number」を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/b752a447-7c64-a4e3-4ae0-f574f90eb172.png)
これでユーザー登録と同時に承認コードが発行され、DBに保管されるようになりました。

メールの内容も追加しましょう。
「Send email」をクリックし、承認コードとユーザー登録承認ページのリンクを追記します。
リンクの記述の仕方は[以前の記事](https://qiita.com/yuki_ink/items/23dfffc2d2cdf266cdd8#%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90)で紹介しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/214cb001-8e28-2c4f-fa33-8fe69b44fce0.png)

###やってみる
この内容でテストしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/2d25c713-1f3f-5412-12ad-db771cbed7d5.png)
いい感じにメールが届きました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/884fd810-89e5-8a42-e09b-9555bbb5022e.png)
リンクをクリックするとユーザー登録承認ページに飛ぶことも確認できました。
いいね！
続いてData画面から胡蝶さんの承認コードを確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/7b106e11-05a5-5947-a0dc-2b8ed96bca3c.png)
メールで届いた承認コードと一致しています。
いいね！！

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

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