Pluggbar autentisering: PIN, JWT og OIDC
Dagens «auth» var én delt PIN i et X-Pin-header, sammenlignet med !=, og
den sa ingenting om hvem som sendte et utrop – køen viste bare IP-adressen.
Crew har et eget adminpanel som skal bli identitetsleverandør.
Modellen er én datatype og én funksjon: Principal (hvem + roller +
rettigheter) og require(action), som enten gir deg den eller stopper
forespørselen. Handlinger: view, preview, announce, stop, clear.
Tre leverandører, prøvd i rekkefølge, alle valgfrie:
- pin X-Pin som før, men med hmac.compare_digest istedenfor ==. Rolle
admin som standard, så eksisterende oppsett oppfører seg likt.
Beholdt bevisst: den virker uten nett, og det er nettopp da man
trenger å rope ut noe.
- jwt Authorization: Bearer. HS256 med delt hemmelighet, eller
RS256/ES256 mot panelets JWKS. Krever exp – et token uten
utløpstid er en evig nøkkel. Roller fra et konfigurerbart claim,
som tåler liste, streng, kommaliste og punktsti.
- oidc Autorisasjonskode med PKCE. Discovery hentes først ved første
innlogging, så tjenesten starter selv om panelet er nede.
En leverandør er aktiv når den står i auth.providers *eller* når den er
ferdig konfigurert. Derfor slår ANNOUNCER_PIN=1234 alene fortsatt på PIN,
slik det har virket til nå. Er ingen aktiv, er alt åpent – som før.
/auth/token?t=<jwt> er broa mens panelet mangler OIDC: panelet lenker hit
med et kortlevd token, vi setter sesjonscookie. Ett klikk, ingen PIN.
Kontrakten panelet skal oppfylle står i docs/crew-integration.md.
401 betyr «vi vet ikke hvem du er, logg inn», 403 «vi vet hvem du er, men
rollen din får ikke dette». Et gyldig token uten roller gir 403, ikke 401 –
å logge inn på nytt ville ikke hjulpet.
Samtidig:
- /api/status er lukket bak «view». Den var åpen, og lekket både
meldingstekstene og IP-ene til alle som hadde sendt noe, til hvem som
helst som nådde porten. IP vises nå bare for den som har «clear»; alle
andre ser navnet.
- Køen og en revisjonslogg i logs/announcements.jsonl viser hvem som sendte
hva. Loggen feiler aldri forespørselen – en logg som ikke lar seg skrive
skal ikke hindre et utrop.
- Branding flyttet fra index.html til /api/config, så config.toml fra
forrige commit faktisk brukes.
- Sesjonsnøkkel i instance/secret_key, ellers logges alle ut ved hver
restart. SESSION_COOKIE_SECURE settes bare bak TLS: appen kjører på rå
HTTP over LAN og NetBird, og med Secure på ville ingen klart å logge inn.
57 tester, de fleste på auth, inkludert hele OIDC-runden mot en stubbet
leverandør. Det er delen man ikke kan se etter med øyet: at en PIN virker
ser du med en gang, at et utløpt token blir avvist ser du aldri før det
smeller.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
87066bb8c2
commit
d6eb811ee5
10 changed files with 2090 additions and 117 deletions
230
index.html
230
index.html
|
|
@ -17,6 +17,11 @@
|
|||
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: .02em; }
|
||||
h1 span { color: var(--accent); }
|
||||
.sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
|
||||
.top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
|
||||
.who { font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; padding-top: 2px; }
|
||||
.who b { color: var(--fg); font-weight: 600; }
|
||||
.who a { color: var(--accent); text-decoration: none; }
|
||||
.who a:hover { text-decoration: underline; }
|
||||
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
|
||||
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
|
||||
textarea { width: 100%; min-height: 120px; resize: vertical; background: var(--panel2); color: var(--fg);
|
||||
|
|
@ -27,8 +32,6 @@
|
|||
.row > div { flex: 1 1 160px; }
|
||||
select, input[type=range] { width: 100%; }
|
||||
select { background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; }
|
||||
.check { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 15px; }
|
||||
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
|
||||
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
|
||||
.chip { background: var(--panel2); border: 1px solid var(--line); color: var(--fg); border-radius: 999px;
|
||||
padding: 6px 12px; font-size: 13px; cursor: pointer; }
|
||||
|
|
@ -39,6 +42,7 @@
|
|||
button.btn:disabled { opacity: .5; cursor: default; }
|
||||
button.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
|
||||
button.danger { background: transparent; color: var(--danger); border-color: var(--danger); flex: 0 1 auto; }
|
||||
a.btn { text-decoration: none; display: inline-block; text-align: center; }
|
||||
audio { width: 100%; margin-top: 12px; display: none; }
|
||||
audio.show { display: block; }
|
||||
.msg { margin-top: 10px; font-size: 14px; min-height: 1.4em; }
|
||||
|
|
@ -47,32 +51,44 @@
|
|||
.status-head h2 { font-size: 14px; margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
|
||||
.now { padding: 12px; border-radius: 8px; background: var(--panel2); border-left: 4px solid var(--ok); }
|
||||
.now.idle { border-left-color: var(--line); color: var(--muted); }
|
||||
.now.idle::before { content: "Stille · ingenting i kø"; }
|
||||
ul.list { list-style: none; padding: 0; margin: 8px 0 0; }
|
||||
ul.list li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; display: flex; gap: 10px; }
|
||||
ul.list li .t { color: var(--muted); min-width: 48px; font-variant-numeric: tabular-nums; }
|
||||
ul.list li .s { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
|
||||
ul.list li .by { color: var(--muted); font-size: 12px; }
|
||||
ul.list li.failed .s { color: var(--danger); } ul.list li.stopped .s { color: var(--warn); }
|
||||
.pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 8px;
|
||||
animation: pulse 1.2s infinite; vertical-align: middle; }
|
||||
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
|
||||
#pinbox { display: none; }
|
||||
#loginbox, #pinbox { display: none; }
|
||||
#pinbox input { background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; width: 100%; }
|
||||
.hint { color: var(--muted); font-size: 12px; margin-top: 6px; }
|
||||
.hidden { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1><span>Announcer</span></h1>
|
||||
<p class="sub">Skriv meldingen, forhåndslytt, og send den ut på anlegget.</p>
|
||||
<div class="top">
|
||||
<div>
|
||||
<h1 id="title"></h1>
|
||||
<p class="sub" id="subtitle"></p>
|
||||
</div>
|
||||
<div class="who" id="who"></div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="loginbox">
|
||||
<div id="loginbtns" class="actions" style="margin-top:0"></div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="pinbox">
|
||||
<label for="pin">PIN</label>
|
||||
<input id="pin" type="password" inputmode="numeric" placeholder="Spør i crew-rommet">
|
||||
<label for="pin" id="pinlabel">PIN</label>
|
||||
<input id="pin" type="password" inputmode="numeric" autocomplete="current-password">
|
||||
<div class="hint" id="pinhint"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<label for="text">Melding</label>
|
||||
<textarea id="text" placeholder="F.eks. «Pizzaen er kommet. Hent i kantina!»" autofocus></textarea>
|
||||
<textarea id="text" autofocus></textarea>
|
||||
<div class="counter"><span id="count">0</span> / <span id="max">600</span></div>
|
||||
|
||||
<div class="chips" id="chips"></div>
|
||||
|
|
@ -122,68 +138,165 @@
|
|||
const $ = s => document.querySelector(s);
|
||||
const text = $('#text'), voice = $('#voice'), speed = $('#speed'), chime = $('#chime');
|
||||
const msg = $('#msg'), audio = $('#player'), btnPreview = $('#btnPreview'), btnAnnounce = $('#btnAnnounce');
|
||||
let cfg = {}, previewedKey = null;
|
||||
|
||||
const QUICK = [
|
||||
'Hei alle sammen! Pizzaen er kommet, hent i kantina.',
|
||||
'Turneringen starter om ti minutter. Møt opp ved scenen.',
|
||||
'Husk å rydde rundt plassen din. Takk!',
|
||||
'Natta! Vi senker lyset, hold volumet nede.',
|
||||
];
|
||||
let cfg = {}, can = [], previewedKey = null, pollTimer = null;
|
||||
|
||||
function key() { return JSON.stringify(payload()); }
|
||||
function payload() {
|
||||
return { text: text.value.trim(), voice: voice.value, speed: parseFloat(speed.value), chime: chime.value };
|
||||
}
|
||||
function headers() {
|
||||
const h = { 'Content-Type': 'application/json' };
|
||||
function headers(json) {
|
||||
const h = json ? { 'Content-Type': 'application/json' } : {};
|
||||
// PIN-en er den eneste legitimasjonen som ligger i nettleseren; OIDC og
|
||||
// token-lenka bruker sesjonscookien, som følger med av seg selv.
|
||||
const pin = localStorage.getItem('pin');
|
||||
if (pin) h['X-Pin'] = pin;
|
||||
return h;
|
||||
}
|
||||
function say(t, cls) { msg.textContent = t; msg.className = 'msg ' + (cls || ''); }
|
||||
function may(action) { return can.includes(action); }
|
||||
function updateAnnounce() {
|
||||
btnAnnounce.disabled = !(previewedKey && previewedKey === key());
|
||||
btnAnnounce.title = btnAnnounce.disabled ? 'Forhåndslytt først' : '';
|
||||
const ready = previewedKey && previewedKey === key();
|
||||
btnAnnounce.disabled = !ready || !may('announce');
|
||||
btnAnnounce.title = !may('announce') ? 'Du har ikke lov til å sende ut' :
|
||||
(btnAnnounce.disabled ? 'Forhåndslytt først' : '');
|
||||
btnPreview.disabled = !may('preview');
|
||||
btnPreview.title = may('preview') ? '' : 'Du har ikke lov til å forhåndslytte';
|
||||
}
|
||||
async function api(path, body) {
|
||||
const r = await fetch(path, { method: 'POST', headers: headers(), body: JSON.stringify(body || {}) });
|
||||
|
||||
async function req(path, opts) {
|
||||
const r = await fetch(path, opts);
|
||||
if (!r.ok) {
|
||||
let e = r.statusText; try { e = (await r.json()).error || e; } catch {}
|
||||
throw new Error(e);
|
||||
let e = r.statusText, login = false;
|
||||
try { const j = await r.json(); e = j.error || e; login = !!j.login; } catch {}
|
||||
const err = new Error(e);
|
||||
err.status = r.status; err.login = login;
|
||||
throw err;
|
||||
}
|
||||
return r;
|
||||
}
|
||||
const api = (path, body) =>
|
||||
req(path, { method: 'POST', headers: headers(true), body: JSON.stringify(body || {}) });
|
||||
|
||||
function onError(e) {
|
||||
say(e.message, 'err');
|
||||
// Rettighetene kan ha endret seg (riktig PIN skrevet, sesjon utløpt).
|
||||
if (e.status === 401 || e.status === 403) refreshAuth();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- branding
|
||||
function applyConfig(c) {
|
||||
cfg = c;
|
||||
const a = c.app || {};
|
||||
document.title = a.title || 'Announcer';
|
||||
// Siste ord i tittelen får aksentfargen; ett ord alene står som det er.
|
||||
const parts = (a.title || 'Announcer').split(' ');
|
||||
$('#title').textContent = '';
|
||||
if (parts.length > 1) {
|
||||
$('#title').append(document.createTextNode(parts.slice(0, -1).join(' ') + ' '));
|
||||
const sp = document.createElement('span'); sp.textContent = parts.at(-1); $('#title').append(sp);
|
||||
} else {
|
||||
$('#title').textContent = parts[0];
|
||||
}
|
||||
$('#subtitle').textContent = a.subtitle || '';
|
||||
if (a.accent) document.documentElement.style.setProperty('--accent', a.accent);
|
||||
text.placeholder = a.message_placeholder || '';
|
||||
$('#max').textContent = c.max_chars; text.maxLength = c.max_chars;
|
||||
|
||||
$('#chips').replaceChildren(...(a.quick_phrases || []).map(q => {
|
||||
const b = document.createElement('button');
|
||||
b.className = 'chip'; b.textContent = q.slice(0, 32) + (q.length > 32 ? '…' : ''); b.title = q;
|
||||
b.onclick = () => { text.value = q; text.dispatchEvent(new Event('input')); text.focus(); };
|
||||
return b;
|
||||
}));
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------- auth
|
||||
function applyAuth(auth) {
|
||||
can = auth.can || [];
|
||||
const methods = auth.methods || [];
|
||||
const who = $('#who');
|
||||
|
||||
if (auth.user) {
|
||||
who.textContent = '';
|
||||
who.append(document.createTextNode('Innlogget som '));
|
||||
const b = document.createElement('b'); b.textContent = auth.user.name; who.append(b);
|
||||
if (auth.user.roles.length) who.append(document.createTextNode(' (' + auth.user.roles.join(', ') + ')'));
|
||||
if (auth.logout_url) {
|
||||
who.append(document.createTextNode(' · '));
|
||||
const a = document.createElement('a'); a.href = auth.logout_url; a.textContent = 'Logg ut'; who.append(a);
|
||||
}
|
||||
} else if (auth.enabled) {
|
||||
who.textContent = 'Ikke innlogget';
|
||||
} else {
|
||||
who.textContent = '';
|
||||
}
|
||||
|
||||
// OIDC-knapper
|
||||
const oidc = methods.filter(m => m.login_url);
|
||||
$('#loginbox').style.display = (oidc.length && !auth.user) ? 'block' : 'none';
|
||||
$('#loginbtns').replaceChildren(...oidc.map(m => {
|
||||
const a = document.createElement('a');
|
||||
a.className = 'btn primary'; a.href = m.login_url; a.textContent = m.label || 'Logg inn';
|
||||
return a;
|
||||
}));
|
||||
|
||||
// PIN-feltet, bare når PIN er en av metodene og vi ikke alt er innlogget
|
||||
const pin = methods.find(m => m.method === 'pin');
|
||||
$('#pinbox').style.display = (pin && !auth.user) ? 'block' : 'none';
|
||||
if (pin) {
|
||||
$('#pinlabel').textContent = pin.label || 'PIN';
|
||||
$('#pinhint').textContent = auth.error || pin.hint || '';
|
||||
$('#pinhint').style.color = auth.error ? 'var(--danger)' : 'var(--muted)';
|
||||
if (!$('#pin').value) $('#pin').value = localStorage.getItem('pin') || '';
|
||||
}
|
||||
|
||||
$('#btnStop').classList.toggle('hidden', !may('stop'));
|
||||
$('#btnClear').classList.toggle('hidden', !may('clear'));
|
||||
updateAnnounce();
|
||||
}
|
||||
|
||||
async function refreshAuth() {
|
||||
try {
|
||||
const c = await (await fetch('/api/config', { headers: headers(false) })).json();
|
||||
applyAuth(c.auth || {});
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------- init
|
||||
async function init() {
|
||||
cfg = await (await fetch('/api/config')).json();
|
||||
const c = await (await fetch('/api/config', { headers: headers(false) })).json();
|
||||
applyConfig(c);
|
||||
|
||||
const groups = {};
|
||||
for (const v of cfg.voices) {
|
||||
for (const v of c.voices) {
|
||||
if (!groups[v.group]) { groups[v.group] = document.createElement('optgroup'); groups[v.group].label = v.group; voice.append(groups[v.group]); }
|
||||
const o = document.createElement('option'); o.value = v.id; o.textContent = v.name; groups[v.group].append(o);
|
||||
}
|
||||
voice.value = localStorage.getItem('voice') || cfg.default_voice;
|
||||
if (!voice.value) voice.value = cfg.default_voice;
|
||||
for (const c of cfg.chimes) {
|
||||
const o = document.createElement('option'); o.value = c.id; o.textContent = c.name; chime.append(o);
|
||||
voice.value = localStorage.getItem('voice') || c.default_voice;
|
||||
if (!voice.value) voice.value = c.default_voice;
|
||||
for (const ch of c.chimes) {
|
||||
const o = document.createElement('option'); o.value = ch.id; o.textContent = ch.name; chime.append(o);
|
||||
}
|
||||
chime.value = localStorage.getItem('chime') || cfg.default_chime;
|
||||
if (!chime.value) chime.value = cfg.default_chime;
|
||||
$('#max').textContent = cfg.max_chars; text.maxLength = cfg.max_chars;
|
||||
if (cfg.pin_required) { $('#pinbox').style.display = 'block'; $('#pin').value = localStorage.getItem('pin') || ''; }
|
||||
for (const q of QUICK) {
|
||||
const b = document.createElement('button'); b.className = 'chip'; b.textContent = q.slice(0, 32) + (q.length > 32 ? '…' : '');
|
||||
b.title = q; b.onclick = () => { text.value = q; text.dispatchEvent(new Event('input')); text.focus(); };
|
||||
$('#chips').append(b);
|
||||
}
|
||||
poll(); setInterval(poll, 2000);
|
||||
chime.value = localStorage.getItem('chime') || c.default_chime;
|
||||
if (!chime.value) chime.value = c.default_chime;
|
||||
|
||||
applyAuth(c.auth || {});
|
||||
poll();
|
||||
pollTimer = setInterval(poll, 2000);
|
||||
}
|
||||
|
||||
let pinDebounce = null;
|
||||
$('#pin').addEventListener('input', e => {
|
||||
localStorage.setItem('pin', e.target.value);
|
||||
clearTimeout(pinDebounce);
|
||||
// Vent til han er ferdig å skrive, så slipper vi en runde per tastetrykk.
|
||||
pinDebounce = setTimeout(() => { refreshAuth(); poll(); }, 600);
|
||||
});
|
||||
|
||||
text.addEventListener('input', () => { $('#count').textContent = text.value.length; updateAnnounce(); });
|
||||
voice.addEventListener('change', () => { localStorage.setItem('voice', voice.value); updateAnnounce(); });
|
||||
speed.addEventListener('input', () => { $('#speedval').textContent = parseFloat(speed.value).toFixed(2).replace(/0$/, '') + '×'; updateAnnounce(); });
|
||||
chime.addEventListener('change', () => { localStorage.setItem('chime', chime.value); updateAnnounce(); });
|
||||
$('#pin').addEventListener('input', e => localStorage.setItem('pin', e.target.value));
|
||||
|
||||
btnPreview.addEventListener('click', async () => {
|
||||
const p = payload();
|
||||
|
|
@ -195,10 +308,10 @@ btnPreview.addEventListener('click', async () => {
|
|||
if (audio.src) URL.revokeObjectURL(audio.src);
|
||||
audio.src = URL.createObjectURL(blob); audio.classList.add('show');
|
||||
await audio.play().catch(() => {});
|
||||
previewedKey = JSON.stringify(p); updateAnnounce();
|
||||
previewedKey = JSON.stringify(p);
|
||||
say('Hør gjennom. Fornøyd? Send den ut.', 'ok');
|
||||
} catch (e) { say(e.message, 'err'); }
|
||||
finally { btnPreview.disabled = false; }
|
||||
} catch (e) { onError(e); }
|
||||
finally { btnPreview.disabled = false; updateAnnounce(); }
|
||||
});
|
||||
|
||||
btnAnnounce.addEventListener('click', async () => {
|
||||
|
|
@ -209,29 +322,40 @@ btnAnnounce.addEventListener('click', async () => {
|
|||
text.value = ''; text.dispatchEvent(new Event('input')); previewedKey = null;
|
||||
audio.pause(); audio.classList.remove('show');
|
||||
poll();
|
||||
} catch (e) { say(e.message, 'err'); updateAnnounce(); }
|
||||
} catch (e) { onError(e); }
|
||||
finally { updateAnnounce(); }
|
||||
});
|
||||
|
||||
$('#btnStop').addEventListener('click', () => api('/api/stop').then(poll).catch(e => say(e.message, 'err')));
|
||||
$('#btnClear').addEventListener('click', () => api('/api/clear').then(poll).catch(e => say(e.message, 'err')));
|
||||
$('#btnStop').addEventListener('click', () => api('/api/stop').then(poll).catch(onError));
|
||||
$('#btnClear').addEventListener('click', () => api('/api/clear').then(poll).catch(onError));
|
||||
|
||||
const STATUS = { done: 'sendt', failed: 'feilet', stopped: 'stoppet', queued: 'i kø' };
|
||||
function hhmm(ts) { return new Date(ts * 1000).toLocaleTimeString('no', { hour: '2-digit', minute: '2-digit' }); }
|
||||
function li(it) {
|
||||
const l = document.createElement('li'); l.className = it.status;
|
||||
l.innerHTML = `<span class="t">${hhmm(it.created)}</span><span class="x"></span><span class="s">${STATUS[it.status] || it.status}${it.error ? ' · ' + it.error : ''}</span>`;
|
||||
l.innerHTML = `<span class="t"></span><span class="x"></span><span class="by"></span><span class="s"></span>`;
|
||||
l.querySelector('.t').textContent = hhmm(it.created);
|
||||
l.querySelector('.x').textContent = it.text;
|
||||
// Navnet står her, ikke IP-en. IP-en kommer bare med for en admin.
|
||||
l.querySelector('.by').textContent = [it.user, it.sender].filter(Boolean).join(' · ');
|
||||
l.querySelector('.s').textContent = (STATUS[it.status] || it.status) + (it.error ? ' · ' + it.error : '');
|
||||
return l;
|
||||
}
|
||||
async function poll() {
|
||||
const now = $('#now');
|
||||
try {
|
||||
const s = await (await fetch('/api/status')).json();
|
||||
const now = $('#now');
|
||||
const s = await (await req('/api/status', { headers: headers(false) })).json();
|
||||
if (s.current) { now.className = 'now'; now.innerHTML = '<span class="pulse"></span>'; now.append(document.createTextNode(s.current.text)); }
|
||||
else { now.className = 'now idle'; now.textContent = ''; }
|
||||
else { now.className = 'now idle'; now.textContent = (cfg.app && cfg.app.idle_text) || ''; }
|
||||
$('#queue').replaceChildren(...s.queued.map(li));
|
||||
$('#history').replaceChildren(...s.history.map(li));
|
||||
} catch {}
|
||||
} catch (e) {
|
||||
if (e.status === 401 || e.status === 403) {
|
||||
now.className = 'now idle';
|
||||
now.textContent = 'Logg inn for å se køen.';
|
||||
$('#queue').replaceChildren(); $('#history').replaceChildren();
|
||||
}
|
||||
}
|
||||
}
|
||||
init();
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue