assets/diagrams/02-controlled-oauth-consent-flow.html
Original HTML source
<!doctype html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Controlled OAuth Consent Flow</title>
<style>
  :root {
    color-scheme: light dark;
    --bg: #f8fafc;
    --fg: #172033;
    --muted: #5b6475;
    --line: #64748b;
    --neutral: #e2e8f0;
    --input: #bfdbfe;
    --process: #c7d2fe;
    --storage: #99f6e4;
    --external: #fde68a;
    --risk: #fecaca;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f172a;
      --fg: #e5e7eb;
      --muted: #a3adbd;
      --line: #94a3b8;
      --neutral: #334155;
      --input: #1d4ed8;
      --process: #4338ca;
      --storage: #0f766e;
      --external: #92400e;
      --risk: #991b1b;
    }
  }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  main {
    max-width: 980px;
    margin: 32px auto;
    padding: 0 20px;
  }
  svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .title {
    font-size: 22px;
    font-weight: 700;
    fill: var(--fg);
  }
  .label {
    font-size: 14px;
    font-weight: 650;
    fill: var(--fg);
  }
  .step {
    font-size: 13px;
    font-weight: 650;
    fill: var(--fg);
  }
  .small {
    font-size: 12px;
    fill: var(--muted);
  }
  .node {
    stroke: var(--line);
    stroke-width: 1;
  }
  .input {
    fill: var(--input);
  }
  .process {
    fill: var(--process);
  }
  .storage {
    fill: var(--storage);
  }
  .external {
    fill: var(--external);
  }
  .risk {
    fill: var(--risk);
  }
  .edge {
    stroke: var(--line);
    stroke-width: 1.6;
    fill: none;
  }
  .zone {
    fill: none;
    stroke: var(--line);
    stroke-width: 1.2;
    stroke-dasharray: 7 6;
    opacity: 0.9;
  }
</style>
<main>
  <svg viewBox="0 0 980 540" role="img" aria-labelledby="title desc">
    <title id="title">Controlled OAuth Consent Flow</title>
    <desc id="desc">A controlled app requests delegated permissions. The user sees a consent prompt. Entra creates a service principal and consent grant, then tokens can call Microsoft Graph within the granted scope.</desc>
    <defs>
      <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
        <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--line)"></path>
      </marker>
    </defs>

    <text class="title" x="32" y="42">Controlled OAuth Consent Flow</text>
    <text class="small" x="32" y="66">Teaching point: consent is an authorization event that creates durable objects defenders can review.</text>

    <path class="edge" fill="none" marker-end="url(#arrow)" d="M 172 184 C 228 184 236 184 292 184"></path>
    <path class="edge" fill="none" marker-end="url(#arrow)" d="M 438 184 C 494 184 502 184 558 184"></path>
    <path class="edge" fill="none" marker-end="url(#arrow)" d="M 704 184 C 760 184 768 184 824 184"></path>
    <path class="edge" fill="none" marker-end="url(#arrow)" d="M 632 244 C 632 294 560 294 560 344"></path>
    <path class="edge" fill="none" marker-end="url(#arrow)" d="M 696 366 C 742 366 758 366 804 366"></path>

    <rect class="node input" x="44" y="146" width="128" height="76" rx="10"></rect>
    <text class="step" x="76" y="176">1. User</text>
    <text class="small" x="76" y="198">sees prompt</text>

    <rect class="node process" x="292" y="146" width="146" height="76" rx="10"></rect>
    <text class="step" x="324" y="176">2. Consent</text>
    <text class="small" x="324" y="198">requested scopes</text>

    <rect class="node process" x="558" y="146" width="146" height="76" rx="10"></rect>
    <text class="step" x="590" y="176">3. Entra ID</text>
    <text class="small" x="590" y="198">records grant</text>

    <rect class="node storage" x="824" y="146" width="120" height="76" rx="10"></rect>
    <text class="step" x="852" y="176">Graph</text>
    <text class="small" x="852" y="198">delegated API</text>

    <rect class="zone" x="380" y="286" width="316" height="132" rx="14"></rect>
    <text class="label" x="410" y="320">Tenant-local objects to inspect</text>
    <rect class="node external" x="410" y="344" width="118" height="52" rx="9"></rect>
    <text class="small" x="438" y="366">Service</text>
    <text class="small" x="438" y="382">Principal</text>
    <rect class="node external" x="552" y="344" width="118" height="52" rx="9"></rect>
    <text class="small" x="580" y="366">OAuth</text>
    <text class="small" x="580" y="382">Grant</text>

    <rect class="node risk" x="804" y="326" width="140" height="80" rx="10"></rect>
    <text class="label" x="832" y="354">Review</text>
    <text class="small" x="832" y="376">who consented?</text>
    <text class="small" x="832" y="392">which scopes?</text>

    <text class="small" x="64" y="286">Class boundary: use a training tenant and controlled app.</text>
    <text class="small" x="64" y="306">No real lure, no external target, no student submission.</text>
  </svg>
</main>