zydronium/getnamingo-registry
1
0
Fork 0
mirror of https://github.com/getnamingo/registry.git synced 2025-08-06 09:35:03 +02:00
Code Issues Projects Releases Packages Wiki Activity

More work on 2FA and WebAuthn

Browse source
This commit is contained in:
Pinga 2023-11-20 18:37:39 +02:00
parent 6466545c90
commit 2b6bdc71e9
3 changed files with 125 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

105
cp/resources/views/admin/profile/profile.twig
View file

@ -101,12 +101,23 @@
<p>Set up 2FA for additional security. Scan the QR code with your authentication app and enter the provided code below to verify.</p>
<!-- QR Code Placeholder -->
<div class="mb-3">
<img src="path/to/qr-code.png" alt="2FA QR Code" class="img-fluid">
<img src="{{ qrcodeDataUri }}" alt="2FA QR Code" class="img-fluid">
</div>
<!-- Secret for Manual Entry -->
<div class="mb-3">
<p class="font-weight-bold">Manual Entry Secret</p>
<code>{{ secret|split(4)|join(' ') }}</code>
<small class="form-text text-muted">
If you're unable to scan the QR code, enter this secret manually into your authentication app. The secret is case-sensitive and should be entered exactly as shown.
</small>
</div>
<!-- Verification Code Input -->
<div class="mb-3">
<label for="verificationCode" class="form-label">Verification Code</label>
<input type="text" class="form-control" id="verificationCode" placeholder="Enter code">
<small class="form-text text-muted">
Enter the code generated by your authentication app. This code verifies that your 2FA setup is working correctly. Once entered, click 'Save 2FA Settings' to activate two-factor authentication for your account.
</small>
</div>
<!-- Save Button -->
<button type="button" class="btn btn-primary">Save 2FA Settings</button>
@ -159,50 +170,58 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
const connectButton = document.getElementById('connectWebAuthnButton');
connectButton.addEventListener('click', function() {
// Step 1: Get the registration challenge from the server
fetch('/webauthn/register/challenge')
.then(response => response.json())
.then(data => {
// Step 2: Call WebAuthn API to create credentials
return navigator.credentials.create({
publicKey: data
});
})
.then(credentials => {
// Step 3: Send the credentials back to the server for verification
const publicKeyCredential = {
id: credentials.id,
rawId: btoa(String.fromCharCode.apply(null, new Uint8Array(credentials.rawId))),
type: credentials.type,
response: {
attestationObject: btoa(String.fromCharCode.apply(null, new Uint8Array(credentials.response.attestationObject))),
clientDataJSON: btoa(String.fromCharCode.apply(null, new Uint8Array(credentials.response.clientDataJSON)))
}
};
return fetch('/webauthn/register/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(publicKeyCredential)
});
})
.then(response => {
if(response.ok) {
// Handle successful registration, e.g., update the UI
alert('Registration successful!');
window.location.reload();
} else {
// Handle registration error
alert('Registration failed: ' + (data.error || 'Unknown error'));
}
})
.catch(error => {
console.error('Error during WebAuthn registration:', error);
connectButton.addEventListener('click', async function() {
try {
// Step 1: Get the registration challenge from the server
const response = await fetch('/webauthn/register/challenge');
const data = await response.json();
// Decode the challenge and user ID from Base64 to Uint8Array
const challenge = Uint8Array.from(atob(data.publicKey.challenge), c => c.charCodeAt(0));
const userId = Uint8Array.from(atob(data.publicKey.user.id), c => c.charCodeAt(0));
// Modify the data object to use the decoded challenge and user ID
data.publicKey.challenge = challenge;
data.publicKey.user.id = userId;
// Step 2: Call WebAuthn API to create credentials
const credentials = await navigator.credentials.create(data);
// Prepare credentials response
const publicKeyCredential = {
id: credentials.id,
rawId: btoa(String.fromCharCode.apply(null, new Uint8Array(credentials.rawId))),
type: credentials.type,
response: {
attestationObject: btoa(String.fromCharCode.apply(null, new Uint8Array(credentials.response.attestationObject))),
clientDataJSON: btoa(String.fromCharCode.apply(null, new Uint8Array(credentials.response.clientDataJSON)))
},
// Include CSRF tokens in the payload
csrf_name: '{{ csrf_name }}',
csrf_value: '{{ csrf_value }}'
};
// Step 3: Send the credentials back to the server for verification
const verificationResponse = await fetch('/webauthn/register/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(publicKeyCredential)
});
if(verificationResponse.ok) {
alert('Registration successful!');
window.location.reload();
} else {
const errorData = await verificationResponse.json();
alert('Registration failed: ' + (errorData.error || 'Unknown error'));
}
} catch (error) {
console.error('Error during WebAuthn registration:', error);
alert('Error during registration: ' + error.message);
}
});
});
</script>