chatmcp/web/oauth_callback.html

98 lines
3.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>OAuth Callback</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.container {
text-align: center;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<h2>Processing OAuth Callback</h2>
<div class="spinner"></div>
<p>Please wait while we complete the authentication...</p>
</div>
<script>
// Extract parameters from URL
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');
const state = urlParams.get('state');
const error = urlParams.get('error');
const errorDescription = urlParams.get('error_description');
// Prepare result data
const result = {
code: code,
state: state,
error: error,
error_description: errorDescription
};
// Send result to parent window (for popup flow)
if (window.opener) {
try {
window.opener.postMessage(result, window.location.origin);
window.close();
} catch (e) {
console.error('Error posting message to parent:', e);
document.querySelector('.container').innerHTML = `
<h2>Authentication ${error ? 'Failed' : 'Successful'}</h2>
<p>${error ? 'Error: ' + error + (errorDescription ? ' - ' + errorDescription : '') : 'You can close this window.'}</p>
`;
}
} else {
// Redirect flow - store result and redirect back to main app
if (error) {
document.querySelector('.container').innerHTML = `
<h2>Authentication Failed</h2>
<p>Error: ${error}</p>
${errorDescription ? `<p>${errorDescription}</p>` : ''}
<p><a href="/">Return to App</a></p>
`;
} else if (code) {
// Store the authorization code in sessionStorage for the main app to pick up
sessionStorage.setItem('oauth_callback_result', JSON.stringify(result));
// Redirect back to main app
window.location.href = '/';
} else {
document.querySelector('.container').innerHTML = `
<h2>Invalid Callback</h2>
<p>No authorization code received.</p>
<p><a href="/">Return to App</a></p>
`;
}
}
</script>
</body>
</html>