Bubble から SMS を送信して電話番号認証をする方法

皆さん、こんにちは！今回は、前回の Twilio と連携して Bubble から SMS を送信する方法を使って、Bubble で電話番号認証による本人確認を行う方法について、ご紹介したいと思います。

ノーコードラボでは、既に「Bubbleでログイン処理をしてみよう！」で、Bubble から送信した確認メールをユーザーが認証することでサインアップを完了とする方法についても、ご紹介していますが、同様にサインアップ時に電話番号認証を取り入れると、より確実に本人確認が行えるため、安心してサービス提供ができますね。

1. 前提条件
2. 電話番号認証の流れ
3. 画面イメージ
4. 電話番号認証ページの作成
まとめ

1. 前提条件

Twilio アカウントを作成していて Twilio 番号も取得済み
Bubble に Twilio プラグインが導入済み
Bubble でサインアップ、ログイン機能を実装済み

本記事は上記3項目について、準備済みを前提としています。Twilio とは？や Twilio プラグインについてなどをお調べの方は前回の記事を、Bubble でのログイン処理をお調べの方は「Bubbleでログイン処理をしてみよう！」をご参考くださいね。

blog.nocodelab.jp

2. 電話番号認証の流れ

電話番号認証の流れやポイントを以下にまとめます。

ログイン後のページで、電話番号認証がされていないユーザーの場合は、電話番号認証フォームを表示する
認証済みかどうかは、User Type にフラグを作成して判定する
SMS では4桁のランダム数字を確認コードとして送信し、ユーザーが入力した値と一致すれば認証OK（フラグを yes ）とする
SMS 認証は送信から10分間以内を制限とする

また、本アプリでは電話番号をデータベースに保存していませんが、サインアップ時の本人確認以外でも、例えば、ユーザーに何か設定を変更させるような重要なアクションを許可する場合など、都度認証したい時は電話番号もデータベースに保存しておくと良いですね。

3. 画面イメージ

電話番号認証を行っていない場合のユーザーには、以下の画面を表示します。

SMS 送信したら、以下の画面を表示します。

入力された確認コードが違う場合は、メッセージを表示します。

入力された確認コードと一致した場合は、完了メッセージを表示します。

4. 電話番号認証ページの作成

4.1. データベースの準備

では早速、電話番号認証ページを作成してきましょう。まずは、データベースから準備していきます。

User Type に以下の3フィールドを追加します。

フィールド名	型	詳細
identification	yes/no	本人確認フラグ（Default：いいえ）
confirmation_code	text	確認コード
name	text	ユーザー名

identification フィールドが Yes の場合は電話認証済みとし、No の場合は未認証とします。また、confirmation_code フィールドの型が number ではなく text なのは、画面で使用する Input エレメントを Text(numbers only) を使用する為です。 3つ目の name はログインしているユーザーを分かりやすくする為だけに作成していますので、必要なければ作成しなくても大丈夫です。

次に Twilio番号を保存する Twilio という名前の Data type を作成しておきます。

データには、設定時に取得した Twilio 番号を登録しておきます。

4.2. 画面作成

では、画面を作成していきます。

今回はページ名を「identification」として、新規ページを作成しました。

また、identification ページはサインアップ処理済みを想定していますので、どのユーザーでログインしているか判りやすいように「Current User's name さん、こんにちは！」として、ユーザー名を表示しておきます。

4.2.1. 電話番号入力フォーム

次に、電話番号入力フォームを作成します。必要なエレメントを順に配置していきます。

1つ目が「電話番号認証で、本登録を完了してください。」と表示した Text エレメントを作成します。 2つ目に、Input エレメントを配置します。Content format を Text(numbers only) として、Limit the number of characters にチェックをして Maximum number を「11」桁にしておきます。This input should not be empty にもチェックを入れて、入力の必須項目としておきましょう。

3つ目に「ショートメール送信」ボタンを配置します。ボタンには Conditional を設定して電話番号が未入力の場合などは、クリックできないようにしておくと良いですね。

次に、作成した上記3つのエレメントを Group エレメントでまとめておきましょう。そして、Collapse this element's height when hidden にチェックを入れて、このグループが非表示の時は、高さも折りたたむようにしておきます。また、Conditional を追加して、Crrent User's identification is "yes" （=電話認証済み）の時は、このグループを表示しないようにします。

4.2.2. 確認コード入力フォーム

次に、SMSで送信された4桁の確認コードを入力するフォームを作成していきます。

「確認コードを送信しました。確認コードの有効時間は10分です。」と表示した Text エレメントを配置し、その下に電話番号の時と同様、Content format を Text(numbers only) とした Input エレメントを作成します。Limit the number of characters にチェックをして Maximum number を「4」桁とし、This input should not be empty にもチェックを入れておきます。

