基本のログイン
1.ログイン画面に誘導するText等のエレメントを作成する
2.クリック後に表示させるPopupやPage等のログイン画面を作成する
3.1で作成したエレメントに、
ログイン画面を表示(or遷移)するWorkflowを設定する。
4.ログインボタンをダブルクリック ⇒ "Add workfow"をクリック
5.
①きっかけが合っていることを確認
②"Click here to add an action..."をクリック
③"Account"をクリック
④"Log the user in"をクリック
6."Email"、"Password"にて、当該"Input"の値を設定
"Stay logged in"にて、"yes"を設定
7.必要に応じてログイン画面を非表示(or遷移)するWorkflowを設定する。
reCAPCHA
reCAPCHAとは、BubbleのPluginsの一つで、botなどによる悪質なアクセスからWebサイトを守るための機能。
①reCAPCHAを選択してインストール
②こちらのサイトにて下図の通り設定し「送信」をクリック
③表示されたキー(2つ)をBubble側に設定
④ログインフォームにreCAPCHAを設置
⑤Log the user inのワークフローに以下を追加
アカウント種類別のログイン
種類別のアカウント登録はこちらを参照
登録Popupと同様、ログインも2つ作成する
①下図の通りワークフローを設定
②Log the user outに、「一方のアカウント種類であった場合」
という条件を設定
③Show messageのメッセージを設定
④Show messageに、「ログアウト時」という条件を設定
⑤Hideに、「ログイン時」という条件を設定
⑥ ①~⑤で作成したワークフローをコピペし、
条件を逆に設定して、もう一方のアカウント種類用ボタンに設定する
ログイン前後のエレメント表示/非表示
①ログイン前後で表示/非表示を切り替えたいElementを設置
②Conditionalを下図のように設定
③Layoutを下図のように設定