プログラミング覚え書き

WEB製作覚え書き

ノート代わりに勉強した内容をまとめています。

Bubble:ユーザーログイン

 

基本のログイン

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を下図のように設定