「確認コード送信」ボタンを配置し、作成した3つのエレメント先ほど同様 Group でまとめて、This element is visible on page load のチェックを外しておきます。この Group についても、Collapse this element's height when hidden にチェックを入れて、Crrent User's identification is "yes" の時は表示しないように Conditional を追加しておきます。

なお、Collapse this element's height when hidden にチェックをして非表示の時は高さを折りたたみたい場合は、エレメント同士をピッタリとくっつけて配置しておくことがポイントです。エレメント同士を離して配置した場合は、うまく高さを折りたためないことがあるので、注意してくださいね。

4.2.3. 認証完了メッセージ

では次に、認証済みのユーザーに表示されるメッセージを配置しておきます。ここでは「電話番号認証を完了しました。ご協力ありがとうございました。」としました。また Conditional で Crrent User's identification is "no" の時に非表示となるように設定しておきます。

4.2.4. Twilio 用の電話番号

次に、ユーザーが入力した電話番号を、国際番号の「81」を含めた Twilio 用の番号に加工する必要がありますので、その値を保持する Input エレメントを配置していきます。なお、今回は便宜上、分かりやすいように Input を利用していますが、代わりに Custom state を使っても良いと思います。

Initial content に国際番号の「81」と、電話番号を「:truncated from end to 10」で後ろから10桁を抽出した文字を連結させます。Maximum number は「12」桁として、This element is visible on page load のチェックを外して、非表示エレメントとしておきます（テストの時は、分かりやすいように表示しておくと良いですね）。

4.2.5. エラーメッセージ用のポップアップ

最後に、確認コードが一致しなかった場合のエラーメッセージを Popup エレメントで用意しておきましょう。ここでは、Text に「確認コードが一致しません。もう一度入力してください。」と表示し、「閉じる」ボタンを配置しました。

4.3. ランダムの4桁を取得する

では、SMS で送信するランダムの4桁については、プラグインを利用することにしましょう。使用するプラグインは「Random Number Generator」です。「+Add plugins」ボタンからインストールしてくださいね。

画面に RandomNumber エレメントを配置します。4桁の値にしたいので、Minimun を「1000」、Maximum を「9999」と設定します。

以上で、画面の準備が整いました！

4.4 ワークフロー作成

では、次にワークフローを設定していきましょう。設定するフローは以下の5つです。

ログインされていないユーザーの閉め出し
「ショートメール送信」ボタンがクリックされた時
「確認コード送信」ボタンがクリックされた時①（SMS送信から10分以内）
「確認コード送信」ボタンがクリックされた時②（SMS送信から10分以上経過）
エラーメッセージで「閉じる」ボタンがクリックされた時

では、順に設定していきます。

4.4.1 ログインされていないユーザーの閉め出し

Bubble でのログイン処理ではお馴染みの処理ですね。「User is logged out」の時は、index ページにでも遷移させてしまいましょう。

4.4.2 「ショートメール送信」ボタンがクリックされた時

では、ユーザーが電話番号を入力して「ショートメール送信」ボタンをクリックしたら、データベースに確認コードを保存し、Twilio を利用して SMS 送信するように設定していきます。

アクションの追加で、Data(Things) の Make changes to thing... で、Thing to change を Current User として、User Type に作成した confirmation_code フィールドを RandomNumber の値で更新します。

もし、ユーザーの電話番号自体をデータベースに保存したい場合は、このタイミングで登録してしまうと良いですね。

次に、Twilio - Send text message で From には、データベースの Twilio type に保存しておいた Twilio番号、To には Twilio 用に加工したユーザーの電話番号（非表示にした Input エレメント）の値を設定します。Message で、RandomNumber の値を設定します。

※ 2024/03/01 一部記事を修正しました。 Option sets に保存していた Twilio 番号を Data type に変更しています。

次に、SMS送信したので、電話番号入力フォームを非表示にして、代わりに確認コード入力フォームを表示させておきます。

4.4.3 「確認コード送信」ボタンがクリックされた時①

では、次に SMS送信してから10分以内の場合は、確認コードの判定を行うように設定していきます。

「10分以内であるか」という判定については、SMS 送信のタイミングで User Type の confirmation_code フィールドを更新している為、今回は Built-in field である Modified Date を利用することにします。

「確認コード送信」ボタンのクリックイベントの条件を「Modified Date + 10分が現在時刻以前か以降か」で判定します。今回は10分以内である場合としたいので「「Current User's Modified Date + (seconds):600 > Current date/time」とします。

次に、データベースに登録されたランダム4桁とユーザーが入力した確認コードが一致した場合は、identification フィールドを yes に更新します。ここでは、条件の When に「Current User's confirmation_code is Input confirmation_code's value」と入力しています。