はじめに

本編ではユーザー登録編で作成したユーザーでログイン、ログアウトする機能を実装していきます。

要件

ログイン・ログアウト処理に関する要件を整理します。

①メールアドレスとパスワードでログインする
②ログイン後は指定のページ「ログイン後遷移ページ」に遷移する
③ログインしていない状態で「ログイン後遷移ページ」のURLを直接叩いた場合、強制的に別ページ「ログインページ」に遷移させる
④管理者に承認されていないアカウントでログインしようとした場合、以前作った「ユーザー登録後遷移ページ」に遷移させる
⑤ログアウト後はトップページに遷移させる

それでは張り切っていきましょう！

ログインページの作成

「log_in」というページ名でページを作り、エレメントを配置します。
メールアドレス、パスワードの入力フォームと「ログイン」ボタンさえあればOKです。

Workflow設定

「ログイン」ボタンのWorkflowを設定します。

要件④の実装

ログイン処理を行う前に、まず要件④を実現するためのWorkflowを入れます。
未承認のアカウントはログイン処理の前に「ユーザー登録後遷移ページ」に遷移させる必要があります。

承認状況はそのアカウントのApproval flagを見れば分かります。
「yes」であれば承認済み、「no」であれば未承認でしたね。
というわけで、こんな感じで設定します。

ページ遷移先は「after_signup」を指定します。

また、Only whenに「Search for Users:first item's Approval flag is "no"」と入れ、さらに「Search for Users」部分で「email = Input メールアドレス's value」を指定することで、入力されたメールアドレスに紐づくユーザーが未承認の場合にページ遷移させることができます。

ログイン処理

いよいよログイン処理です！
「Click here to add an action...」からAccount > Log the user inをクリックします。

まずはEmailとPasswardに、それぞれ先ほど作った入力フォームの値を入れます。
続いて「Stay logged In」ですが、これは24時間ログイン状態にするかどうかの設定です。
何度もログインするのは面倒なので、今回は「yes」にしておきます。
「Remember the email」は今後メールアドレスをブラウザに記憶させておくかどうかの設定です。
こちらも「"yes"」にしておきます。

「ログイン後遷移ページ」への遷移

・・・としたかったんですが、まだ作ってなかったですね(;'∀')
作ります。

「after_login」というページ名でページを作ります。
テストの際、正常にログインできていることが確認できるよう、ログインユーザーの名前を表示させるようにしましょう。
TextのInsert dynamic dataから「Current User's Name」と入れることでユーザー名を表示することができます。

ログインページのWorkflow画面に戻り、ログイン後遷移ページへ遷移するStepを追加します。

これでログインページの設定は終了です！

トップページのWorkflow設定

トップページの「ログイン」ボタンからログインページに遷移できるようにします。

終了！

やってみる

Previewしてみましょう。

まずはApproval flagが「no」の未承認アカウントで試してみます。

「ログイン」ボタンを押すとユーザー登録後遷移ページに飛ばされました。いい感じ！
以前作ったページを使いまわしているのでお得感があります（？）

Workflow設定の際、ログイン処理の手前にページ遷移を持ってきました。
そのため、未承認アカウントでログインを試みた際は、入力したパスワードが合っていようが間違っていようがユーザー登録後遷移ページに飛ばされます。

続いてApproval flagを「yes」にしてリトライします。

正常にログインできました！！

Approval flagを「yes」となっているアカウントでログインを試みてパスワードが間違っていた場合、ブラウザの警告文が表示されます。
このあたりはBubbleが良しなにやってくれるので、特に設定する必要はありません！
強い！

ただし、英語じゃなくて日本語にしたいというような要件がある場合、設定変更が必要になります。

終わりに

今回は要件①②④を実装しました。
次回は要件③⑤を実装していきます。