Alternative Architecture DOJO

オルターブースのクラウドネイティブ特化型ブログです。

Azure Active Directory B2CでTOTPを使った多要素認証をする

こんにちは、最近Rustを勉強中の花岡です。 この記事はオルターブース Advent Calendar 2020の19日目の記事です。

adventar.org

今回はAzure Active Directory B2C(以下AAD B2C)のカスタムポリシーを使ったTime-based One-time Password(以下TOTP)での多要素認証(以下MFA)技術検証をしましたので紹介します。

TOTPを参考にしたサンプルのカスタムポリシーが下記のリポジトリです。

github.com

Azure Active Directory B2Cとは

Azureが提供する、認証やID管理などを行うための認証プラットフォームサービスです。

docs.microsoft.com

TOTPとは

「シード」や「シークレット」と呼ばれるランダムな値と時間を使った数学的計算を元に生成されたワンタイムパスワードのことです。 30~60秒でワンタイムパスワードが切り替わりSMS認証よりも安全な認証を行うことができます。
例として、GIthubやFacebookなどでMFAを有効化するときに出てくるQRコードをAuthyMS Authenticatorなどの認証管理アプリを使って読み込むとワンタイムパスワードが生成されるようになります。
なお、詳しい技術的なTOTPの仕様はRFC6238をご覧下さい。

認証フロー

参考にしたサンプルに認証フローが書いてあり、今回は下記のようなやり方をカスタムポリシーで実現します。

https://github.com/azure-ad-b2c/samples/blob/master/policies/custom-mfa-totp/media/flow.png?raw=true

手順

結構やることが多いですが、最後までお付き合いよろしくお願いします。

事前準備

  • 下記のリポジトリからgit cloneをして下さい。以降の手順で使います。

github.com

カスタムポリシー編集で使います。なお拡張機能にはポリシーアップロード機能がありますが、今回の記事では説明しません。興味のある方はこちらへ。

1. AAD B2Cの準備

始めにカスタムポリシーを設定するためにAADB2Cの設定を行います。

1.1 AAD B2Cのリソース作成

下記のドキュメントの通り作成してください。作成した後はテナント名を控えておいてください。

docs.microsoft.com

1.2 AAD B2CにWeb アプリケーションを登録する

下記のドキュメントの通りに進めてください。

docs.microsoft.com

このときドキュメントの中にも書いてありますが、応答URLには、https://jwt.ms を指定してください。認証後にJWT形式のアクセストークンを確認するためです。

1.3カスタムポリシーの準備

下記のドキュメントの「ProxyIdentityExperienceFramework アプリケーションを登録する」まで進めてください。
カスタムポリシーのアップロードは後ほどの手順で説明します。 なお、Facebookの手順は範囲外のことなのでやらなくて大丈夫です。

docs.microsoft.com

このとき、IdentityExperienceFrameworkのアプリケーションID と ProxyIdentityExperienceFrameworkのアプリケーションIDを控えておいて下さい。

f:id:karyu721:20201218144232p:plain

2.Azureリソースの準備

TOTPはAPIサーバーを使った認証を行いますので、別途Azureリソースを準備する必要があります。
必要なリソースは以下2つです。

  • QRコードの生成、認証を行うAzure Functions
  • QRコードを表示するカスタムHTMLを表示するためのストレージアカウント

2.1 Azure Functions リソースの作成

事前準備でダウンロードしたリポジトリ配下のsrc/AADB2C.TOTP/FunctionsフォルダをVS Codeから開いてデプロイをします。

docs.microsoft.com

手順に従えば、Functions、Application Insight、ストレージアカウントのリソースが作られます。
このとき、functionsのURLを控えておいてください。カスタムポリシーを編集する際に使います。

f:id:karyu721:20201218143530p:plain
Azure portal上

2.1.1 アプリケーション設定

下記のようにアプリケーション設定を追加します。 f:id:karyu721:20201218173106p:plain

2.2 カスタムhtmlの配置

リポジトリ配下のcontent/selfasserted-appfactor-registration.htmlを配置します。このhtmlは認証時に読み取るQRコードを表示するカスタムhtmlです。

2.2.1 配置用blobコンテナの作成

下記のようにストレージアカウントにhtml配置用のコンテナを作成して下さい。

f:id:karyu721:20201218150113p:plain
blobコンテナ

2.2.2 htmlの配置

