開発者ガイド (詳細版)

サインインは SSO が担当しますが、「誰がサインイン中か」はサイト自身のセッションで決まります。Client Secret はバックエンドにだけ置きます。

サインインの 7 ステップ

1. ユーザーがサイトを開くブラウザー

   サイトはまだサインインしていないことに気づきます。

2. ユーザーを SSO に送るバックエンド

   バックエンド (/auth/login) がランダムな確認値 (state) を付けてブラウザーを SSO にリダイレクトします。

3. 誰なのかを確認SSOMicrosoft

   SSO はサインイン済みかを確認し、まだなら Microsoft で会社のアカウントとパスワードを入力してもらいます。

4. ユーザーをサイトに戻すSSO

   SSO は一度だけ使える「チケット」(code) と確認値を付けて、ブラウザーを /auth/callback に戻します。

5. チケットをユーザー情報に交換バックエンド

   バックエンドは確認値を照合し、「チケット + Client Secret」で SSO から名前・メール・部署などを受け取ります。この手順はブラウザーから見えないため、シークレットは安全です。

6. サインイン済みとして記憶バックエンド

   バックエンドはユーザー情報を自分のセッションに保存します。以降のリクエストはセッションを見るだけで、SSO に問い合わせる必要はありません。

7. ページに名前と写真を表示ブラウザー

   advantech-sso.js がサイトの /auth/me を呼んで現在のユーザーを表示します。

ユーザーに実際に見えるのは「サイトを開く → (初回のみ) Microsoft のサインイン画面 → サイトに戻る」だけです。他の手順は数ミリ秒で自動的に終わります。

SSO 側 (SSO 管理者またはサービス担当者が設定)

自分のサーバー

# .env (never commit this file)
SSO_CLIENT_ID=svc_xxxxxxxx
SSO_CLIENT_SECRET=xxxxxxxx
APP_URL=https://myapp.advantech.world
SESSION_SECRET=<64 random characters: openssl rand -hex 32>

以下のファイルは URL で直接参照するか、ダウンロードして自分のサイトに置けます。URL は固定で、名前は変わりません。

フロントエンド (HTML / CSS / JS)

本番では JS / CSS をダウンロードして自分のサイトに置くと、SSO のメンテナンスの影響を受けません。直接参照すれば常に最新版です。

バックエンドのテンプレート

バックエンドに SSO 専用パッケージは不要です。各言語の標準的な HTTP とセッション機能だけを使います (Flask、Express、PHP curl、ASP.NET Core、Spring Boot、Go 標準ライブラリ)。

SSO の API

/authorize に prompt を付けると、今回のサインインで画面を表示するか、パスワードを再入力させるかを決められます。テンプレートの /auth/login?silent=1 は prompt=none です。

• その他の値 (consent など) は無視され、指定なしと同じです。
• ユーザーがサインアウトした後の次回サインインでは、SSO が自動で select_account を使い、同じアカウントに勝手に戻らないようにします。
• login_required / access_denied がエラーとしてコールバックに戻るのは prompt=none のときだけです。それ以外は SSO または Microsoft の画面でユーザーが対応します。

# 画面なしで、自動サインインできるかだけ試す
https://ae-sso.advantech.com/authorize?client_id=svc_xxxxxxxx&redirect_uri=…&response_type=code&state=RANDOM&prompt=none

# パスワードを必ず再入力させる
https://ae-sso.advantech.com/authorize?client_id=svc_xxxxxxxx&redirect_uri=…&response_type=code&state=RANDOM&prompt=login

# テンプレートの /auth/login に prompt を追加
q["prompt"] = "login"                      # Python  (/auth/login)
q.set("prompt", "login");                  // Node.js
$q['prompt'] = 'login';                    // PHP

ログアウト URL のパラメーター (/logout)

SSO とフロントエンドキットが大部分を処理します。残りは必ずバックエンドで実装します。Client Secret の保管と「誰が何をできるか」の判断は、自分のサーバーにしかできないからです。

• SSO が提供 何もする必要はありません。
• フロントエンドキットが提供 ファイルを参照するだけです。
• 自分で実装 (テンプレートあり) バックエンドに必要です。テンプレートに実装済みなので、そのまま使うか参考にしてください。
• 必ず自分で開発 テンプレートでは決められません。業務ルールに合わせて開発してください。

• 本番の Redirect URI が登録され、APP_URL と一致している。
• サイトが https で、セッション cookie が HttpOnly + Secure + SameSite=Lax。
• Client Secret とセッション鍵が環境変数 / シークレット管理にだけあり、Git に入っていない。
• セッションを Redis かデータベースに保存している (再起動や複数サーバーでも有効)。
• サインインが必要なページと API はすべてバックエンドでセッションを確認し、権限もバックエンドで判断している。
• サービスのデータ権限は必要な項目だけ。必要に応じて許可リストを設定済み。
• 「うまくいかない？」の状況をすべてテスト済み: 未サインイン、権限なし、サインアウト、再読み込み、2 つのタブで同時サインイン。
• CSP のあるサイトは SSO のアドレスを追加済み。本番で JS / CSS を直接参照するか自分で置くか決めている。