多要素認証の実装
サンプルアプリのMFA設定機能を題材に、SaaSus Auth APIを使用して多要素認証(MFA)機能を実装する方法を解説します。
サンプルアプリでは、以下の2つの認証方式を選択できます。
- 認証アプリ(TOTP): Google AuthenticatorやAuthyなどの認証アプリで生成されるワンタイムコードを使用
- メール認証: ログイン時に登録メールアドレスへ認証コードを送信
メール認証方式を利用する場合の注意
多要素認証(MFA)の方式として「メール」を使用しているユーザーは、SaaSus Platform が生成するログイン画面からパスワードをリセットすることはできません。
このようなユーザーのパスワードを再設定する場合は、SaaS 運用コンソールのユーザー管理画面から、管理者によるパスワードリセットを行ってください。
以下は多要素認証設定ダイアログのスクリーンショットです。

MFA機能では以下の操作を提供します。
- MFA設定状態と認証方式の確認
- 認証方式の選択(認証アプリ / メール認証)
- 認証アプリケーション(Google Authenticator等)の登録
- MFAの有効化・無効化
- QRコードによる認証アプリのセットアップ
- 認証方式の切り替え
前提条件
メール認証を利用するには、SaaSus Platform でドメイン名の設定とメール送信ドメイン認証(DKIM)が完了している必要があります。 設定方法は ドメイン・メール送信ドメイン認証・遷移先の設定 を参照してください。
フロントエンド実装
認証方式選択のUIフロー
フロントエンドでは、ステートマシンによ りMFA設定ダイアログの表示を管理しています。
- ダイアログを開くと
GET /mfa_statusでMFA状態を取得 - 未設定の場合は方式選択画面を表示(認証アプリ / メール認証のカード選択)
- 認証アプリを選択した場合はQRコード表示と認証コード入力へ遷移
- メール認証を選択した場合は確認画面を表示し、有効化を実行
- 設定済みの場合は現在の方式を表示し、別の方式への切り替えや無効化が可能
実装例リンク
以下のリンク先に、フロントエンドの実装が含まれています。
- React:
UserMfaSettingDialog.tsx- MFA設定ダイアログコンポーネント - React:
HeaderUserbox.tsx- ヘッダーユーザーメニュー