下記のように作成したコンテナにhtmlを配置します。 f:id:karyu721:20201218150442p:plain

配置したhtmlのURLを控えておいて下さい f:id:karyu721:20201218150950p:plain

2.2.3 CORSの設定

Azure B2Cがhtmlを読み取れるように下記のCORSの設定を行います。

f:id:karyu721:20201218151310p:plain
CORSの設定画面

許可されたオリジンはhttps://hogehoge.b2clogin.comのようにB2CのテナントURLを設定して下さい。

3 カスタムポリシー

ここから本番です。リポジトリにあるカスタムポリシーを使って設定を行っていきます。

3.1 カスタムポリシーの編集

リポジトリ配下のiefフォルダをVSCodeで開いて下さい。
TOTPのカスタムポリシーがあります。ここで編集するのはappsettings.jsonです。 f:id:karyu721:20201218153332p:plain

環境ごとに設定値を入力してポリシーのビルドを行う拡張機能を使います。
DevelopmentProductionがありますが、今回はDevelopmentだけを使います。
必要に置いてProductionも編集するようにして下さい。

設定する項目は下記の通りです。

  • Tenant: your-tenantのところを自分のテナント名に変更する。
  • CustomSelfassertedUrl: 控えておいたhtmlのURL
  • GenerateAPI: https://your-app-name.azurewebsites.netのところを控えておいたFuntionsのURL
  • VelfiyAPI: 同上
  • IdentityExperienceFrameworkAppId: IdentityExperienceFrameworkのアプリケーションID
  • ProxyIdentityExperienceFrameworkAppId: ProxyIdentityExperienceFramework

ApplicationObjectIdClientIdは次の項目で説明します。

3.1.1 ApplicationObjectIdClientIdの取得

この二つの項目がなぜ必要かというと、認証フローの中でカスタム属性というものを使っていて、それを操作するためのIDが必要ということです。

取得方法はB2Cのトップ画面から

  • アプリケーションの登録>全てのアプリケーション>b2c-extensions-app...を選択
  • 下記のように表示されるのでそれぞれアプリケーションIDとオブジェクトIDを控える

f:id:karyu721:20201218162654p:plain

ApplicationObjectIdにはオブジェクトIDを、ClientIdにはアプリケーションIDを設定して下さい。

3.2 カスタムポリシーのビルド

VSCodeの画面からwindowsならCtrl+Shift+P macならShift+Command+Pを押してB2Cと入力して下さい。 f:id:karyu721:20201218165648p:plain B2C Policy BuildをするとEnvironmentsフォルダに各環境ごとのカスタムポリシーが出来上がります。

3.3 カスタムポリシーのアップロード

ビルドしたDevelopmentポリシーをB2Cにアップロードして下さい。

VSCodeのポリシー機能を使うのもありです。

動作確認

エラーなくアップロードできたら、AAD B2Cのポータル画面>Identity Experience Frameworkに移動します。

f:id:karyu721:20201218170811p:plain

手順

  1. 上記のようにアップロードができているの確認したらB2C_1A_TOTP_signup_signinをクリックし、1.2で作成したアプリケーションを選択して「今すぐ実行」をクリックします。

  2. サインイン画面が表示されますのでsign up nowをクリックして適当な値を入力していって下さい。

f:id:karyu721:20201218175122p:plain

  1. サインアップ が成功すると下記の画面が出てきます。QRコードを手持ちのAuthenticatorアプリを使って読み込み、表示されたワンタイムパスワードを入力して下さい。 f:id:karyu721:20201218175912p:plain

4.最後に認証が完了するとAADB2Cからhttps://jws.msにリダイレクトされたIDトークンの内容が表示されます。自分が登録した情報がクレームにあるか確認しましょう!

f:id:karyu721:20201218180844p:plain

以上、AADB2CでTOTPを使った多要素認証ができました。お疲れ様でした。

終わりに

カスタムポリシーな上にAPI実装があるので結構大変でしたが、やってみるといい感じにできたので大変勉強になりました。
カスタムポリシーを勉強したい人は公式のサンプル集はいろんなパターンの認証があるのでどれか試してみるのもいいのではないでしょうか。私はしばらくはお腹いっぱいですw

github.com

また。今回のサンプルを実際に導入する場合、カスタムポリシーのDevelopmodeを削除する必要があるのと、APIを保護する必要があります。いろんな手段があるので参考にしてみて下さい。

docs.microsoft.com

docs.microsoft.com