mirror of
https://github.com/foomo/gotsrpc.git
synced 2026-04-18 19:54:31 +00:00
5d68c02535
This example showcases gotsrpc's special Context function for centralized authentication. The Context function handles all authentication logic, keeping service methods clean and focused on business logic. Key principle: Centralized authentication via Context function - Context function validates Authorization header once - Service methods remain clean without auth boilerplate - Single point of authentication for entire service Example includes: - AuthService: Login/logout operations - HelloService: Demonstrates Context function pattern - Complete build system with Makefile - TypeScript client with proper ES6 modules - Comprehensive tests and documentation Files: example/auth/ (complete authentication example)
167 lines
5.0 KiB
HTML
167 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>gotsrpc Authentication Example</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 6px;
|
|
}
|
|
.section h2 {
|
|
margin-top: 0;
|
|
color: #555;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: 500;
|
|
}
|
|
input, textarea, button {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
button {
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s;
|
|
}
|
|
button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
button:disabled {
|
|
background-color: #6c757d;
|
|
cursor: not-allowed;
|
|
}
|
|
.logout-btn {
|
|
background-color: #dc3545;
|
|
}
|
|
.logout-btn:hover {
|
|
background-color: #c82333;
|
|
}
|
|
.result {
|
|
margin-top: 15px;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
}
|
|
.success {
|
|
background-color: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
color: #155724;
|
|
}
|
|
.error {
|
|
background-color: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
color: #721c24;
|
|
}
|
|
.info {
|
|
background-color: #d1ecf1;
|
|
border: 1px solid #bee5eb;
|
|
color: #0c5460;
|
|
}
|
|
.auth-status {
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
}
|
|
.authenticated {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.not-authenticated {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🔐 gotsrpc Authentication Example</h1>
|
|
|
|
<div id="authStatus" class="auth-status not-authenticated">
|
|
Not authenticated
|
|
</div>
|
|
|
|
<!-- Authentication Section -->
|
|
<div class="section">
|
|
<h2>Authentication</h2>
|
|
<div id="loginForm">
|
|
<div class="form-group">
|
|
<label for="username">Username:</label>
|
|
<input type="text" id="username" placeholder="alice, bob, or admin">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Password:</label>
|
|
<input type="password" id="password" placeholder="password123, secret456, or admin789">
|
|
</div>
|
|
<button id="loginBtn">Login</button>
|
|
</div>
|
|
<div id="logoutForm" class="hidden">
|
|
<button id="logoutBtn" class="logout-btn">Logout</button>
|
|
</div>
|
|
<div id="authResult" class="result hidden"></div>
|
|
</div>
|
|
|
|
<!-- Hello Service Section -->
|
|
<div class="section">
|
|
<h2>Hello Service (Test Authentication)</h2>
|
|
<p><em>Try this without logging in to see the authentication error, then log in and try again!</em></p>
|
|
<div class="form-group">
|
|
<label for="message">Your message:</label>
|
|
<textarea id="message" rows="3" placeholder="Enter a message to say hello..."></textarea>
|
|
</div>
|
|
<button id="sayHelloBtn">Say Hello</button>
|
|
<div id="helloResult" class="result hidden"></div>
|
|
</div>
|
|
|
|
<!-- User Info Section -->
|
|
<div class="section">
|
|
<h2>User Information (Requires Authentication)</h2>
|
|
<p><em>This feature requires you to be logged in.</em></p>
|
|
<button id="getUserInfoBtn" disabled>Get User Info</button>
|
|
<div id="userInfoResult" class="result hidden"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="dist/app.js"></script>
|
|
</body>
|
|
</html>
|