1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-02-13

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

①ユーザー登録希望者がユーザー登録ページから申請する。
 →アカウントはこの時点で作成されるが、まだ無効の状態。ログインできない。
②申請内容がSNS管理者にメールで通知される。

③申請内容をSNS管理者がチェックする。
 →管理者が問題ないと判断すればアカウントを有効化する。
④アカウントが有効化されると申請者に通知される。

前回は②を完成させて、③の途中まで進めていました。
今回はその続きから。

#アカウント有効化
##ポップアップの作成
承認が正常に完了したらポップアップを出すようにします。
Containers > Popupからポップアップを作って、名前を「Popup 承認完了」と設定します。
続いてテキストとボタンを作ります。
完成イメージはこんな感じです。
image.png
「Search for Users's Name」は初見の記述ですね。

###「Search for Users's Name」作り方
まず、Insert dynamic dataから「Do a search for」を選択します。
ウィンドウが出てくるので、Typeが「User」であることを確認します。
また、「Add a new constraint」をクリックし、表示されたボックスに「email = Input メールアドレス_承認用's value」と入力します。
image.png
これで、「UserテーブルでemailフィールドにInputに入力された値が入っているもの」を意味することになります。
その人の名前を出したいので、「's Name」を選択。
image.png
終わり!!

###「承認」ボタンのConditional設定
メールアドレスと承認コードが合致しない場合、「承認」ボタンをクリックできないようにします。
合致しなければボタン自体を表示させないというのでもいいんですが、それだと悪意のある人に承認コードを総当たりされたときに「これが答えだよ!」って教えるようなものなんですよね。

ということで「承認」ボタンのConditionalタブに移動します。
「Define another condition」をクリックし、出てきたプルダウンから「This element isn’t clickable」を選択します。
image.png
出てきたチェックボックスにチェックを入れ、Whenの部分をこんな感じで入力します。
image.png
Inputで入力されたメールアドレスの値がInputで入力された承認コードを持ったユーザーのメールアドレスと一致していたら、ボタンがクリックできるようになります(日本語が難しいですね)。

「:first item」ってなんぞやって思ったんですが、おそらく「同じメールアドレスが複数件登録されていた場合はApproval codeもその数だけ出てくるけど、何件目を取ってくればいい?」っていう話だと思います。
前にも書きましたが、メールアドレスは一意の値なので、1件しか取ってこれないはず。
「:first item」でいいでしょう。
終わり!!

###「OK」ボタンのWorkflow設定
「OK」が押されたらポップアップを閉じるようにしたい!
一瞬で実装できるのでついでにやっておきます。
「OK」ボタンの設定ウィンドウから「Start/Edit workflow」へ飛びます。
image.png
Element Actions > All elements > Hideを選択し、Elementで「Popup 承認完了」を選択します。
終わり!!

##「承認」ボタンのWorkflow設定
いよいよWorkflowの設定に移ります。
###Approval flagの更新処理
Data (Things) > Make changes to thing を選択。
image.png
まず「Thing to change」のところで「Search for Users:first item」と設定してから、「Search for Users」をクリックし、ウインドウが開いたところで「Add a new constraint」から「email = Input メールアドレス_承認用's value」と設定します。
最後に、「Change another field」をクリックし、「Approval flag = "yes"」と設定します。
こんな感じ。
image.png
これでDBの更新が完了しました。

###ポップアップ表示
image.png
もう慣れたものですよね。

###メール送付
要件④になります。
申請者にメールを出したい!!
とうとうここまで来ましたね。

設定の仕方は基本的に前回メール通知機能を実装したときと同じです。

ToにはInputで入力したメールアドレスを入れておけばOKです。
Bccに承認者のメールアドレスを入れておくと、運用上いいと思います。
また、Bodyに宛名を入れておくと丁寧ですね!
image.png
これにてユーザー登録編終了になります。
お疲れ様でした!!

メールの通知先などを変えてPreviewから試してみてください。
承認するとApproval flagが「yes」になり、申請者のメールアドレスにメールが送られるはずです。

#余談
###運用の話
運用の話をしましょう(大事)。
承認フラグですが、別の使い方もできます。
**「削除フラグ」**としての使用です。

ユーザーが退会する場合、そのユーザーを削除する必要がありますが、「削除」というのはとんでもなく恐ろしい処理です。
何よりミスが怖い。
Aさんのデータを消したいのに誤ってBさんのデータ消しちゃった★
はい処刑~~/(^o^)\
一度DBからユーザーのデータを削除してしまえば復元するのは難しく、バックアップを取っていない場合、復元は無理ゲーです(バックアップはちゃんと取ろうね!)

そんなときに役立つのが削除フラグ。
データを物理的に削除するのではなく、「削除フラグを立てる=削除」と見なして、論理的にそのアカウントを使用停止させます。
普通なら削除フラグを作るところですが、今回は承認フラグを作っちゃっているので、これを削除フラグとしても使えばいいんじゃなかろうか、という話でした。

###さらに余談
削除フラグを立てたユーザーのデータをずっと放置しておくのはセキュリティ的に問題があるので、○か月後に削除、みたいな運用ルールを決めておくのがいいです。
あるいは、毎月○日に削除フラグ立ってるユーザーのデータを削除する、とか。

そんなときに欲しいのが定期スケジューリングの機能ですよね。
Bubbleにもあると言えばあるみたいですが、有料プランのみ使用可能でした!!

#終わりに
ユーザー登録編、めでたく完結しました👏👏

次はプラン変更などのユーザー情報変更処理、ログイン、ログアウト処理などを取り扱っていく予定です。
ではまた。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?