- 印刷
- ダークライト
ウェブアプリケーションのテストに、認証は欠かせないものです。昨今ではセキュリティ強化に伴い、シンプルなパスワード認証に加え、多要素の認証が求められるアプリケーションも増えていますよね。
この記事ではそのうちの一つ、TOTP (Time-Based One-Time Password) を発行するAuthenticator appを用いた二要素認証(2FA)をAutifyしていきましょう💫
はじめに
今回取り上げる二要素認証をAutifyでテストするには、以下が前提となります。
- テスト対象のウェブアプリケーションが、TOTPを生成する任意のAuthenticator appによる認証に対応していること
- TOTPを生成するAuthenticator APIが用意できること
- 詳しくは「二要素認証を行う仕組みの準備」をご参照ください!
どんなシナリオができる?
以下は、実際のシナリオでGitHubの2FAを通過している例です。
- ステップ5:一段階目のパスワード認証を行う
- ステップ6-9:新しいウィンドウ内で(※)JSステップを実行し、ステップ7でTOTPを取得しreturnする
- ステップ10:ステップ7でreturnされたTOTPを、二要素認証のフォームへ入力する
- ステップ11-12:認証処理を進め、成功したことを確認する
※テスト対象のサイトによっては、同一ウィンドウ内で直接JSステップを実行することができないケースがあるため
シナリオ詳細画面
テスト結果詳細画面
ステップ10で、ステップ7で取得したTOTPが入力されているのを確認できます。
作ってみましょう!
上記でご紹介したシナリオを作成する方法を、さっそく見ていきましょう。
手順は大きく
- 二要素認証を行う仕組みの準備
- シナリオの準備
に分かれます。
二要素認証を行う仕組みの準備
1. TOTPを生成するAPIを準備します。ご自身の環境で準備いただくことをおすすめいたしますが、動作検証にあたってはAutifyにてホスティングしている下記エンドポイントをご自由にご利用ください😊
- APIのサンプルコード
- APIのエンドポイントのサンプル(ご利用方法は上記リポジトリをご参照ください)
https://autify-jsstep-util-apis.herokuapp.com/totp
2. TOTPを生成するためのシークレットキーを用意します。通常は、テスト対象のアプリケーションによって表示されます。シークレットキーは撮影向けのQRコードで表示されるケースがよくありますが、文字列を取得してください。
たとえば、GitHubのサイトの場合は、以下で表示されるテキストがシークレットキーに相当します。
シナリオの準備
1. シナリオを作成します。ウェブアプリケーションに対する操作を、二要素認証を行う直前まで通常通りレコーディングします。
2. 「二要素認証を行う仕組みの準備」の2. で用意したシークレットキーを使用し、TOTPを生成するAPIに対するリクエストをJSステップにて行い、返ってきた値 (TOTP) をreturnします。
サンプルコードは以下の通りです。"YOUR SECRET CODE" の部分を、実際のシークレットキーに置き換えてご利用ください。
var secret = "YOUR SECRET CODE"
var url = "https://autify-jsstep-util-apis.herokuapp.com/totp";
var xhr = new XMLHttpRequest();
var otp = null;
xhr.onerror = function() {
throw new Error("Network Error");
};
xhr.onload = function() {
otp = xhr.response;
};
xhr.open("POST", url, false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("key=" + secret);
return otp;
3. 2. のJSステップでreturnされたTOTPを、二要素認証の入力値として設定します。
これで、テスト実行のたびに動的に生成されるTOTPを入力することができるようになりました🎉
留意点
- テスト対象のアプリケーションやサービス固有の二要素認証の仕様につきましては、各種サービスのドキュメントをご参照ください。
- 今回のケースを応用し、毎回異なるメールアドレスでサインアップ後、毎回異なるシークレットキーを用いて二要素認証を行うケースも、メールテスト機能の「ランダムメールアドレス」を併用すれば実現可能な場合があります。是非お試しください!
ご不明点がございましたら、お気軽にサポートまでお問い合わせください🙌