【Bubble】BubbleでSMS認証（2段階認証）を実装する方法

こんにちは！

EPICs株式会社です。

本記事では、Bubble を用いてSMS認証（2段階認証）を実装する手順を解説します。

※​SMSメッセージの送信方法については既に理解していることを前提としています。​

前提条件

• SMS送信機能の実装：​TwilioやClickSendなどのサービスを利用して、BubbleからSMSを送信する方法が既に実装されていること。​

実装手順

以下の手順で実装します。

1. ランダムな認証コードの生成：​ユーザーごとに一意のコードを生成します。​
2. 認証コードの送信：​生成したコードをユーザーの電話番号にSMSで送信します。​
3. ユーザー入力の検証：​ユーザーが入力したコードと送信したコードを比較し、一致すれば認証成功とします。​

1． Random Number Generatorプラグインのインストール

認証コードを生成するために、Random Number Generator プラグインを使用します。​

1. プラグインのインストール：
   • Bubbleエディターの左サイドバーから「Plugins」を選択し、「Add plugins」をクリックします。​
   • 検索バーに「Random Number Generator」と入力し、該当のプラグインをインストールします。​

2． Random Numberエレメントの配置と設定

インストールしたプラグインをページ上に配置し、認証コードの生成範囲を設定します。​

1. エレメントの配置：
   • 「Design」タブを開き、Visual Elementsから「Random Number」をページ上の任意の場所にドラッグ＆ドロップします。​
2. エレメントの設定：
   • 配置した「Random Number」エレメントを選択し、右側のプロパティエディターで以下の設定を行います：​
     • Minimum：生成する最小値（例：1000）
     • Maximum：生成する最大値（例：9999）

3．カスタムステートの設定

生成した認証コードを一時的に保持するためのカスタムステートを設定します。​

1. カスタムステートの作成：
   • ページ全体、もしくは特定のエレメントに対してカスタムステートを作成します。​
   • State Name：​任意の名前（例：AuthCode）​
   • Type：​Number​Qiita

4． ワークフローの構築

ユーザーが認証を開始した際に、認証コードを生成し、SMSで送信するワークフローを設定します。​

1. ワークフローの作成：
   • 「Workflow」タブを開き、ユーザーのアクション（例：ボタンのクリック）に応じて新しいワークフローを作成します。​
2. ステップ1：認証コードの生成：
   • Action：​Element Actions > Set State​
   • Element：​認証コードを保持するエレメント​
   • Custom state：​AuthCode​Bubble+2swooo.net+2local.bubble.is+2
   • Value：​Random Number’s value:rounded to 0​youtube.com
3. ステップ2：認証コードのSMS送信：
   • Action：​Plugins > Twilio – Send text message（Twilioを使用する場合）​
   • To：​ユーザーの電話番号​
   • From：​Twilioで取得した送信元番号​
   • Body：​Your authentication code is [AuthCode]​

5．認証コードの検証

ユーザーが入力した認証コードと、送信したコードを比較し、一致するかを検証します。

認証コード入力用のフィールドを作成

1. Design タブを開く
2. 「Input」エレメントを追加し、以下の設定を行う
   • 名称：Input 認証コード
   • Placeholder（プレースホルダー）：「認証コードを入力してください」
   • Type：Number（数値）
   • 最大桁数：認証コードの桁数に合わせる（例：4桁なら9999）

ワークフローの作成（認証コードの検証）

1. 「Workflow」タブを開く
2. 「認証を確認するボタン」がクリックされたときのワークフローを作成
   • 「Click here to add an event」→「Elements」→「An element is clicked」→ Button 確認

認証コードの検証

1. 新しいアクションを追加
   • 「Click here to add an action」→「Data」→「Make changes to thing」

条件（Only when）を設定
Input 認証コードの値 = Custom State（AuthCode）の値

• 処理（成功時）
  • ユーザーのステータスを「認証済み」に更新
  • 次のページへ遷移（Go to page）
  • 成功メッセージを表示（Show alert：「認証に成功しました！」）

2. 認証失敗時の処理

条件（Only when）を設定

Input 認証コードの値 ≠ Custom State（AuthCode）の値

• 処理
  • エラーメッセージを表示（Show alert：「認証コードが間違っています。」）

4. 「Only when」条件に設定する内容

Input 認証コードの値 = Custom State（AuthCode）の値

• この条件が満たされた場合（成功時）
  • ユーザーを「次の画面」にナビゲートする
• この条件が満たされなかった場合（失敗時）
  • 「エラーメッセージ」を表示する

SMS認証の全体の流れ

今回の実装手順を改めて整理します。

1. ユーザーが電話番号を入力し、「認証コードを送信」ボタンをクリック
2. ランダムな認証コードが生成される
3. 認証コードがSMSで送信される
4. ユーザーがSMSで受け取ったコードを入力
5. 認証コードの検証を行い、一致すれば認証成功（次の画面へ遷移）

以上の手順でBubbleでSMS認証を実装できます！