こんにちは！今回は、Bubbleで2FA（二要素認証）を実装する手順の後編をご紹介します。
後編の今回は、2FAを有効化したユーザーが一時トークンを使ってログインするフローを実装する手順を説明します。このフローを実装すると、2FAを有効化したユーザーがAuthenticator等の認証アプリを通じて得た一時トークンを使ってログインできるようになります。
前編の2FA有効化フローと合わせてぜひご参考ください！
※前編では、2FAを有効化するフローの実装手順をご紹介しています。未読の方はぜひこちらをお先にお読みください。
1. 実装手順
1.1. 本記事（後編）の実装範囲
改めて、本記事でご紹介する実装手順を、2FAのフロー全体を踏まえて整理します。2FAのフローは下記の2つに分けられます。
- 2FAの有効化
- （2FA有効化後）一時トークンでログイン
本記事では「2. （2FA有効化後）一時トークンでログイン」の実装手順を紹介します。1については前編記事ご参考ください。
また、前編では下記の2ページを作成しました。
- 2FAを有効化するためのページ（ページ名：
2fa） - 2FAを有効化したユーザーがログインの際に一時トークンを入力するページ（ページ名：
2fa-temporary-token）
後編でもこの2ページをベースに進めていきます。
1.2. 実装
2FAを有効化したユーザーが一時トークンを使ってログインするフローは下記の3つのStepに分けられます。
- Step1. メールアドレス・パスワードでログイン
- Step2. Authenticatorアプリで確認した一時トークンを入力
- Step3. 2FAログイン完了
それでは、早速実装していきます。
1.2.1. ページ作成
まずはページを作成していきます。
1.2.1.1. Step1. メールアドレス・パスワードでログイン
2faページを、サインアップ要素を活用してログインもできるように修正します。前編で作成した「Group step1」内にButtonを1つ追加し、ラベルを「ログイン」にします。
1.2.1.2. Step2. Authenticatorアプリで確認した一時トークンを入力
2fa-temporary-tokenページは後編で初登場です。このページは、2FA有効化後ログインする際にAuthenticatorアプリで確認した一時トークンの検証を行ってログインを完了するページです。
それでは早速、一時トークンを入力するための要素を配置していきます。InputとButtonエレメントを1つずつ配置し、両方を1つのGroup配下に含みます。Group名は「Group step1」にします。
また、このGroupには「ユーザーが2FAログインを完了していないときこのGroupを表示する」という設定をします。まず、「This element is visible on page load」が有効化されているのを確認します。次にConditionalです。「現在のユーザーが2FAログインを完了しているか」は演算子uses 2FAを使ってCurrent User uses 2FAでyes/no判定をすることができます。そこで、whenは「Current User uses 2FA is yes」に設定し、「This element is visible」を無効にします。
ちなみに、Current User uses 2FAの判定結果から分かることは下記の内容にまとめられます。
- yes…2FA有効化済みで、通常ログイン後に2FA一時トークンを入力して認証完了
- no…ログアウト状態 or 通常のログインのみ完了（一時トークン未検証）
※2FAログインフローにおいて、通常のログイン後本ページにリダイレクトされた時点ではログアウト状態と判定されます。上記の表示切替をWhen「Current user is logged out」にして設定することも可能ですが、今回は2FA無効ユーザーも除外したいので演算子uses 2FAを使ってWhenを設定しています。
1.2.1.3. Step3. 2FAログイン完了
次に、一時トークンを検証してログインに成功した際に表示するメッセージとテスト用のログアウトボタンを配置します。TextとButtonエレメントを1つずつ配置し、両方を1つのGroup配下に含みます。Textは「ログインしました！」という表示内容にします。
また、このGroupには「ユーザーが2FAログインを完了しているときこのGroupを表示する」という設定をしたいので、「This element is visible on page load」を無効にし、ConditionalでWhenは「Current User uses 2FA is yes」に、「This element is visible」は有効にします。
1.2.2. Workflow作成
1.2.2.1. Step1. メールアドレス・パスワードでログイン
まずは、2faページでログインWorkflowを追加します。先ほど追加したログインButtonに新規Workflowを追加し、Step1に「Log the user in」を追加します。
今回は、「Log the user in」後にページ遷移のActionを設定する必要がありません。というのも、メールアドレスとパスワードを使った通常のログイン成功後、前編でSettings >General > Privacy & Security >「Redirect users to check their temporary token」で設定したページ「2fa-temporary-token」にリダイレクトされるようになっているためです。
また、「Log the user in」後にActionを設定すると「Log the user in must be the last action in the workflow when you use 2-factor authentication（2要素認証の場合、Log the user inはWorkflowの最後のActionである必要があります）」というエラーになるのでご注意ください。
1.2.2.2. Step2. Authenticatorアプリで確認した一時トークンを入力
一時トークンの検証処理Workflowを作成します。「Group step2」に配置した「認証」Buttonに新規Workflowを作成します。Workflowの全体像は下記の通りです。
Step1で、入力されたトークンの検証を行います。ActionはAccount > Check 2FA tokenを設定します。「Check 2FA token」は2FAログイン時の一時トークンを検証する2FA専用Actionです。
ここでは基本的にはAuthenticatorアプリで確認した一時トークンを入力しますが、何らかの理由で一時的にAuthenticatorアプリを使用できない等の場合は、2FA有効化フローで得た「バックアップコード」を入力することでトークンの検証をクリアすることもできます。ちなみに、同一バックアップコードは一度しか使用することができません（2回以上使用することはできません）のでご注意くださいね。
Temporary tokenは一時トークンInputエレメントの値にし、Remember 30 daysは今回はnoにしておきます。
「Remember 30 days」では、今後30日間の同一デバイスの同一ブラウザでのログイン時に一時トークンの検証を不要とするかを設定できます。yesに設定すると不要になりますが、今回はnoにしてログイン時に毎回検証を行うように設定しておきます。
ちなみに、「Remember 30 days」をyesにする場合、2FAログインから30日以内にメールアドレス・パスワードで通常のログインに成功すると、その時点で2FAログインも完了状態になるのですが、2fa-temporary-tokenページにはリダイレクトされません。yesにする場合はこの点を考慮して設計する（ログインWorkflowでは「Log the user in」の後にActionを設定できないので、「User is logged in」EventでリダイレクトWorkflowを作成する等）のがおすすめです。
なお、入力された一時トークンが無効の場合はSettings > Languages > CORE - Message when the user enters an invalid 2fa codeに設定されているメッセージが表示されます。
1.2.2.3. Step3. 2FAログイン完了
最後に、テスト用のログアウト処理Workflowを作成します。「Group step2」に配置した「ログアウト」Buttonに新規Workflowを作成し、ログアウトして2faページに遷移するActionを設定します。
2. テスト
それでは、ここまで実装した内容をテストしてみます。2faページを開いて、2FA有効化済みのユーザーのメールアドレス・パスワードを入力して「ログイン」をクリックします。
2fa-temporary-tokenページにリダイレクトされたら、Authenticatorアプリで表示されている一時トークンを入力します。
ちなみに、こちらが一時トークンが間違っているときの表示です。
「認証」をクリックして、「ログインしました！」と表示されればログイン成功です。
前編の内容と合わせて、2FAの有効化からログインまで完了することも念のためテストしておきましょう。一時トークンの代わりにバックアップコードを入力してログイン検証をクリアできるかもテストしておくのがおすすめです。
3. まとめ
今回は、Bubbleで2FAを実装する手順の後編として、2FAを有効化したユーザーが一時トークンを使ってログインするフローを解説しました。外部の認証アプリを使用する複雑な2FAも、専用のActionを使用することで簡単に実装できましたね。ぜひ前編の記事と合わせて、Bubbleアプリのセキュリティ強化策としてご参考ください！
