feat: Implement TOTP-based Two-Factor Authentication

- Add django-otp and qrcode dependencies
- Create comprehensive 2FA views and templates in German
- Add 2FA setup, verification, and management interfaces
- Implement backup token system with 10 recovery codes
- Add TwoFactorMiddleware for session enforcement
- Integrate 2FA controls into user navigation menu
- Support QR code generation for authenticator apps
- Add forms for secure 2FA operations with validation
- Configure OTP settings and admin site integration

Features:
- Optional 2FA (users can enable/disable)
- TOTP compatible with Google Authenticator, Authy, etc.
- Backup codes for emergency access
- German language interface
- Session-based 2FA enforcement
- Password confirmation for sensitive operations
- Production-ready with HTTPS support
This commit is contained in:
2025-09-30 00:10:02 +02:00
parent 92b689f5e7
commit ed6a02232e
29 changed files with 41444 additions and 1 deletions

View File

@@ -0,0 +1,89 @@
{% extends "base.html" %}
{% load static %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<div class="card shadow">
<div class="card-header text-center">
<h4 class="mb-0">
<i class="fas fa-shield-alt text-primary"></i>
Zwei-Faktor-Authentifizierung
</h4>
</div>
<div class="card-body">
<p class="text-center text-muted mb-4">
Geben Sie den 6-stelligen Code aus Ihrer Authenticator-App ein
oder verwenden Sie einen Backup-Code.
</p>
<form method="post">
{% csrf_token %}
{% if next %}
<input type="hidden" name="next" value="{{ next }}">
{% endif %}
<div class="mb-4">
<label for="otp_token" class="form-label">Authentifizierungscode</label>
<input type="text"
class="form-control form-control-lg text-center"
id="otp_token"
name="otp_token"
placeholder="000000"
maxlength="8"
required
autocomplete="off"
autofocus>
<div class="form-text text-center">
6-stelliger Code aus der App oder 8-stelliger Backup-Code
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">
<i class="fas fa-sign-in-alt"></i>
Bestätigen
</button>
</div>
</form>
<div class="text-center mt-4">
<details>
<summary class="text-muted small">Probleme beim Anmelden?</summary>
<div class="mt-2 small text-muted">
<p>Falls Sie keinen Zugriff auf Ihre Authenticator-App haben:</p>
<ul class="text-start">
<li>Verwenden Sie einen der 8-stelligen Backup-Codes</li>
<li>Kontaktieren Sie den Administrator</li>
</ul>
</div>
</details>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const tokenInput = document.getElementById('otp_token');
if (tokenInput) {
// Auto-submit when 6 digits entered (TOTP) or 8 characters (backup code)
tokenInput.addEventListener('input', function() {
const value = this.value.trim();
if ((value.length === 6 && /^\d{6}$/.test(value)) ||
(value.length === 8 && /^[a-f0-9]{8}$/i.test(value))) {
// Small delay to allow user to see complete input
setTimeout(() => {
this.closest('form').submit();
}, 300);
}
});
}
});
</script>
{% endblock %}