Demonstrate how to use FIDO2 UI SDK to manage devices in a popup window
Click the button below to open the login modal:
Step1: Login first, then manage your FIDO2 devices
Please login first to access device management
JS Import Examples:
<script src="files/popper.js"></script>
<script src="files/bootstrap.js"></script>
<script src="files/dfido2-lib.js"></script>
<script src="files/fido2-ui-sdk.js"></script>
<script src="files/amipro_utils.js"></script>
Login Default:
// Login Default
Fido2UIManager.renderLogin({
container: '#login-container',
mode: 'modal',
serverUrl: SERVER_URL,
language: CURRENT_LANG
});
Login Custom:
// Login with Custom Theme
Fido2UIManager.renderLogin({
container: '#login-container',
mode: 'modal',
serverUrl: SERVER_URL,
language: 'ja',
theme: {
logo: 'files/favicon.ico',
primaryColor: '#ce59d9',
backgroundColor: '#faf5ff',
textColor: '#6b21a8',
borderRadius: '12px'
},
features: {
autoAuth: false,
enablePasswordLogin: true,
autoShowPassword: true,
maxPasswordAttempts: 3
},
callbacks: {
onFido2Success: function(username, session) {
// Handle login success
},
onFido2Error: function(error) {
// Handle error
}
}
});
Device Manager Default:
// Device Manager Default
Fido2UIManager.renderDeviceManager({
userId: currentUserId,
container: '#device-container',
mode: 'modal',
serverUrl: SERVER_URL,
language: CURRENT_LANG
});
Device Manager Custom:
// Device Manager with Custom Style
Fido2UIManager.renderDeviceManager({
userId: currentUserId,
container: '#device-container',
mode: 'modal',
serverUrl: SERVER_URL,
language: 'ja',
theme: {
logo: 'files/favicon.ico',
primaryColor: '#ce59d9',
backgroundColor: '#faf5ff',
textColor: '#6b21a8',
borderRadius: '12px'
},
features: {
showAddButton: true,
showDeleteButton: true,
showUserInfo: true,
showSessionStatus: true
},
callbacks: {
onInit: function(manager) {
// Manager initialized
},
onDeviceAdded: function(device) {
// Device added
},
onDeviceDeleted: function(deviceId) {
// Device deleted
},
onClose: function() {
// Manager closed
}
}
});