MENU

3.8-9 メールアドレスページの作成

目次-全章

目次

3.8 メールアドレス認証・送信ページの作成

メールアドレス認証とは

あるサービスに新規登録した場合に「URLをクリックしてメールアドレスの確認をしてください」などといったメールを受け取ったことがあると思います。このように登録されたメールアドレスに対し一意のURLを発行し、ユーザーにアクセスさせることで、登録したメールアドレスが存在しており、登録したユーザー本人のものであることを確認しています。

bubbleにはもともとメールアドレス認証の機能が備わっており、利用するかしないかは開発者の選択に委ねられます。

ただし、メールアドレス認証を利用しないと、他人に勝手にメールアドレスを利用されてしまう可能性がありますので、セキュリティ上特に問題がなければ利用するようにしましょう。

メールアドレス認証の情報

bubbleでは、Userタイプにemail confirmedという値が存在しており、この中にメールアドレス認証をしたかどうかが yes / no で登録されています。

セキュリティ上、アプリケーションの管理者が勝手に書き換えてよいデータではないため、Dataタブから確認したり編集したりすることはできません。

ただし、ワークフローの中でユーザーのメールアドレス認証が完了しているかどうかを確認し、処理を分けることができます。

メールアドレス認証・送信ページを作る

まず、新規会員登録した後で、メールアドレス認証が完了していないユーザーに対して表示する画面を作成します。

ページをクローンして作成する

ログインページをクローンして、「email_authentication」というページを作成します。

図3.8.1 bubble操作画面

不要なエレメントを削除し、名称や表示テキストを変更します。

図3.8.2 不要なエレメントの削除と名称、表示変更

条件Conditionalを設定する

プロパティエディタにConditionalというタブがありますが、これはさまざまなエレメントに条件を設定し、条件ごとに表示内容やエレメントのスタイルを切り替えるために使います。

「ユーザーがログインしているとき」「画面の横幅が XXX px以下のとき」「データAが存在しているとき」などさまざまな条件が設定できます。ワークフローと異なり、アクションを設定することはできません。

このページでは、ユーザーのメールアドレス認証が完了していない場合に「メールアドレスの認証メールを送信する」ための要素を表示しますので、以下のような設定を行います。

  • 要素

Group Auth

  • 条件

現在のユーザーのメールアドレス認証が完了していない場合

  • 内容

表示する

ひとつずつ見ていきましょう。

まず、デフォルトで画面アクセス時にはGroup Authを非表示にします。

図3.8.3 「Group Auth」を非表示

次に、Group Authを選択した状態でConditionalタブを選択します。

図3.8.4 Conditional > +Define another conditionへ

新しい条件を設定する場合は「+ Difine another condition」をクリックします。

図3.8.5 Clickを選択

「Click」をクリックすると選択可能な項目が表示されます。

図3.8.6 Current Userを選択

選択肢から「Current User」をクリックします。Current Userは現在ログインしているユーザーのことです。ただし、ログインしていない場合、Current Userの内容は空になります。

項目を選択していくと順次選択可能な候補が表示されるので、「Current User’s email confirmed is “no”」となるように選択していきます。

図3.8.7 Current User’s email confirmed is “no”と選択

Conditionalタブの条件は Yes / No ( true / false)になるように設定します。

条件を入力し終わった所で「Select a property to change when true」をクリックすると変更可能なプロパティが表示されます。

図3.8.8 Select a property to change when trueをクリック

選択肢の中から「This element is visible」を選択し、チェックを入れます。図3.8.9 This element is visibleを選択

図3.8.9 This element is visibleを選択

以上の設定で、Group Authは

・画面アクセス時は非表示

・現在のユーザーのメールアドレス認証が完了していないときに表示

という条件が設定できました。

なお、ユーザーがログインしていないときはCurrent Userが空になり、Current User’s email confirmed is “no”が trueとなります。

3.9 メールアドレス認証・完了ページの作成

第3章8でメールアドレス認証のメール送信をするページを作成しました。今度はこのページにメールアドレス認証が完了した時に表示する部分を作成していきます。

第3章8で作成した「email_authentication」ページを開きます。

デフォルトでGroup Authを非表示としているため、以下のようになっているかと思います。

図3.9.1 bubble操作画面

Group Authをコピー&ペーストし、名称を変更します。

図3.9.2 Group Authをコピー&ペースト

Textエレメントで、要素の高さが文字サイズぎりぎりだった場合、上記画像のようにテキストが表示されないことがあります。気になる場合はTextエレメントのサイズを数ピクセル大きくして表示させます。

不要なエレメントを削除し、メールアドレス認証完了後のテキスト表示を追加します。

“メールアドレスの認証が完了しました。*3秒経っても画面が切り替わらない場合は下記リンクからログインしてください”

図3.9.3 不要なエレメントの削除とテキスト変更

Text Auth DoneのStyleは以下のように設定しています。

図3.9.4 「16px 1.4 Black」の設定

Styleの名称が増えてくるとどの部分に適用したStyleか見分けられなくなりますので、上記のようなネーミングも覚えておくと便利です。

例)フォントサイズ + フォントカラー + 行の高さ + 横位置 など

14px Black Bold Center:14px 黒太字 センタリング

メールアドレス認証完了時の条件を設定する

Group AuthDoneは、メールアドレス認証が完了したときに表示する内容のため、Conditionalタブを以下のように変更します。

図3.9.5 Conditionalタブの内容変更

以上、第3章8〜9の設定で、

認証前:Group Authを表示

認証後:Group Auth Doneを表示

という設定が完了しました。

【未経験・経験者】システムエンジニア募集中!

当社では現在一緒に働くメンバー募集しています!
正社員でシステムエンジニアとして当社のシステム開発業務に携わってみませんか?
未経験者から経験者まで広く募集しているのでぜひエントリーをお待ちしています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

私たち株式会社ファンリピートは、ITを通じてお客様の課題解決を行うスタートアップベンチャーです。ノーコード・ローコードを用いたDX支援事業を主軸に、スピード感を持ってお客様のご要望にお応えしています。

2019年の創業から、出版業界・広告業界をはじめ、幅広い業界のデジタル施策を支援。財務管理・顧客管理などの基幹・業務システムから、新規Webサービスなど開発前検証フェーズのシステム導入支援まで、ワンストップでサポートを実施しています。この先も本質的なご提案を通じて、お客様の課題を解決し続けます。

コメント

コメントする

目次