【Bubble】メールを使った2段階認証の実装方法

概要

2段階認証は、アプリへログインする際に本人であることを確認するための方法のひとつです。2段階認証を取り入れることで、第三者による不正アクセスやなりすましを防げます。

今回はBubbleでメールを使った2段階認証を実装する方法を解説します。

完成イメージ

今回は①Bubbleの確認メール機能を使う方法と、②認証番号を生成し認証する方法の2通りを実装します。

メールアドレスとパスワードを入力し、それぞれのButtonを押すことでサインアップします。

①確認メール機能を使った2段階認証の実装方法

1. エレメントを配置する

Inputを2つ、Buttonを1つ配置します。

適切な入力内容を受け付けるよう、InputのContent format項目を設定します。メールアドレスは「Email」、パスワードは「Password」を選択します。

また、確認メールを送信したことを伝えるためのAlertを配置します。

画面上部に表示されるよう「Position the alert at the top」にチェックを入れます。

2. 認証完了画面を作成する

続いて認証完了時にユーザーが訪れるページを作成します。

画面左上よりページ一覧を開き「Add a new page…」で新規ページを作成します。

今回は「two-step-confirmation」というページ名にしました。

Textを配置し、「2段階認証が完了しました」という文字とサインインしたメールアドレスを表示します。

3. ワークフローを設定する

最初の画面に戻り、Button押下時のワークフローを設定します。

When	Step	意味
Button ①確認メール機能でサインアップ is clicked	Account > Sign the user up	サインアップする
	Element Actions > Reset inputs	入力情報をリセットする
	Element Actions > Show message	アラートを表示する

Step1: Sign the user up

Emailに「Input メールアドレス’s value」、Passwordに「Input パスワードs value」を設定します。

そして確認メールを送るために「Send an email to confirm the email」にチェックを入れます。

Confirmation pageの項目が表示されるので、先ほど作成した「two-step-confirmation」ページを設定します。

Step3: Show message

任意のメッセージを設定するために「Change the alert message」にチェックを入れます。

Messageの項目が表示されるので、メールを送信したことが分かるようなメッセージを入力しておきます。

ℹ️ 確認メールは、初期設定では英語の文章となっています。メールの文章を変更するには、Settings > Languagesより「CORE – Email confirmation body」の内容を変更してください。

以上で実装完了です。

プレビューにて、メールアドレスとパスワードを入力しサインアップすると、メールが送信されます。

メール内のリンクをクリックすると、認証完了画面へ移動し、メールアドレスが表示されました。

②認証番号を使った2段階認証の実装方法

1. データベースを作成する

Dataタブにて、User typeに新しいFieldを追加します。

Field name	Field type	意味
ConfirmNumber	number	生成した認証番号を保存する
isConfirmed	yes/no	認証が完了するとyesとなり、ログインできるようになる

isConfirmedのdefaultを「no」に設定します。

これで認証前はisConfirmがnoとなり、認証するまでログインできません。

2. プラグインをインストールする

Random Number Generatorプラグインをインストールします。

指定した範囲内でランダムな数値を生成してくれます。

3. エレメントを配置する

Buttonを2つ、Inputを1つ配置します。

Inputには認証番号を入力するので、Content format項目は「Integer」を選択します。

また、認証完了後にのみユーザーのメールアドレスを表示します。

Textを配置し「Current User’s email」と入力します。

続いてLayoutタブのThis element is visible on page loadのチェックを外し、非表示にします。

最後にConditionalタブへ行き、認証完了後（IsConfirmedがyesになっている）にTextが表示されるよう設定します。

Whenは「Current User’s IsConfirmed is “yes”」とし、ドロップダウンの中から「This element is visible」を選択しチェックを入れます。

4. ワークフローを設定する

各ボタン押下時のワークフローを設定します。

まずはサインアップおよび認証番号を記載したメールの送信です。

When	Step	意味
Button ②認証番号でサインアップ is clicked	Plugins > Generate Random Number	ランダムな数字を生成する
	Account > Sign the user up	サインアップする
	Account > Make changes to current user	操作しているユーザーの情報を編集する
	Email > Send email	Eメールを送信する
	Element Actions > Reset inputs	入力情報をリセットする
	Element Actions > Show message	アラートを表示する

Step1: Generate Random Number

生成する数値の最小値と最大値を設定します。

今回は6ケタとするので、Minimumに「100000」Maximumに「999999」を入力します。

Step2: Sign the user up

Emailに「Input メールアドレス’s value」、Passwordに「Input パスワードs value」を設定します。

Step3: Make changes to current user

Step1で生成した数値を保存します。

あとで認証時に入力された数値が正しいかどうか比較するために使用します。

UserのConfirmNumberに「Result of step 1 ‘s Number:rounded to 0」を保存します。

数値はそのままだと小数なので、「rounded to 0」によって整数にしています。

Step4: Send email

認証番号を記載したメールを送信します。

To（送信先）に「Current User’s email」を設定します。

Sender name（送信者）やSubject（件名）やBody（本文）などを任意で入力します。

Bodyには暗証番号を記載するので「Current User’s ConfirmNumber」を文中に入れてください。

Step6: Show message

任意のメッセージを設定するために「Change the alert message」にチェックを入れます。

Messageの項目が表示されるので、メールを送信したことが分かるようなメッセージを入力しておきます。

続いて認証時のワークフローを設定します。

認証成功時と、認証失敗時の2パターンを想定します。

When	Step	意味
Button 認証する is clicked	Element Actions > Show message	アラートを表示する（認証失敗）
	Navigation > Terminate this workflow	ワークフローを終了する（認証失敗）
	Account > Make changes to current user	操作しているユーザーの情報を編集する（認証成功）
	Element Actions > Show message	アラートを表示する（認証成功）