コンテンツにスキップ

認証

認証フロー

概要

ユーザーがシステムにログインしてから、セッションを終了するまでの一連の認証フローの仕様。 ログイン画面・MFA（2要素認証）設定/認証フォーム・ログアウト画面・デモログイン画面を含む。

認証フロー全体図

flowchart TD
    A([ログイン画面 /login]) -->|ログインボタン押下| B{ログイン結果}
    B -->|2要素認証なし・認証成功| C{sysadmin?}
    C -->|Yes| E([ホーム画面 /home])
    C -->|No| D{利用規約同意済み?}
    D -->|Yes| E
    D -->|No| F[利用規約同意ダイアログ]
    F -->|同意| E
    B -->|2要素認証未設定| G[MFA設定フォーム]
    G -->|認証コードを検証して保存| E
    B -->|2要素認証設定済み| H[MFA認証フォーム]
    H -->|認証成功| E
    E -->|アカウントメニュー → ログアウト| I([ログアウト画面 /logout])
    I -->|ログアウト完了| A
    J([デモログイン画面 /demo]) -->|セッション情報を自動読み取り → ログイン| E
    J -->|ログイン失敗| A

1. ログイン画面

URL
パス 説明
/login 標準ログイン画面
/[CustCd]/login 顧客コード付きURL（顧客コードが事前入力される）

URLに顧客コードを含めることで顧客コードを事前入力できる。

画面構成

スクリーンショット

画面中央にログインパネルを表示する。ログイン状態に応じてパネル内のフォームが切り替わる。

フォーム 表示タイミング
ログインフォーム 初期表示（未ログイン時）
MFA設定フォーム ログイン成功後、MFAが未設定のユーザー
MFA認証フォーム ログイン成功後、MFAが設定済みのユーザー
画面項目（ログインフォーム）
項目名 型 必須 説明
顧客コード テキスト ○ 半角英数字・ハイフン・アンダースコアで入力。URLで顧客コードが指定されている場合は自動入力される
ユーザーID テキスト ○ ログインID
パスワード パスワード ○ 目のアイコンで表示/非表示を切り替えられる
ボタン・アクション（ログインフォーム）
ボタン名 動作
ログイン 入力内容を検証してログイン処理を実行。処理中はローディングスピナーを表示しボタンを無効化
エラーメッセージ（ログインフォーム）
条件 メッセージ
顧客コードが未入力 顧客コードは必須です
顧客コードに全角文字が含まれる 半角で入力してください
ユーザーIDが未入力 ユーザーIDは必須です
パスワードが未入力 パスワードは必須です
認証情報が正しくない ログイン失敗（APIエラーメッセージをそのまま表示）
利用規約同意処理の失敗 利用規約の同意に失敗

2. MFA設定フォーム

概要

MFAが未設定のユーザーがログイン成功後に表示されるフォーム。 認証方法を選択し、テスト送信した認証コードを検証してMFA設定を完了させる。 設定が完了するとホーム画面へ遷移する。

設定済みのユーザーは認証方法の変更も可能（編集モード切り替えあり）。

画面構成

MFA設定フォーム（トークンアプリ）

QRコードダイアログ

シークレットキーダイアログ

画面項目（MFA設定フォーム）

認証方法選択

項目名 型 必須 説明
認証方法 セレクト ○ 「トークンアプリ」「メール」「SMS」から選択。メール・SMSはオプション契約が必要

トークンアプリ選択時

項目名 型 必須 説明
QRコード / シークレットキー ボタン - クリックでダイアログを開き、認証アプリ登録用QRコードまたはシークレットキーを表示
認証コード テキスト ○ 認証アプリで生成した6桁のOTPを入力

メール選択時

項目名 型 必須 説明
メールアドレス テキスト ○ 認証コードの送信先メールアドレス（RFC準拠の形式チェックあり）
テスト送信 ボタン - 入力したメールアドレスに認証コードを送信。メールアドレスが有効な形式の場合のみ活性化
認証コード テキスト ○ メールで受け取った6桁のコードを入力

SMS選択時

項目名 型 必須 説明
電話番号 テキスト ○ 認証コードの送信先電話番号（10桁または11桁）
テスト送信 ボタン - 入力した電話番号にSMSで認証コードを送信。電話番号が有効な桁数の場合のみ活性化
認証コード テキスト ○ SMSで受け取った6桁のコードを入力
ボタン・アクション（MFA設定フォーム）
ボタン名 表示条件 動作
QRコード生成 トークンアプリ選択時・編集モード QRコードダイアログを開く
シークレットキー表示 トークンアプリ選択時・編集モード シークレットキーダイアログを開く
テスト送信 メール/SMS選択時・編集モード 入力先に認証コードを送信
認証 編集モード 認証コードを検証する（6桁入力時のみ活性化）
保存 認証成功後 MFA設定を確定してホーム画面へ遷移
編集 設定済みデータあり・非編集モード 認証方法を変更する編集モードに切り替え
キャンセル 編集モード 変更を破棄して編集前の状態（認証方法・入力値）に戻す
エラーメッセージ（MFA設定フォーム）
条件 メッセージ
認証コードが不正（トークンアプリ・メール・SMS共通） 認証に失敗しました。再度、認証コードの発行をやりなおしてください

