kyy/sso_expressjs_demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI 개선 및 스타일 적용

Browse Source
This commit is contained in:
김용연
2026-01-16 13:15:08 +09:00
parent dbad6bccf4
commit d5179daf57
3 changed files with 232 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
sso-demo/public/sso_popup.html
View File

@@ -2,46 +2,57 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSO Login</title>
<title>Baron SSO Login</title>
<link rel="stylesheet" href="/css/style.css">
<style>
body { font-family: sans-serif; text-align: center; padding: 20px; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
body {
font-family: system-ui, sans-serif;
text-align: center;
padding: 40px 20px;
background-color: #f8f9fa;
}
h2 {
font-size: 24px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<h2>Simulated SSO Provider</h2>
<p>Click the button below to simulate a successful login.</p>
<button id="confirm-login-btn">Confirm Login</button>
<h2>Baron SSO Provider</h2>
<p>아래 버튼을 클릭하면 로그인이 완료됩니다.</p>
<button id="confirm-login-btn" class="cta-button">Confirm Login</button>
<script>
document.getElementById('confirm-login-btn').addEventListener('click', () => {
// --- Create a dummy JWT for demonstration ---
// Header (no changes needed)
const header = { alg: 'HS256', typ: 'JWT' };
// --- This script now creates a dummy JWT with a dynamic issuer ---
const header = {
alg: "RS256", // Using RS256 as it's common for SSO
typ: "JWT",
kid: "simulated-key-id" // Key ID for JWKS lookup
};
// Payload with a random 'sub' to simulate different users
const payload = {
sub: `sso-user-${Math.random().toString(36).substring(2, 10)}`,
name: 'John Doe',
iat: Math.floor(Date.now() / 1000)
iss: "https://sso.baron.com", // Simulated issuer
sub: `baron-user-${Math.random().toString(36).substring(2, 10)}`,
name: "Simulated User",
iat: Math.floor(Date.now() / 1000),
exp: Math.floor(Date.now() / 1000) + (60 * 60) // Expires in 1 hour
};
// In a real JWT, the signature would be generated with a secret key.
// For the demo, we only need the header and payload.
const dummyToken = [
btoa(JSON.stringify(header)),
btoa(JSON.stringify(payload)),
'dummy-signature'
].join('.');
// --- End of dummy JWT creation ---
// Send the token back to the parent window that opened the popup
// In a real app, the targetOrigin should be the specific URL of your application
// In a real scenario, this token would be signed by the SSO provider's private key.
// We are sending an unsigned token for structure demonstration. The verification
// on the server side will fail if it tries to verify the signature,
// but the demo setup is focused on decoding and key fetching.
const dummyToken = btoa(JSON.stringify(header)) + '.' + btoa(JSON.stringify(payload)) + '.dummies_signature';
window.opener.postMessage({
type: 'LOGIN_SUCCESS',
token: dummyToken
}, '*');
// Close the popup after sending the message
window.close();
});
</script>
</body>