diff --git a/files/dfido2-lib.js b/files/dfido2-lib.js index e1cb5e2..f4a68be 100644 --- a/files/dfido2-lib.js +++ b/files/dfido2-lib.js @@ -1,3 +1,12 @@ +/** + * + * @file dfido2-lib.js + * @description FIDO2 library of amipro FIDO2 Server + * @version 2025-12-12 + * @author Amipro Co., Ltd. (https://www.amipro.me/) + * @license Copyright (c) Amipro Co., Ltd. All rights reserved. + */ + const DFIDO2_LIB_LOCALSTG_NAME_USER_SESSION = 'fido2_user_session' const DFIDO2_LIB_LOCALSTG_NAME_REGISTERED = 'dfido2_lib_registered' const DFIDO2_LIB_LOCALSTG_NAME_SVR_URL = 'dfido2_lib_svr_url' diff --git a/files/fido2-ui-sdk.js b/files/fido2-ui-sdk.js index 42cf6d2..06cec11 100644 --- a/files/fido2-ui-sdk.js +++ b/files/fido2-ui-sdk.js @@ -1,3 +1,12 @@ +/** + * + * @file fido2-ui-sdk.js + * @description FIDO2 UI SDK of amipro FIDO2 Server + * @version 2025-12-12 + * @author Amipro Co., Ltd. (https://www.amipro.me/) + * @license Copyright (c) Amipro Co., Ltd. All rights reserved. + */ + (function(window) { 'use strict'; @@ -34,11 +43,13 @@ showDeleteButton: true, showUserInfo: true, showSessionStatus: true, + showRecoveryButton: true, }, callbacks: {}, rpId: null, autoRefresh: true, refreshInterval: 5000, + recoverySessionId: null, }; const DEFAULT_I18N = { @@ -449,6 +460,78 @@ 'ko': '비밀번호를 입력하세요', 'ru': 'Пожалуйста, введите пароль', 'it': 'Per favore inserisci password' + }, + 'title_recovery': { + 'en-US': 'Device Recovery', + 'zh-CN': '设备恢复', + 'ja': 'デバイス回復', + 'es': 'Recuperación de dispositivo', + 'de': 'Gerätewiederherstellung', + 'fr': 'Récupération de dispositif', + 'pt': 'Recuperação de dispositivo', + 'ko': '장치 복구', + 'ru': 'Восстановление устройства', + 'it': 'Ripristino dispositivo' + }, + 'msg_recovery_success': { + 'en-US': 'Device recovered successfully', + 'zh-CN': '设备恢复成功', + 'ja': 'デバイス回復完了', + 'es': 'Dispositivo recuperado exitosamente', + 'de': 'Gerät erfolgreich wiederhergestellt', + 'fr': 'Appareil récupéré avec succès', + 'pt': 'Dispositivo recuperado com sucesso', + 'ko': '장치 복구 완료', + 'ru': 'Устройство успешно восстановлено', + 'it': 'Dispositivo ripristinato con successo' + }, + 'msg_recovery_failed': { + 'en-US': 'Recovery failed', + 'zh-CN': '恢复失败', + 'ja': '回復失敗', + 'es': 'Recuperación fallida', + 'de': 'Wiederherstellung fehlgeschlagen', + 'fr': 'Échec de la récupération', + 'pt': 'Falha na recuperação', + 'ko': '복구 실패', + 'ru': 'Ошибка восстановления', + 'it': 'Ripristino fallito' + }, + 'msg_recovery_user_found': { + 'en-US': 'Recovery session verified for user: {user}', + 'zh-CN': '已验证恢复会话，用户: {user}', + 'ja': 'ユーザー {user} の回復セッションが確認されました', + 'es': 'Sesión de recuperación verificada para el usuario: {user}', + 'de': 'Wiederherstellungssitzung für Benutzer verifiziert: {user}', + 'fr': 'Session de récupération vérifiée pour l\'utilisateur: {user}', + 'pt': 'Sessão de recuperação verificada para o usuário: {user}', + 'ko': '사용자 {user}의 복구 세션 확인됨', + 'ru': 'Сессия восстановления подтверждена для пользователя: {user}', + 'it': 'Sessione di ripristino verificata per l\'utente: {user}' + }, + 'btn_start_recovery': { + 'en-US': 'Start Recovery', + 'zh-CN': '开始恢复', + 'ja': '回復を開始', + 'es': 'Iniciar recuperación', + 'de': 'Wiederherstellung starten', + 'fr': 'Démarrer la récupération', + 'pt': 'Iniciar recuperação', + 'ko': '복구 시작', + 'ru': 'Начать восстановление', + 'it': 'Avvia ripristino' + }, + 'btn_cancel': { + 'en-US': 'Cancel', + 'zh-CN': '取消', + 'ja': 'キャンセル', + 'es': 'Cancelar', + 'de': 'Abbrechen', + 'fr': 'Annuler', + 'pt': 'Cancelar', + 'ko': '취소', + 'ru': 'Отмена', + 'it': 'Annulla' } }; @@ -1286,6 +1369,8 @@ this.devices = []; this.refreshTimer = null; this.sessionStatus = false; + this.recoveryMode = false; + this.recoveryUser = null; } DeviceManager.prototype.getSessionUserId = function() { @@ -1395,7 +1480,6 @@ DeviceManager.prototype.checkSession = async function() { try { - // Simply validate session with server, same as devices.html does const sessionOk = await validSession(this.config.rpId); this.sessionStatus = !!sessionOk; this.eventManager.emit('sessionStatusChanged', this.sessionStatus); @@ -1407,6 +1491,112 @@ } }; + DeviceManager.prototype.getRegistrationUser = async function(regSessionId) { + try { + const response = await fetch(getServerUrl() + '/reg/username', { + method: 'POST', + cache: 'no-cache', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ session_id: regSessionId }) + }); + const resp = await response.json(); + return resp; + } catch (err) { + console.log(err); + return { status: 'failed', errorMessage: err.message }; + } + }; + + DeviceManager.prototype.startRecovery = async function(recoverySessionId) { + try { + if (!recoverySessionId) { + throw new Error('Recovery session ID is required'); + } + + const result = await this.getRegistrationUser(recoverySessionId); + + if (result && result.status === 'ok' && result.username) { + this.recoveryMode = true; + this.recoveryUser = { + username: result.username, + displayName: result.displayname || result.username, + sessionId: recoverySessionId + }; + + this.config.userId = result.username; + this.eventManager.emit('recoveryStarted', this.recoveryUser); + return { + success: true, + user: this.recoveryUser + }; + } else { + throw new Error(result.errorMessage || 'Invalid recovery session'); + } + } catch (error) { + this.eventManager.emit('error', error); + throw error; + } + }; + + DeviceManager.prototype.finishRecovery = async function(displayName) { + try { + if (!this.recoveryMode || !this.recoveryUser) { + throw new Error('Not in recovery mode'); + } + + const effectiveDisplayName = displayName || this.recoveryUser.displayName || 'RecoveredDevice-' + this.recoveryUser.username; + + const result = await registerFido2(this.recoveryUser.username, effectiveDisplayName, this.config.rpId); + + if (result.status === 'ok') { + const wasRecoveryMode = this.recoveryMode; + const recoveredUser = this.recoveryUser; + + this.recoveryMode = false; + this.recoveryUser = null; + + await this.loadDevices(); + this.eventManager.emit('deviceAdded', result); + this.eventManager.emit('recoveryCompleted', { + user: recoveredUser, + device: result + }); + + return { + success: true, + user: recoveredUser, + device: result + }; + } else { + throw new Error(result.errorMessage || 'Failed to add device during recovery'); + } + } catch (error) { + this.eventManager.emit('error', error); + throw error; + } + }; + + DeviceManager.prototype.cancelRecovery = function() { + if (this.recoveryMode) { + const canceledUser = this.recoveryUser; + this.recoveryMode = false; + this.recoveryUser = null; + this.eventManager.emit('recoveryCanceled', canceledUser); + return true; + } + return false; + }; + + DeviceManager.prototype.isInRecoveryMode = function() { + return this.recoveryMode; + }; + + DeviceManager.prototype.getRecoveryUser = function() { + return this.recoveryUser; + }; + DeviceManager.prototype.parseDeviceDescription = function(device) { if (device.desc && device.desc.length > 0) { return device.desc; @@ -1510,20 +1700,24 @@ UIRenderer.prototype._getModalHTML = function(uniqueId, sessionStatusId, addBtnId, devicesListId) { const theme = this.config.theme; + const dm = window.Fido2UIManager ? window.Fido2UIManager.deviceManager : null; + const isRecoveryMode = dm ? dm.isInRecoveryMode() : false; + const modalTitle = isRecoveryMode ? this.i18n.getText('title_recovery') : this.i18n.getText('my_devices'); return `
${theme.logo ? `` : ''} -
${this.i18n.getText('my_devices')}
- ${this.config.features.showSessionStatus ? `` : ''} +
${modalTitle}
+ ${this.config.features.showSessionStatus && !isRecoveryMode ? `` : ''}
${this._getBodyHTML(uniqueId, addBtnId, devicesListId)}
+ ${isRecoveryMode ? `` : ''}
@@ -1535,41 +1729,57 @@ const features = this.config.features; const dm = window.Fido2UIManager ? window.Fido2UIManager.deviceManager : null; const userId = dm ? dm.getEffectiveUserId() : (this.config.userId || ''); + const isRecoveryMode = dm ? dm.isInRecoveryMode() : false; + const recoveryUser = dm ? dm.getRecoveryUser() : null; let html = ''; - if (features.showUserInfo && userId) { - html += `
- ${this.i18n.getText('title_welcome')}: ${userId} -
`; - } - - if (features.showAddButton) { + if (isRecoveryMode && recoveryUser) { html += ` - `; - } + } else { + if (features.showUserInfo && userId) { + html += `
+ ${this.i18n.getText('title_welcome')}: ${userId} +
`; + } - html += ` -
- - - - - - ${features.showDeleteButton ? `` : ''} - - - - - - - -
${this.i18n.getText('title_device')}${this.i18n.getText('title_time')}${this.i18n.getText('title_act')}
${this.i18n.getText('title_empty_list')}
-
- `; + if (features.showAddButton) { + html += ` + + `; + } + + html += ` +
+ + + + + + ${features.showDeleteButton ? `` : ''} + + + + + + + +
${this.i18n.getText('title_device')}${this.i18n.getText('title_time')}${this.i18n.getText('title_act')}
${this.i18n.getText('title_empty_list')}
+
+ `; + } return html; }; @@ -1591,6 +1801,28 @@ }); } + const startRecoveryBtn = container.querySelector('[id^="fido2StartRecoveryBtn_"]'); + if (startRecoveryBtn) { + startRecoveryBtn.replaceWith(startRecoveryBtn.cloneNode(true)); + const newStartRecoveryBtn = container.querySelector('[id^="fido2StartRecoveryBtn_"]'); + if (newStartRecoveryBtn) { + newStartRecoveryBtn.addEventListener('click', () => { + this.eventManager.emit('startRecovery'); + }); + } + } + + const cancelRecoveryBtn = container.querySelector('[id^="fido2CancelRecoveryBtn_"]'); + if (cancelRecoveryBtn) { + cancelRecoveryBtn.replaceWith(cancelRecoveryBtn.cloneNode(true)); + const newCancelRecoveryBtn = container.querySelector('[id^="fido2CancelRecoveryBtn_"]'); + if (newCancelRecoveryBtn) { + newCancelRecoveryBtn.addEventListener('click', () => { + this.eventManager.emit('cancelRecovery'); + }); + } + } + container.querySelectorAll('[data-fido2-action="delete"]').forEach(btn => { btn.addEventListener('click', (e) => { e.preventDefault(); @@ -1665,6 +1897,54 @@ } }; + UIRenderer.prototype.updateRecoveryUI = function() { + const container = this.modalElement || this.containerElement; + if (!container) return; + + const dm = window.Fido2UIManager ? window.Fido2UIManager.deviceManager : null; + if (!dm) return; + + const isRecoveryMode = dm.isInRecoveryMode(); + const uniqueId = this._uniqueId; + + const titleEl = container.querySelector('.modal-title'); + if (titleEl) { + titleEl.textContent = isRecoveryMode ? this.i18n.getText('title_recovery') : this.i18n.getText('my_devices'); + } + + const sessionBadge = container.querySelector('[id^="fido2SessionStatus_"]'); + if (sessionBadge) { + sessionBadge.style.display = isRecoveryMode ? 'none' : 'inline'; + } + + const modalBody = container.querySelector('.modal-body'); + if (modalBody) { + modalBody.innerHTML = this._getBodyHTML(uniqueId, 'fido2AddDeviceBtn_' + uniqueId, 'fido2DevicesList_' + uniqueId); + } + + const modalFooter = container.querySelector('.modal-footer'); + if (modalFooter) { + if (isRecoveryMode) { + let cancelBtn = modalFooter.querySelector('[id^="fido2CancelRecoveryBtn_"]'); + if (!cancelBtn) { + cancelBtn = document.createElement('button'); + cancelBtn.type = 'button'; + cancelBtn.className = 'btn btn-secondary fido2-sdk-btn'; + cancelBtn.id = 'fido2CancelRecoveryBtn_' + uniqueId; + cancelBtn.textContent = this.i18n.getText('btn_cancel'); + modalFooter.insertBefore(cancelBtn, modalFooter.firstChild); + } + } else { + const cancelBtn = modalFooter.querySelector('[id^="fido2CancelRecoveryBtn_"]'); + if (cancelBtn) { + cancelBtn.remove(); + } + } + } + + this._bindEvents(uniqueId, 'fido2AddDeviceBtn_' + uniqueId, 'fido2DevicesList_' + uniqueId); + }; + UIRenderer.prototype.close = function() { if (this.modalElement) { const bootstrapModal = window.bootstrap.Modal.getInstance(this.modalElement); @@ -1685,137 +1965,6 @@ this.containerElement = null; }; - UIRenderer.prototype.renderStandalone = function() { - if (this.config.container) { - const container = typeof this.config.container === 'string' - ? document.querySelector(this.config.container) - : this.config.container; - - if (container) { - container.innerHTML = this._getStandaloneBodyHTML(); - this.containerElement = container; - this.themeManager.applyTheme(container); - this._bindEvents(); - return container; - } - } - - document.body.innerHTML = this._getStandaloneBodyHTML(); - document.body.className = 'fido2-sdk-standalone'; - this.containerElement = document.body; - this.themeManager.applyTheme(document.body); - this._bindEvents(); - return document.body; - }; - - UIRenderer.prototype._getStandaloneBodyHTML = function() { - const theme = this.config.theme; - const dm = window.Fido2UIManager ? window.Fido2UIManager.deviceManager : null; - const userId = dm ? dm.getEffectiveUserId() : (this.config.userId || ''); - - return ` -
-
-
-
- ${theme.logo ? `` : ''} -

${this.i18n.getText('my_devices')}

-
- ${this.config.features.showSessionStatus ? '' : ''} -
-
- ${this.config.features.showUserInfo && userId ? ` - - ` : ''} - ${this.config.features.showAddButton ? ` - - ` : ''} -
- - - - - - ${this.config.features.showDeleteButton ? `` : ''} - - - - - - - -
${this.i18n.getText('title_device')}${this.i18n.getText('title_time')}${this.i18n.getText('title_act')}
${this.i18n.getText('title_empty_list')}
-
-
-
-
- `; - }; - - UIRenderer.prototype._getStandaloneHTML = function() { - const theme = this.config.theme; - const dm = window.Fido2UIManager ? window.Fido2UIManager.deviceManager : null; - const userId = dm ? dm.getEffectiveUserId() : (this.config.userId || ''); - - return ` - - - - - - ${this.i18n.getText('my_devices')} - - - - - -
-
-
-
- ${theme.logo ? `` : ''} -

${this.i18n.getText('my_devices')}

-
- ${this.config.features.showSessionStatus ? '' : ''} -
-
- ${this.config.features.showUserInfo && userId ? ` - - ` : ''} - ${this.config.features.showAddButton ? ` - - ` : ''} -
- - - - - - ${this.config.features.showDeleteButton ? `` : ''} - - - - - - - -
${this.i18n.getText('title_device')}${this.i18n.getText('title_time')}${this.i18n.getText('title_act')}
${this.i18n.getText('title_empty_list')}
-
-
-
-
- - - `; - }; function Fido2UIManager() { this.config = null; @@ -1888,11 +2037,7 @@ const mode = manager.config.mode; - if (mode === 'standalone') { - manager.uiRenderer.renderStandalone(); - } else { - manager.uiRenderer.renderModal(); - } + manager.uiRenderer.renderModal(); manager._bindInternalEvents(); manager._loadInitialData(); @@ -1944,6 +2089,43 @@ self.uiRenderer.updateSessionStatus(isValid); }); + this.eventManager.on('startRecovery', async () => { + const recoveryBtn = document.querySelector('[id^="fido2StartRecoveryBtn_"]'); + if (recoveryBtn) recoveryBtn.disabled = true; + try { + const result = await self.deviceManager.finishRecovery(); + if (result.success) { + alert(self.i18n.getText('msg_recovery_success')); + self.uiRenderer.updateDevicesList(self.deviceManager.devices); + await self.deviceManager.checkSession(); + self.uiRenderer.updateSessionStatus(self.deviceManager.sessionStatus); + } + } catch (error) { + console.error('Recovery error:', error); + alert(error.message || self.i18n.getText('msg_recovery_failed')); + } finally { + if (recoveryBtn) recoveryBtn.disabled = false; + } + }); + + this.eventManager.on('cancelRecovery', async () => { + self.deviceManager.cancelRecovery(); + self.close(); + }); + + this.eventManager.on('recoveryStarted', (user) => { + console.log('Recovery started for user:', user); + self.uiRenderer.updateRecoveryUI(); + }); + + this.eventManager.on('recoveryCompleted', (result) => { + console.log('Recovery completed:', result); + }); + + this.eventManager.on('recoveryCanceled', (user) => { + console.log('Recovery canceled for user:', user); + }); + this.eventManager.on('error', (error) => { console.error('FIDO2 SDK Error:', error); }); @@ -1951,10 +2133,21 @@ Fido2UIManager.prototype._loadInitialData = async function() { try { - await this.deviceManager.loadDevices(); - await this.deviceManager.checkSession(); + if (this.config.recoverySessionId) { + await this.deviceManager.startRecovery(this.config.recoverySessionId); + this.uiRenderer.cleanup(); + this.uiRenderer.renderModal(); + this._bindInternalEvents(); + } else { + await this.deviceManager.loadDevices(); + await this.deviceManager.checkSession(); + } } catch (error) { console.error('Initial data load error:', error); + if (this.config.recoverySessionId) { + alert(error.message || this.i18n.getText('msg_recovery_failed')); + this.close(); + } } }; @@ -1990,6 +2183,39 @@ this.initialized = false; }; + Fido2UIManager.prototype.renderDeviceManagerWithRecovery = function(config) { + const recoveryConfig = Object.assign({}, config, { + recoverySessionId: config.recoverySessionId || config.recoverySessionId + }); + return this.renderDeviceManager(recoveryConfig); + }; + + Fido2UIManager.prototype.renderFromUrlParams = function(config) { + const url = new URL(window.location.href); + const params = url.searchParams; + const regSessionId = params.get('rid'); + + if (regSessionId) { + return this.renderDeviceManagerWithRecovery(Object.assign({}, config, { + recoverySessionId: regSessionId + })); + } else { + return this.renderDeviceManager(config); + } + }; + + Fido2UIManager.prototype.startRecovery = function(recoverySessionId, displayName) { + return this.deviceManager.finishRecovery(displayName); + }; + + Fido2UIManager.prototype.isRecoveryMode = function() { + return this.deviceManager ? this.deviceManager.isInRecoveryMode() : false; + }; + + Fido2UIManager.prototype.getRecoveryUser = function() { + return this.deviceManager ? this.deviceManager.getRecoveryUser() : null; + }; + Fido2UIManager.prototype.renderLogin = function(config) { if (!window.bootstrap) { throw new Error('Bootstrap is required. Please include Bootstrap JS before fido2-ui-sdk.js'); @@ -2005,6 +2231,8 @@ window.Fido2UIManager = new Fido2UIManager(); window.Fido2UIManager.renderDeviceManager = Fido2UIManager.prototype.renderDeviceManager; window.Fido2UIManager.renderLogin = Fido2UIManager.prototype.renderLogin; + window.Fido2UIManager.renderDeviceManagerWithRecovery = Fido2UIManager.prototype.renderDeviceManagerWithRecovery; + window.Fido2UIManager.renderFromUrlParams = Fido2UIManager.prototype.renderFromUrlParams; window.Fido2UIManager.close = function() { if (window.Fido2UIManager && window.Fido2UIManager.close) { window.Fido2UIManager.close(); @@ -2025,6 +2253,24 @@ window.Fido2UIManager.destroy(); } }; + window.Fido2UIManager.isRecoveryMode = function() { + if (window.Fido2UIManager && window.Fido2UIManager.isRecoveryMode) { + return window.Fido2UIManager.isRecoveryMode(); + } + return false; + }; + window.Fido2UIManager.getRecoveryUser = function() { + if (window.Fido2UIManager && window.Fido2UIManager.getRecoveryUser) { + return window.Fido2UIManager.getRecoveryUser(); + } + return null; + }; + window.Fido2UIManager.startRecovery = function(recoverySessionId, displayName) { + if (window.Fido2UIManager && window.Fido2UIManager.startRecovery) { + return window.Fido2UIManager.startRecovery(recoverySessionId, displayName); + } + return Promise.reject(new Error('Recovery not initialized')); + }; console.log('FIDO2 UI SDK v' + FIDO2_UI_VERSION + ' loaded'); })(window);