Files
tools-legacy/tools/public/assets/fp/app.js
T
adebisi-fa 14f6fd6a8e feat(fpagent): authenticate the wizard's a2loft calls with the session token
The fingerprint wizard's staff-lookup and fingerprint-save proxies forwarded the page's OTP with the session phone. a2loft resolves that phone against the domain being addressed, so an operator who holds only capture_biometric was rejected unless they were a domain super-user. The cropper already saves with the session token.

- tools/server.js: both a2loft proxies send Authorization: Bearer <session token>, no phone/otp; validateProxy drops the OTP and phone checks.
- tools/public/assets/fp: both OTP fields, otpLookup/otpSave state, request params and resets removed; canLookup/canSave no longer gate on OTP.
- Tests assert the Bearer header, no query auth, no OTP field in the served page, and both gates without a credential (66/66 pass).
- README and Help page updated.

Requires the a2loft fingerprint-token-auth change deployed first. OpenSpec change: fingerprint-token-auth.
2026-10-02 20:41:43 +01:00

358 lines
14 KiB
JavaScript

/* Fingerprint Agent — enrollment wizard. Captures run through the local
fpagent binary; artifacts are saved via the app's a2loft proxy. */
/* global Vue, axios, io, customElements */
/* window.__SESSION__ is injected server-side by /fingerprint */
Vue.config.ignoredElements = [/^cds-/];
(function () {
'use strict';
var MAX_STAGE = 5; // the U.are.U 4500 reports five enrollment stages
function newFinger() {
return { status: 'idle', stage: 0, id: '', fingerprint: '', image: '' };
}
var app = new Vue({
el: '#app',
data: {
loading: true,
session: null,
tick: Date.now(),
socket: null,
// available is tri-state: null = not yet reported (old agent), true/false
// = the last fprint-device-status. Unknown is not blocked.
agent: { connected: false, version: '', captureAgentId: '', available: null, device: '' },
domain: '',
reference: '',
staff: null,
busy: { lookup: false, save: false },
refreshing: false,
notif: { show: false, kind: 'info', title: '', subtitle: '' },
notifTimer: null,
fingers: {
'right-thumb': newFinger(),
'right-index-finger': newFinger(),
},
fingerLabels: { 'right-thumb': 'Right thumb', 'right-index-finger': 'Right index finger' },
capturing: null, // finger currently being captured (fpagent serves one at a time)
cancelling: false,
prevCapture: null, // previous good capture for the finger being recaptured
},
computed: {
maxStage: function () { return MAX_STAGE; },
bothCaptured: function () {
return this.fingers['right-thumb'].status === 'done' &&
this.fingers['right-index-finger'].status === 'done';
},
canLookup: function () {
return !!(this.domain && this.reference) && !this.busy.lookup;
},
canSave: function () {
return this.bothCaptured && !this.busy.save;
},
refreshUnlocksAt: function () {
var ttl = (this.session && this.session.domainCacheTtlMs) || 5 * 60 * 1000;
return ((this.session && this.session.domainsCheckedAt) || 0) + ttl;
},
refreshEnabled: function () {
return !!this.session && !this.refreshing && this.tick >= this.refreshUnlocksAt;
},
refreshEtaLabel: function () {
var s = Math.max(0, Math.ceil((this.refreshUnlocksAt - this.tick) / 1000));
var m = Math.floor(s / 60);
return m > 0 ? 'in ' + m + ' min' : 'in ' + s + ' s';
},
domainsLastCheckedLabel: function () {
if (!this.session || !this.session.domainsCheckedAt) return '';
return new Date(this.session.domainsCheckedAt).toLocaleTimeString();
},
// Warning shown in the capture panel when the agent cannot capture.
scannerNotice: function () {
if (!this.agent.connected) {
return {
title: 'Capture agent offline',
subtitle: 'The fpagent service is not reachable on this machine. Captures are disabled until it reconnects.',
};
}
if (this.agent.available === false) {
return {
title: 'Scanner not connected',
subtitle: 'Attach the fingerprint reader. Captures are disabled until the agent detects it.',
};
}
return null;
},
// Capture is allowed when the agent is connected and no status has said
// the scanner is missing. Unknown availability (old agent) stays allowed.
captureReady: function () {
return this.agent.connected && this.agent.available !== false;
},
},
created: function () {
var self = this;
this.loadSession()
.then(function () {
self.connectAgent();
})
.catch(function () { /* loadSession redirects on 401 */ });
setInterval(function () { self.tick = Date.now(); }, 1000);
// web components upgrade after first render — re-apply reactive bindings
Promise.all(
['cds-button', 'cds-tag', 'cds-progress-bar', 'cds-inline-notification'].map(function (n) {
return customElements.whenDefined(n).catch(function () {});
})
).then(function () {
self.$forceUpdate();
});
},
methods: {
showNotif: function (kind, title, subtitle, sticky) {
var self = this;
this.notif = { show: true, kind: kind, title: title, subtitle: subtitle || '' };
if (this.notifTimer) clearTimeout(this.notifTimer);
if (!sticky) {
this.notifTimer = setTimeout(function () { self.notif.show = false; }, 6000);
}
},
loadSession: function () {
// injected by the server when the page was rendered (no round-trip)
this.session = window.__SESSION__ || null;
if (!this.session) {
window.location.href = '/auth/login';
return Promise.resolve();
}
if (this.session.domains && this.session.domains.length) {
this.domain = this.session.domains[0].code;
}
this.loading = false;
return Promise.resolve();
},
refreshDomains: function () {
var self = this;
if (!this.refreshEnabled) return;
this.refreshing = true;
axios.post('/auth/domains/refresh').then(function (r) {
self.session.domains = r.data.domains;
self.session.domainsCheckedAt = r.data.domainsCheckedAt;
if (self.session.domains.length && self.session.domains.indexOf(self.domain) < 0) {
self.domain = self.session.domains[0].code;
}
if (!self.session.domains.length) {
self.showNotif('warning', 'No permitted domains',
'You are not permitted to capture fingerprints for any domain.', true);
}
}).catch(function (err) {
var msg = (err.response && err.response.data && err.response.data.message) ||
'Could not refresh domain permissions.';
self.showNotif('error', 'Refresh failed', msg);
}).finally(function () {
self.refreshing = false;
});
},
/** The agent status tag lives in the server-rendered header. */
renderAgentTag: function () {
var el = document.getElementById('agent-status');
if (!el) return;
var label, type, title = this.agent.version ? 'fpagent ' + this.agent.version : '';
if (!this.agent.connected) {
label = 'Agent offline'; type = 'red';
} else if (this.agent.available === false) {
label = 'Scanner not connected'; type = 'red';
} else if (this.agent.available === true) {
label = 'Agent ready'; type = 'green';
} else {
// Connected but no status yet (or an agent that does not report it).
label = 'Agent connected'; type = 'green';
}
if (this.agent.available === true && this.agent.device) {
title += ' · ' + this.agent.device;
}
el.textContent = label;
el.setAttribute('type', type);
el.setAttribute('title', title);
},
connectAgent: function () {
var self = this;
this.socket = io(this.session.agentUrl, { reconnectionDelayMax: 5000 });
var offline = function () {
self.agent.connected = false;
self.agent.available = null;
self.agent.device = '';
self.renderAgentTag();
};
this.socket.on('connect', function () { self.agent.connected = true; self.renderAgentTag(); });
this.socket.on('disconnect', offline);
this.socket.on('connect_error', offline);
this.socket.on('agent-hello', function (data) {
self.agent.version = (data && data.version) || '';
self.agent.captureAgentId = (data && data.captureAgentId) || '';
self.renderAgentTag();
});
this.socket.on('fprint-device-status', function (data) {
self.agent.available = !!(data && data.available);
self.agent.device = (data && data.device) || '';
self.renderAgentTag();
});
this.socket.on('fprint-enroll-status', function (data) {
if (!self.capturing) return;
self.fingers[self.capturing].stage = (data && data.stage) || 0;
});
this.socket.on('fprint-enroll-done', function (data) {
var finger = self.capturing;
if (!finger) return;
var wasCancelling = self.cancelling;
self.capturing = null;
self.cancelling = false;
var f = self.fingers[finger];
if (data && data.ok) {
f.status = 'done';
f.stage = MAX_STAGE;
f.id = data.id || '';
f.fingerprint = data.fingerprint || '';
f.image = data.image || '';
self.prevCapture = null;
return;
}
// Failure or cancellation. A recapture attempt that did not complete
// restores the previous good capture instead of dropping it; a
// cancelled first attempt returns to idle.
var restored = self.prevCapture && self.prevCapture.finger === finger;
if (restored) {
var p = self.prevCapture;
f.status = 'done';
f.stage = MAX_STAGE;
f.id = p.id;
f.fingerprint = p.fingerprint;
f.image = p.image;
self.prevCapture = null;
} else if (wasCancelling) {
f.status = 'idle';
f.stage = 0;
} else {
f.status = 'failed';
f.stage = 0;
}
self.showNotif(
wasCancelling ? 'info' : 'error',
wasCancelling ? 'Capture cancelled' : 'Capture failed',
wasCancelling
? (restored ? 'The previous capture for the ' + self.fingerLabels[finger].toLowerCase() + ' was kept.'
: 'No changes were saved for the ' + self.fingerLabels[finger].toLowerCase() + '.')
: ((data && data.message) || 'The capture did not complete.')
);
});
},
capture: function (finger) {
if (this.capturing || !this.socket || !this.domain || !this.reference) return;
if (!this.captureReady) {
var notice = this.scannerNotice;
if (notice) this.showNotif('warning', notice.title, notice.subtitle);
return;
}
// Preserve a previous good capture so a cancelled/failed recapture
// can restore it instead of destroying it.
var old = this.fingers[finger];
this.prevCapture = old.id
? { finger: finger, id: old.id, fingerprint: old.fingerprint, image: old.image }
: null;
this.fingers[finger] = newFinger();
this.fingers[finger].status = 'scanning';
this.capturing = finger;
this.cancelling = false;
this.socket.emit('fprint-enroll', {
token: this.session.token,
domain: this.domain,
finger: finger,
reference: this.reference,
});
},
cancelCapture: function () {
if (!this.capturing || !this.socket) return;
this.cancelling = true;
this.socket.emit('fprint-enroll-stop', {});
},
lookup: function () {
var self = this;
if (!this.canLookup) return;
this.busy.lookup = true;
axios.post(
'/api/' + encodeURIComponent(this.domain) + '/staff/' + encodeURIComponent(this.reference)
).then(function (r) {
if (!r.data.ok) {
self.showNotif('error', 'Not found', 'Operation failed. ' + (r.data.message || '') + ' (reference ' + self.reference + ')');
return;
}
self.staff = r.data.data;
}).catch(function (err) {
var msg = (err.response && err.response.data && err.response.data.message) || 'Could not reach the identity service.';
self.showNotif('error', 'Lookup failed', msg);
}).finally(function () {
self.busy.lookup = false;
});
},
save: function () {
var self = this;
if (!this.canSave) return;
this.busy.save = true;
var fingerprints = Object.keys(this.fingers).map(function (finger) {
return { finger: finger, fingerprint: self.fingers[finger].fingerprint };
});
axios.post(
'/api/' + encodeURIComponent(this.domain) + '/staff/' + encodeURIComponent(this.reference) + '/fingerprints',
{ fingerprints: fingerprints }
).then(function (r) {
if (r.data.ok) {
self.showNotif('success', 'Enrollment saved',
'Fingerprints saved for ' + self.staff.name + ' (reference ' + self.staff.reference + ').');
self.newEnrollment();
} else {
self.showNotif('error', 'Not saved', 'Operation failed. ' + (r.data.message || ''));
}
}).catch(function (err) {
var msg = (err.response && err.response.data && err.response.data.message) || 'Could not reach the identity service.';
self.showNotif('error', 'Save failed', msg);
}).finally(function () {
self.busy.save = false;
});
},
newEnrollment: function () {
this.staff = null;
this.reference = '';
this.fingers = { 'right-thumb': newFinger(), 'right-index-finger': newFinger() };
this.capturing = null;
this.cancelling = false;
this.prevCapture = null;
},
fingerTag: function (finger) {
switch (this.fingers[finger].status) {
case 'scanning': return { type: 'blue', text: 'Scanning' };
case 'done': return { type: 'green', text: 'Captured' };
case 'failed': return { type: 'red', text: 'Failed' };
default: return { type: 'gray', text: 'Pending' };
}
},
},
});
})();