はじめに
前回に引き続き、ログイン、ログアウト機能を実装していきます。
①メールアドレスとパスワードでログインする
②ログイン後は指定のページ「ログイン後遷移ページ」に遷移する
③ログインしていない状態で「ログイン後遷移ページ」のURLを直接叩いた場合、強制的に別ページ「ログインページ」に遷移させる
④管理者に承認されていないアカウントでログインしようとした場合、以前作った「ユーザー登録後遷移ページ」に遷移させる
⑤ログアウト後はトップページに遷移させる
前回で①②④が完成しました。
今回で残りを片付けます。
ログイン後遷移ページのWorkflow設定
要件③の部分です。
ログインしたユーザーにしか見せたくないページでは、URL押下による直接のアクセスを防ぐ必要があります。
ログイン後遷移ページのWorkflow画面で「Click here to add an event...」から「Do when condition is true」をクリックします。
設定ウィンドウのOnly whenで「Current User isn't logged in」と入力します。
そうすることで、ページの閲覧者がログインしていない場合の処理を記述することができます。
未ログインユーザーはログインページに飛ばしてやりましょう。
やってみる
ログイン後遷移ページからPreviewしてみます。
ログインページを経由せず直接アクセスすると、勝手にログインページに移動することが分かります。
ついでにトップページのWorkflowも設定しておく
ログインしていない状態でログイン後遷移ページにアクセスするとはじかれる仕組みはOK。
では、ログインしている状態でトップページにアクセスされた場合はどうすればよいでしょうか。
現状、ログイン状態であっても、Workflowで設定したページ遷移の関係上、一度ブラウザを閉じてしまえばトップページ⇒ログインページ⇒ログイン後遷移ページと行くしかありません。
それは面倒すぎる。
ログイン状態でトップページにアクセスした場合、直接ログイン後遷移ページに飛ばしたい。
というわけで、ついでにトップページのWorkflowも設定しておきましょう。
やることはさっきやったこととほぼ一緒です。
違うのはOnly whenで「Current User is logged in」と入力する点だけ。
ログアウト
要件⑤の部分です。
簡単です笑。
まずログアウト用のボタンを作ります。
そこにWorkflowを設定します。
「Click here to add an action...」からAccount > Log the user outをクリック。
これでログアウト処理終わりです。
続いてログアウトしたらトップページに飛ばします。
終わり！！
Previewすると、いい感じに動いていることが分かります。
終わりに
ユーザー登録編と比べてうっすい内容となりましたが、Bubbleではログイン・ログアウト処理が本当に簡単に実装できました。
ただ、本稿では機能実装の説明だけでデザインにはなんのこだわりも持っていません。
ちゃんとしたサービスとして作るのであれば、ボタンの配置などは工夫する必要があるかと思います。