こんにちは！今回は、Bubbleで2FAを実装する手順をご紹介します。
2FAは「two-factor authentication（二要素認証）」のことで、ログイン時に2つの異なる要素を組み合わせて認証を行うセキュリティ対策です。Bubbleでは2FA専用のActionを用いて2FAを実装することができます。近年、オンラインサービスのセキュリティ強化が求められる中で、2FAの導入は不可欠な対策となっています。Bubbleを利用したWebアプリ開発においても安全性を高めるために2FAを導入することが推奨されるサービスもあります。
本記事では、Bubbleで2FAを実装する方法について、前後編に分けて詳しく解説します。前編の今回は、2FAを有効化するフローを実装する手順を説明します。このフローを実装すると、ユーザーがQRコードをスキャンし、認証アプリを通じて二要素認証を有効化できるようになります。Bubbleで構築したアプリのセキュリティ対策にお困りの方はぜひご参考ください！
※後編では、2FAを有効化したユーザーがワンタイムトークンを入力してログインするフローの実装手順をご紹介しております。どうぞご参考ください！
- 1. 二要素認証概要
- 2. 実装手順
- 3. テスト
- 4. まとめ
1. 二要素認証概要
1.1. 2FA
2FA（two-factor authentication：二要素認証）とは、ユーザーがログインする際に2つの異なる要素を組み合わせて認証を行う方法です。アカウントやシステムへのアクセスを保護するためのセキュリティ対策の一つです。
組み合わせる要素は、知識要素、所有要素、生体要素の3種類があります。
- 知識要素…パスワードやPINコード等、ユーザーが知っている情報。
- 所有要素…スマートフォンやハードウェアトークン等、ユーザーが所持しているデバイス。
- 生体要素…指紋や顔等のユーザー自身の特徴。
こうした2つの要素を要求することで従来のパスワードだけの認証よりも強力なセキュリティを提供できます。そのため、2FAはオンラインサービスや業務システム等の重要な情報を扱うサービスで広く採用されています。特に知識要素+所有要素の組み合わせがよく利用されています。
1.2. Bubbleで実装できる2FA
Bubbleでは、知識要素（パスワード）と所有要素（TOTP）を組み合わせた2FAを実装できます。TOTP（Time-based One-Time Password）は一定期間（だいたいのサービスで30秒）ごとに新しいワンタイムパスワードを生成する仕組みで、認証の流れは下記の通りになっています。
- TOTPのシークレットキーを生成し、QRコードを発行。
- ユーザーはこのQRコードをGoogle/Microsoft AuthenticatorやAuthyでスキャンして、シークレットキーを登録。
- 認証アプリが30秒ごとにワンタイムパスワードを生成。
- ユーザーがワンタイムパスワードを入力し、Bubbleで認証。
この仕組みは下記の2FA専用Actionを使用して実装することができます。
- Generate a 2FA QR code…ユーザー専用のQRコードを生成し、Google AuthenticatorやAuthyで二要素認証設定を行えるようにするAction。
- Validate token and activate 2FA…初回の二要素認証設定時に、Google AuthenticatorやAuthyから取得した一時的なトークン（認証コード）を検証するAction。ユーザーのアカウントで二要素認証が有効化され、以降ログイン時にトークン検証が必要になります。
- Check 2FA token…二要素認証が有効化されているユーザーがログインする際に入力した一時トークン（Google AuthenticatorやAuthyで確認）を検証するAction。
- Disable 2FA for the current user…現在のユーザーの二要素認証を無効化するAction。これによりログイン時のトークン入力が不要になります。
- Generate one-time backup codes…一時的なバックアップコードを生成するAction。これらのコードは認証アプリが使えない際に一時トークンの代わりとして利用できます。
認証コードの生成から入力コードの検証までを行う専用のActionを使って実装することで、認証アプリを使った2FAを簡単に実装できます。
また、2FAを有効化したアプリでは、User Typeで「Two-factor auth」Fieldが利用できるようになります。「Two-factor auth」は、このUserが2FAを有効化している場合、下記のようにYes（チェックアイコン）と表示されます。
1.3. 実装可能料金プラン
2FAに関するAcitonは、Growthプラン以上の有料プランで利用可能になります。なお、Agencyプランでも利用可能です。
2. 実装手順
それでは、Bubbleアプリで2FAを実装していきます。
2.1. 本記事（前編）の実装範囲
まずは、本記事でご紹介する実装手順を整理します。2FAのフローは大きく下記の2つに分けられます。
- 2FAの有効化
- （2FA有効化後）一時トークンでログイン
本記事では「1. 2FAの有効化」の実装手順を紹介します。2については後編記事をお待ちください！
2.2. 事前準備
2.2.1. ページの準備
2FAを実装するのに必要な下記の2ページを追加します。
- 2FAを有効化するためのページ（ページ名：
2fa） - 2FAを有効化したユーザーがログインの際に一時トークンを入力するページ（ページ名：
2fa-temporary-token）
2.2.2. 2FAの有効化・準備
次に、このアプリで2FAを有効化し、ページや認証アプリでの表示の設定を行います。設定はSettingsタブ>General>Privacy & Securityで行います。
まずは2FAを有効化します。Settings >General > Privacy & Security > Activate two-factor authenticationをチェックします。すると2FA設定項目が表示され、このアプリで2FAに関するActionが使用できるようになりました。
次に、認証アプリでの表示設定です。「Application name to display in 2FA app」に、このアプリの名前等を入力します。今回はBubble 2FA Test Appとしました。
最後に、「Redirect users to check their temporary token」で一時トークン入力ページ（ページ名：2fa-temporary-token）を選択します。
記載の通り、このページにはユーザーがワンタイムトークンを入力するフォームと、トークンをチェックするAction Check 2FA tokenを実装する必要があります。
2.3. 実装
それでは、早速実装していきます！ユーザーが2FAを行う流れは下記の5つのStepに分けられます。
- Step1. サインアップ情報を入力する
- Step2. アカウント固有のQRコードを読み込む
- Step3. 認証アプリで表示された認証コードを入力する
- Step4. バックアップコードを確認する
- Step5. 2FA有効化完了
2.3.1. Step管理用Custom Stateの作成
まずは、2FAの流れを管理するCustom Stateを作成します。Designタブで先ほど作成したページ2faを開き、ページをクリックしてプロパティエディタでInspectorの「Add a new custom state」をクリックして新規Custom Stateを作成します。今回は、2FAのstepを保持できるようにしたいので、下記の通り作成します。
- State name…
step - State type…number
「Create」をクリックして作成したら、「Default value」に1を設定します。このページにアクセスした時点では値は1で、2FAの進捗状況に応じて1つずつ値が大きくなる形で利用します。
2.3.2. ページ作成
まずはページを作成していきます。
2.3.2.1. Step1. サインアップ情報を入力する
Step1では、情報を入力してサインアップボタンをクリックしたらQRコードを生成します。Inputを2つとButtonを1つ配置し、メールアドレスとパスワードの入力欄とサインアップボタンを作成します。
次に、配置したElementすべてを1つのGroup配下に配置し、Group名を「Group Step1」に設定し、Conditionalで「このページ（2fa）のCustom state stepが1のときこのGroupを表示する」という内容を設定します。
2.3.2.2. Step2. アカウント固有のQRコードを読み込む
Step2では、生成したQRコードを表示します。QRコードを表示するImageと次のステップに進むButtonを配置します。ImageはGroup配下に配置し、Dyamic imageで表示内容を「Parent group’s image」に設定します。さらに全てのElementを1つのGroup配下に含み、Group名を「Group Step2」にします。
さらにConditionalで、「このページ（2fa）のCustom state stepが2のときこのGroupを表示する」という内容を設定します。
2.3.2.3. Step3. 認証アプリで表示された認証コードを入力する
Step3では、QRコードを読み込んだ認証アプリで表示された認証コードを入力します。認証コードを入力するInputと次のステップに進むButtonを配置します。全てのElementを1つのGroup配下に含み、Group名を「Group Step3」にします。
Conditionalで「このページ（2fa）のCustom state stepが3のときこのGroupを表示する」という内容を設定します。
2.3.2.4. Step4. バックアップコードを確認する
Step4では、バックアップコードを表示します。バックアップコードを表示するRepeating Group+Textと、次のステップに進むButtonを配置します。
Repeating GroupのType of contentは「text」を設定します。Data sourceは空欄にしておきます。Repeating Group配下のTextの表示内容は、「Current cell's text」を設定します。
全てを1つのGroup配下に含めたらGroup名を「Group Step4」にし、Conditionalで「このページ（2fa）のCustom state stepが4のときこのGroupを表示する」という内容を設定します。
2.3.2.5. Step5. 2FA有効化完了
Step5では、2FA有効化完了のメッセージを表示します。2FA有効化完了メッセージを表示するtextと、ログアウトできるようにログアウトButtonを配置します。今回はテスト用アプリなので、検証がスムーズに進むようにログアウトButtonを配置します。
全てを1つのGroup配下に含めたらGroup名を「Group Step5」にし、Conditionalで「このページ（2fa）のCustom state stepが5のときこのGroupを表示する」という内容を設定します。
2.4. Workflow作成
それでは、Workflowを作成していきます。
2.4.1. Step1. サインアップ情報を入力する
まず、Step1のサインアップのWorkflowを作成していきます。Workflow全体は下記の通りです。
各Actionは下記を参考に設定してください。まず、Step1は、Account > Sign the user upを設定し、EmailとPasswordにはそれぞれのInputの値を設定します。
Step2は、Account > Generate a 2FA QR codeを設定し、PasswordにはパスワードInputの値を設定します。
Step3は、Element Action >Display data in a Group / Popupを設定し、ElementはImage elementを含むGroup、Data to displayはStep2の結果を設定します。
Step4は、Element Action > Set stateを設定し、2faで作成したCustom statestepを2にする設定を行います。
2.4.2. Step2. アカウント固有のQRコードを読み込む
Step1のWorkflowでCustom State stepを2にし、Image ElementでQRコードを表示しているので、Step2では次のStepに進むためのWorkflowのみを設定します。
「次へ」ButtonのWorkflowのStep1に、Element Action > Set stateを設定し、2faで作成したCustom statestepを3にする設定を行います。
2.4.3. Step3. 認証アプリで表示された認証コードを入力する
Step3では、入力された認証コードを検証し2FAを有効化した後、Step4用にバックアップコードを表示するWorkflowを実装します。Workflowの全体像は下記の通りです。
Step1では入力されたコードを検証します。Account > Validate token and activate 2FAを設定し、Temporary tokenには認証コード入力Inputの値を設定します。
Step2ではバックアップコードを生成します。Account > Generate one-time backup codesを設定し、PasswordにはCustom State step1で使用したパスワードInputの値を、Temporary tokenにはコードInputの値を設定します。今回は、Number of codes（生成するバックアップコードの数）はデフォルトの10にしておきます。
Step3では、Step4で表示するRepeating Groupに生成したバックアップコードを反映しておきます。Element Actions > Display list in RepeatingGroupを設定し、ElementにはGroup Step4のRepeating Group、Data sourceにはStep2の生成結果を設定します。
Step4では、Element Action > Set stateを設定し、2faで作成したCustom statestepを4にする設定を行います。
2.4.4. Step4. バックアップコードを確認する
Step4では、Step3で生成したバックアップコードを表示し、確認後次のステップに進むというWorkflowを作成します。Step3でRepeating Groupにバックアップコードを反映させているので、Step4では次のStepに進むためのWorkflowのみを設定します。
「OK」ButtonのWorkflowのStep1に、Element Action > Set stateを設定し、2faで作成したCustom statestepを5にする設定を行います。
2.4.5. おまけ：Step5. 2FA有効化完了
最後に、テストアプリ用にログアウトWorkflowを実装します。Group Step5のログアウトButtonに、ログアウト後にCustom statestepを1にするWorkflowを実装します。
3. テスト
それでは、ここまで実装した内容をテストしてみます。Previewで作成したページ2faを表示し、メールアドレスとパスワードを入力して「サインアップ」をクリックします。
QRコードが表示されるので、Google Authenticator や Authy等のアプリでQRコードを読み込みます。今回は、Microsoft Authenticatorで読み込みました。読み込んでAuthenticatorアプリ上でワンタイムパスワードが表示されたら、「次へ」をクリックします。
Authenticatorアプリで表示されたワンタイムパスワードを認証コード欄に入力し、「認証」をクリックします。
次に、バックアップコードが表示されるので、コピーして「OK」をクリックします。
2FA有効化完了のメッセージが表示されたら成功です！
また、Data > Usersで先ほど2FAを有効化したユーザーのデータを確認すると、「Two-factor auth」がYesになっています。これで、このアカウントで2FAが有効化されたことも確認できました。
4. まとめ
今回は、Bubbleで2FAを実装する手順の前半、2FAの有効化のフローの実装手順をご紹介しました。2FAを導入することで、パスワードのみの認証に比べて、アカウントの乗っ取りリスクを大幅に低減できるのが大きなメリットです。2FA専用のActionを使用することでBubbleでも簡単に実装することができました。
次回は、2FA手順の後半である、2FA有効化ユーザーが一時トークンでログインするフローの作成手順をご紹介しています。後編記事も合わせてご参考ください！
