Jan
7ff657ba0a
- Introduced `OAuth2 API Tester` (HTML+JS) in `/tools`. - Updated security configuration: - Added comprehensive CORS configurations for OAuth endpoints. - Enhanced CSRF handling to exclude `/oauth2/token`. - Adjusted role handling to ensure case-insensitivity. - Fixed `RIGHT-MANAGEMENT` role in `UserController`. - Replaced logo asset in frontend.
561 lines
18 KiB
HTML
561 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OAuth2 API Tester</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: #f8fafc;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.container {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
padding: 40px;
|
|
max-width: 700px;
|
|
width: 100%;
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #333;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
transition: border-color 0.3s;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
padding: 14px;
|
|
background: #5AF0B4;
|
|
color: #002F54;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
button:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.loading {
|
|
display: none;
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
color: #667eea;
|
|
}
|
|
|
|
.loading.active {
|
|
display: block;
|
|
}
|
|
|
|
.spinner {
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid #667eea;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 10px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.result {
|
|
margin-top: 30px;
|
|
display: none;
|
|
}
|
|
|
|
.result.active {
|
|
display: block;
|
|
}
|
|
|
|
.result-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.result-title {
|
|
font-weight: 600;
|
|
color: #333;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.result-box {
|
|
background: #f8f9fa;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.result-box pre {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 13px;
|
|
color: #333;
|
|
}
|
|
|
|
.error {
|
|
color: #d32f2f;
|
|
background: #ffebee;
|
|
border-color: #ef9a9a;
|
|
}
|
|
|
|
.success {
|
|
color: #388e3c;
|
|
background: #e8f5e9;
|
|
border-color: #81c784;
|
|
}
|
|
|
|
.info-section {
|
|
background-color: #c3cfdf;
|
|
color: #002F54;
|
|
border-left: 4px solid #002F54;
|
|
padding: 15px;
|
|
margin-bottom: 25px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.info-section h3 {
|
|
color: #002F54;
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.info-section p {
|
|
color: #002F54;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.status-success {
|
|
background: #e8f5e9;
|
|
color: #388e3c;
|
|
}
|
|
|
|
.status-error {
|
|
background: #ffebee;
|
|
color: #d32f2f;
|
|
}
|
|
|
|
.error-summary {
|
|
background-color: #c3cfdf;
|
|
color: #002F54;
|
|
border-left: 4px solid #002F54;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
line-height: 1.6;
|
|
display: none;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.error-summary strong {
|
|
color: #002F54;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.details-button {
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: #002F54;
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
cursor: pointer;
|
|
margin-bottom: 15px;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.details-button:hover {
|
|
opacity: 0.8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>OAuth2 API Tester</h1>
|
|
<p class="subtitle">Teste deine OAuth2 Client Credentials API-Integration</p>
|
|
|
|
<div class="info-section">
|
|
<h3>Hinweis</h3>
|
|
<p>Diese Anwendung verwendet den OAuth2 Client Credentials Flow. Stelle sicher, dass deine API diesen Flow unterstützt und CORS für diese Domain aktiviert ist.</p>
|
|
</div>
|
|
|
|
<form id="testForm">
|
|
<div class="form-group">
|
|
<label for="tokenUrl">Token URL (OAuth2 Endpoint)</label>
|
|
<input
|
|
type="url"
|
|
id="tokenUrl"
|
|
placeholder="https://deine-app.de/oauth/token"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="clientId">Client ID</label>
|
|
<input
|
|
type="text"
|
|
id="clientId"
|
|
placeholder="deine-client-id"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="clientSecret">Client Secret</label>
|
|
<input
|
|
type="text"
|
|
id="clientSecret"
|
|
placeholder="dein-client-secret"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="apiUrl">API Endpoint URL (zu testende Ressource)</label>
|
|
<input
|
|
type="url"
|
|
id="apiUrl"
|
|
placeholder="https://deine-app.de/api/resource"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<button type="submit" id="submitBtn">
|
|
API Zugriff Testen
|
|
</button>
|
|
</form>
|
|
|
|
<div class="loading" id="loading">
|
|
<div class="spinner"></div>
|
|
<p>Authentifizierung und API-Aufruf wird durchgeführt...</p>
|
|
</div>
|
|
|
|
<div class="result" id="result">
|
|
<div class="result-header">
|
|
<div>
|
|
<span class="result-title">Ergebnis</span>
|
|
<span class="status-badge" id="statusBadge"></span>
|
|
</div>
|
|
</div>
|
|
<div id="errorSummary" class="error-summary"></div>
|
|
<button id="detailsButton" class="details-button" style="display: none;"></button>
|
|
<div class="result-box" id="resultBox">
|
|
<pre id="resultContent"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let accessToken = null;
|
|
|
|
document.getElementById('testForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const tokenUrl = document.getElementById('tokenUrl').value;
|
|
const clientId = document.getElementById('clientId').value;
|
|
const clientSecret = document.getElementById('clientSecret').value;
|
|
const apiUrl = document.getElementById('apiUrl').value;
|
|
|
|
// UI Updates
|
|
document.getElementById('loading').classList.add('active');
|
|
document.getElementById('result').classList.remove('active');
|
|
document.getElementById('submitBtn').disabled = true;
|
|
|
|
try {
|
|
// Schritt 1: OAuth2 Token abrufen
|
|
const tokenResponse = await getAccessToken(tokenUrl, clientId, clientSecret);
|
|
|
|
if (!tokenResponse.success) {
|
|
displayResult({
|
|
phase: 'token',
|
|
message: 'Fehler beim Token-Abruf',
|
|
error: tokenResponse.error,
|
|
details: tokenResponse.details
|
|
}, false);
|
|
return;
|
|
}
|
|
|
|
accessToken = tokenResponse.access_token;
|
|
|
|
// Schritt 2: API Endpoint aufrufen
|
|
const apiResponse = await callApi(apiUrl, accessToken);
|
|
|
|
if (!apiResponse.success) {
|
|
displayResult({
|
|
phase: 'api',
|
|
message: 'Fehler beim API-Aufruf',
|
|
error: apiResponse.error,
|
|
response: apiResponse
|
|
}, false);
|
|
return;
|
|
}
|
|
|
|
// Erfolg: Zeige nur die API-Antwort
|
|
displayResult(apiResponse.body, true);
|
|
|
|
} catch (error) {
|
|
displayResult({
|
|
phase: 'unknown',
|
|
message: 'Unerwarteter Fehler',
|
|
error: error.message,
|
|
stack: error.stack
|
|
}, false);
|
|
} finally {
|
|
document.getElementById('loading').classList.remove('active');
|
|
document.getElementById('submitBtn').disabled = false;
|
|
}
|
|
});
|
|
|
|
async function getAccessToken(tokenUrl, clientId, clientSecret) {
|
|
try {
|
|
let headers = {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
};
|
|
|
|
// Credentials im Body (Standard-Methode)
|
|
let body = `grant_type=client_credentials&client_id=${encodeURIComponent(clientId)}&client_secret=${encodeURIComponent(clientSecret)}`;
|
|
|
|
const response = await fetch(tokenUrl, {
|
|
method: 'POST',
|
|
headers: headers,
|
|
body: body
|
|
});
|
|
|
|
let data;
|
|
try {
|
|
data = await response.json();
|
|
} catch (e) {
|
|
data = { error: 'Keine JSON-Antwort vom Server' };
|
|
}
|
|
|
|
if (!response.ok) {
|
|
return {
|
|
success: false,
|
|
error: `Token-Abruf fehlgeschlagen (${response.status}): ${JSON.stringify(data)}`,
|
|
phase: 'token',
|
|
details: {
|
|
url: tokenUrl,
|
|
responseStatus: response.status,
|
|
responseData: data
|
|
}
|
|
};
|
|
}
|
|
|
|
return {
|
|
success: true,
|
|
access_token: data.access_token,
|
|
token_type: data.token_type,
|
|
expires_in: data.expires_in
|
|
};
|
|
|
|
} catch (error) {
|
|
return {
|
|
success: false,
|
|
error: `Netzwerkfehler beim Token-Abruf: ${error.message}. Möglicherweise ein CORS-Problem.`,
|
|
phase: 'token'
|
|
};
|
|
}
|
|
}
|
|
|
|
async function callApi(apiUrl, token) {
|
|
try {
|
|
const response = await fetch(apiUrl, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Accept': 'application/json'
|
|
}
|
|
});
|
|
|
|
const contentType = response.headers.get('content-type');
|
|
let data;
|
|
|
|
if (contentType && contentType.includes('application/json')) {
|
|
data = await response.json();
|
|
} else {
|
|
data = await response.text();
|
|
}
|
|
|
|
return {
|
|
status: response.status,
|
|
statusText: response.statusText,
|
|
headers: Object.fromEntries(response.headers.entries()),
|
|
body: data,
|
|
success: response.ok,
|
|
phase: 'api'
|
|
};
|
|
|
|
} catch (error) {
|
|
return {
|
|
success: false,
|
|
error: `API-Aufruf fehlgeschlagen: ${error.message}`,
|
|
phase: 'api'
|
|
};
|
|
}
|
|
}
|
|
|
|
function displayResult(result, success) {
|
|
const resultDiv = document.getElementById('result');
|
|
const resultBox = document.getElementById('resultBox');
|
|
const resultContent = document.getElementById('resultContent');
|
|
const statusBadge = document.getElementById('statusBadge');
|
|
const errorSummary = document.getElementById('errorSummary');
|
|
const detailsButton = document.getElementById('detailsButton');
|
|
|
|
resultDiv.classList.add('active');
|
|
|
|
if (success) {
|
|
// Erfolg: Zeige nur die API-Antwort
|
|
resultBox.classList.remove('error');
|
|
resultBox.classList.add('success');
|
|
statusBadge.textContent = 'Erfolgreich';
|
|
statusBadge.className = 'status-badge status-success';
|
|
|
|
errorSummary.style.display = 'none';
|
|
detailsButton.style.display = 'none';
|
|
|
|
// Stelle sicher, dass resultBox und resultContent sichtbar sind
|
|
resultBox.style.display = 'block';
|
|
resultContent.style.display = 'block';
|
|
resultContent.textContent = JSON.stringify(result, null, 2);
|
|
|
|
} else {
|
|
// Fehler: Zeige Zusammenfassung mit Details-Button
|
|
resultBox.classList.remove('success');
|
|
resultBox.classList.add('error');
|
|
|
|
// Bestimme die Phase
|
|
let phaseText = '';
|
|
if (result.phase === 'token') {
|
|
phaseText = 'Token-Abruf';
|
|
statusBadge.textContent = 'Fehler beim Token-Abruf';
|
|
} else if (result.phase === 'api') {
|
|
phaseText = 'API-Aufruf';
|
|
statusBadge.textContent = 'Fehler beim API-Aufruf';
|
|
} else {
|
|
phaseText = 'Unbekannt';
|
|
statusBadge.textContent = 'Fehler';
|
|
}
|
|
statusBadge.className = 'status-badge status-error';
|
|
|
|
// Zeige Fehler-Zusammenfassung
|
|
errorSummary.style.display = 'block';
|
|
errorSummary.innerHTML = `
|
|
<strong>Phase:</strong> ${phaseText}<br>
|
|
<strong>Fehler:</strong> ${result.message || 'Unbekannter Fehler'}<br>
|
|
<strong>Details:</strong> ${result.error || 'Keine Details verfügbar'}
|
|
`;
|
|
|
|
// Details-Button
|
|
resultBox.style.display = 'block';
|
|
detailsButton.style.display = 'block';
|
|
detailsButton.onclick = function() {
|
|
const isHidden = resultContent.style.display === 'none';
|
|
resultContent.style.display = isHidden ? 'block' : 'none';
|
|
detailsButton.textContent = isHidden ? 'Details verbergen' : 'Vollständige Details anzeigen';
|
|
};
|
|
|
|
// Verstecke Details initial
|
|
resultContent.style.display = 'none';
|
|
resultContent.textContent = JSON.stringify(result, null, 2);
|
|
detailsButton.textContent = 'Vollständige Details anzeigen';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|