3. MFA認証フォーム

概要

MFAが設定済みのユーザーがログイン成功後に表示されるフォーム。 設定済みの認証方法（トークンアプリ/メール/SMS）で発行した認証コードを入力して認証する。

画面構成

MFA認証フォーム（トークンアプリ）

画面項目（MFA認証フォーム）
項目名 型 必須 説明
認証コード テキスト ○ 各認証手段で受け取った6桁コードを入力。6桁入力時のみ「認証」ボタンが活性化

メール/SMS選択時の追加表示

項目名 説明
認証コードを送信 / 再送信 メールまたはSMSに認証コードを送信（初回送信後は「再送信」に変わる）
クールダウンメッセージ 送信後のタイマー表示：「N秒後に認証コードを再送信できます。」
残り再送信可能回数（SMS） 「再送信は残りN回まで可能です。」
上限超過メッセージ（SMS） 送信回数が上限に達しました。10分間の待機時間経過後に再送信できます。
ログイン画面に戻る SMS送信回数が上限に達した場合に表示。押下でページをリロードしてログイン画面に戻る
ボタン・アクション（MFA認証フォーム）
ボタン名 表示条件 動作
認証コードを送信 メール/SMS・初回送信前 メールまたはSMSに認証コードを送信
認証コードを再送信 メール/SMS・初回送信後 クールダウンおよび上限未達の間は活性化。上限/タイマー中は非活性
認証 常時（6桁入力時のみ活性化） 認証コードを検証してログインを完了する
ログイン画面に戻る SMS送信上限超過時 ページをリロードしてログイン画面に戻る
エラーメッセージ（MFA認証フォーム）
条件 メッセージ
SMS認証コード送信が上限超過 送信回数が上限に達しました。10分間の待機時間経過後に再送信できます。
SMS再送信クールダウン中 ○秒後に認証コードを再送信できます。
認証コードが不正 認証に失敗しました。再度、認証コードの発行をやりなおしてください

4. ログアウト画面

URL

/logout

概要

ヘッダーのアカウントメニューから「ログアウト」を選択した際に遷移する画面。 スピナーを表示してバックグラウンドでログアウト処理（API呼び出し・状態リセット）を行い、完了後に自動でログイン画面へリダイレクトする。 ユーザーが操作する画面はなく、視覚的なフィードバックのみ提供する。

動作フロー
  1. アカウントメニューの「ログアウト」クリック → セッション情報をクリアして /logout へ遷移
  2. /logout 画面でロゴ＋「ログアウトしています」＋スピナーを表示
  3. ログアウト処理を実行
  4. 完了後、ログイン画面（/login）へ自動遷移
画面構成

ログアウト画面

表示要素 説明
モバロケロゴ 画面中央のパネルに表示
「ログアウトしています」テキスト 赤文字で表示
スピナー 処理中のローディングインジケーター

ボタン・操作項目なし。自動でログイン画面へ遷移する。

5. デモログイン画面

URL

/demo

クエリパラメータ ?cid= で顧客コードを指定できる。

概要

デモ環境専用のログイン画面。通常のID/パスワード入力は行わず、ブラウザに保存されたセッション情報を自動読み取りして自動ログインする。

通常のログイン画面との主な差異は以下のとおり。

項目 通常ログイン画面 デモログイン画面
入力フォーム 顧客コード・ユーザーID・パスワードを手動入力 なし（自動ログイン）
認証方式 ID/パスワード認証 ブラウザに保存されたセッション情報による自動認証
警告バナー なし 画面左上に「デモログイン画面」警告バナーを常時表示
ログイン失敗時 エラーメッセージを表示 「N秒後にログイン画面に遷移します。」を表示し、自動でログイン画面へ遷移
動作フロー
  1. /demo にアクセス（URLに顧客コードを含めることも可能）
  2. ブラウザに保存されたセッション情報を読み取る
  3. セッション情報が存在する場合、自動でログイン処理を実行
  4. ログイン成功 → ホーム画面へ遷移
  5. ログイン失敗 → 「ログイン失敗」エラーを表示し、5秒後にログイン画面（/login）へ自動遷移
画面構成
表示要素 説明
「デモログイン画面」警告バナー 画面左上に警告として常時表示
モバロケロゴ 画面中央のパネルに表示
「自動ログインしています。」テキスト ログイン処理中に赤文字で表示
「N秒後にログイン画面に遷移します。」テキスト ログイン失敗時に赤文字で表示
エラーメッセージ（ログイン失敗） 「ログイン失敗」を表示