Cap'n Web + Auth0
Secure WebSocket RPC with Authentication
🔐 Login
🚪 Logout
🔌 RPC Operations
📋 Get Profile
✏️ Update Profile
🌐 Get Public Data
6.2: Create the JavaScript client application (client/app.js)
Use capnweb's newWebSocketRpcSession and Auth0 SDK with proper ES module imports:
import { createAuth0Client } from '@auth0/auth0-spa-js';
import { newWebSocketRpcSession } from 'capnweb';
// Auth0 設定
let auth0Client = null;
let profileApi = null;
let AUTH0_CONFIG = null;
// サーバーから Auth0 設定を読み込む
async function loadConfig() {
const response = await fetch('/api/config');
const config = await response.json();
AUTH0_CONFIG = {
domain: config.auth0.domain,
clientId: config.auth0.clientId,
authorizationParams: {
redirect_uri: window.location.origin,
audience: config.auth0.audience,
scope: 'openid profile email'
},
useRefreshTokens: true,
cacheLocation: 'localstorage'
};
return AUTH0_CONFIG;
}
// アプリケーションを初期化する
async function initializeApp() {
try {
showStatus('Loading configuration...', 'info');
const config = await loadConfig();
showStatus('Initializing Auth0 client...', 'info');
auth0Client = await createAuth0Client(config);
// リダイレクトコールバックを処理する
const query = window.location.search;
if (query.includes('code=') && query.includes('state=')) {
showStatus('Processing login...', 'info');
await auth0Client.handleRedirectCallback();
window.history.replaceState({}, document.title, window.location.pathname);
}
// 認証ステータスを確認する
const isAuthenticated = await auth0Client.isAuthenticated();
if (isAuthenticated) {
// 認証済みの場合のみ WebSocket に接続する
showStatus('Connecting to Cap\'n Web RPC...', 'info');
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
profileApi = newWebSocketRpcSession(`${protocol}//${window.location.host}/api`);
await showProfileSection();
} else {
showAuthSection();
}
setupEventListeners();
} catch (error) {
console.error('Initialization error:', error);
showStatus(`Failed to initialize: ${error.message}`, 'error');
}
}
// 認証関数
async function login() {
try {
showStatus('Redirecting to Auth0...', 'info');
await auth0Client.loginWithRedirect();
} catch (error) {
showStatus(`Login failed: ${error.message}`, 'error');
}
}
async function logout() {
try {
if (profileApi) {
profileApi[Symbol.dispose]();
}
await auth0Client.logout({
logoutParams: { returnTo: window.location.origin }
});
} catch (error) {
showStatus(`Logout failed: ${error.message}`, 'error');
}
}
async function getAccessToken() {
try {
return await auth0Client.getTokenSilently({
authorizationParams: {
audience: AUTH0_CONFIG.authorizationParams.audience
}
});
} catch (error) {
if (error.error === 'consent_required' || error.error === 'interaction_required') {
await auth0Client.loginWithRedirect({
authorizationParams: {
audience: AUTH0_CONFIG.authorizationParams.audience,
scope: 'openid profile email',
prompt: 'consent'
}
});
}
throw error;
}
}
// Cap'n Web RPC を使用したプロファイル管理
async function fetchProfile() {
try {
showStatus('Fetching profile...', 'info');
const token = await getAccessToken();
const user = await auth0Client.getUser();
// profileApi スタブで RPC メソッドを直接呼び出す
const profile = await profileApi.getProfile(token);
document.getElementById('userEmail').textContent = user.email || profile.email || 'No email available';
document.getElementById('bioTextarea').value = profile.bio || '';
showStatus('Profile loaded successfully!', 'success');
} catch (error) {
showStatus(`Failed to fetch profile: ${error.message}`, 'error');
}
}
async function saveProfile() {
try {
showStatus('Saving profile...', 'info');
const token = await getAccessToken();
const bio = document.getElementById('bioTextarea').value;
// profileApi スタブで RPC メソッドを直接呼び出す
const result = await profileApi.updateProfile(token, bio);
showStatus(result.message || 'Profile saved successfully!', 'success');
} catch (error) {
showStatus(`Failed to save profile: ${error.message}`, 'error');
}
}
// UI ヘルパー関数
function showAuthSection() {
document.getElementById('authSection').style.display = 'block';
document.getElementById('profileSection').style.display = 'none';
showStatus('Ready to login', 'info');
}
async function showProfileSection() {
document.getElementById('authSection').style.display = 'none';
document.getElementById('profileSection').style.display = 'block';
await fetchProfile();
}
function showStatus(message, type) {
const statusEl = document.getElementById('status');
statusEl.textContent = message;
statusEl.className = `status ${type}`;
}
// イベントリスナー
function setupEventListeners() {
document.getElementById('loginBtn').addEventListener('click', login);
document.getElementById('logoutBtn').addEventListener('click', logout);
document.getElementById('fetchBtn').addEventListener('click', fetchProfile);
document.getElementById('saveBtn').addEventListener('click', saveProfile);
}
// DOM 読み込み完了時にアプリを初期化する
document.addEventListener('DOMContentLoaded', initializeApp);
if (this.isAuthenticated) {
this.user = await this.auth0Client.getUser();
this.accessToken = await this.auth0Client.getTokenSilently();
this.showLoggedInState();
this.connectWebSocket();
} else {
this.showLoggedOutState();
}
this.setupEventListeners();
this.showStatus('✅ Application initialized successfully', 'success');
} catch (error) {
console.error('❌ Initialization failed:', error);
this.showStatus(`❌ Initialization failed: ${error.message}`, 'error');
}
}
setupEventListeners() {
document.getElementById('login-btn').addEventListener('click', () => this.login());
document.getElementById('logout-btn').addEventListener('click', () => this.logout());
document.getElementById('get-profile-btn').addEventListener('click', () => this.getProfile());
document.getElementById('update-profile-btn').addEventListener('click', () => this.updateProfile());
document.getElementById('get-public-btn').addEventListener('click', () => this.getPublicData());
}
async login() {
try {
this.showStatus('🔄 Redirecting to Auth0...', 'info');
await this.auth0Client.loginWithRedirect();
} catch (error) {
console.error('❌ Login failed:', error);
this.showStatus(`❌ Login failed: ${error.message}`, 'error');
}
}
async logout() {
try {
this.closeWebSocket();
await this.auth0Client.logout({
logoutParams: {
returnTo: window.location.origin
}
});
} catch (error) {
console.error('❌ Logout failed:', error);
this.showStatus(`❌ Logout failed: ${error.message}`, 'error');
}
}
connectWebSocket() {
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
return; // 接続済み
}
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${protocol}//${window.location.host}`;
this.ws = new WebSocket(wsUrl);
this.ws.onopen = () => {
console.log('🔌 WebSocket 接続済み');
this.showStatus('🔌 Connected to Cap\'n Web server', 'success');
};
this.ws.onmessage = (event) => {
try {
const response = JSON.parse(event.data);
const pendingRequest = this.pendingRequests.get(response.id);
if (pendingRequest) {
this.pendingRequests.delete(response.id);
if (response.error) {
pendingRequest.reject(new Error(response.error));
} else {
pendingRequest.resolve(response.result);
}
}
} catch (error) {
console.error('❌ Failed to parse WebSocket message:', error);
}
};
this.ws.onerror = (error) => {
console.error('❌ WebSocket error:', error);
this.showStatus('❌ WebSocket connection error', 'error');
};
this.ws.onclose = () => {
console.log('🔌 WebSocket 切断');
this.showStatus('🔌 Disconnected from server', 'info');
// 認証済みの場合、3 秒後に再接続を試みる
if (this.isAuthenticated) {
setTimeout(() => this.connectWebSocket(), 3000);
}
};
}
closeWebSocket() {
if (this.ws) {
this.ws.close();
this.ws = null;
}
}
async callRPC(method, params = null, requiresAuth = true) {
return new Promise((resolve, reject) => {
if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
return reject(new Error('WebSocket not connected'));
}
const id = ++this.requestId;
const request = {
id,
method,
params
};
if (requiresAuth && this.accessToken) {
request.token = this.accessToken;
}
this.pendingRequests.set(id, { resolve, reject });
// リクエストのタイムアウトを設定
setTimeout(() => {
if (this.pendingRequests.has(id)) {
this.pendingRequests.delete(id);
reject(new Error('RPC request timeout'));
}
}, 10000);
this.ws.send(JSON.stringify(request));
});
}
async getProfile() {
try {
this.showStatus('🔄 Fetching profile...', 'info');
const profile = await this.callRPC('getProfile');
this.showRPCResult('Profile Data', profile);
} catch (error) {
console.error('❌ Get profile failed:', error);
this.showStatus(`❌ Failed to get profile: ${error.message}`, 'error');
}
}
async updateProfile() {
try {
this.showStatus('🔄 Updating profile...', 'info');
const updates = {
preferences: {
theme: 'dark',
notifications: true,
lastAction: 'profile-update'
}
};
const updatedProfile = await this.callRPC('updateProfile', updates);
this.showRPCResult('Updated Profile', updatedProfile);
} catch (error) {
console.error('❌ Update profile failed:', error);
this.showStatus(`❌ Failed to update profile: ${error.message}`, 'error');
}
}
async getPublicData() {
try {
this.showStatus('🔄 Fetching public data...', 'info');
const data = await this.callRPC('getPublicData', null, false);
this.showRPCResult('Public Data', data);
} catch (error) {
console.error('❌ Get public data failed:', error);
this.showStatus(`❌ Failed to get public data: ${error.message}`, 'error');
}
}
showLoggedInState() {
document.getElementById('login-btn').classList.add('hidden');
document.getElementById('logout-btn').classList.remove('hidden');
document.getElementById('profile-section').classList.remove('hidden');
document.getElementById('rpc-section').classList.remove('hidden');
if (this.user) {
const placeholderImage = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2363b3ed'/%3E%3Cpath d='M50 45c7.5 0 13.64-6.14 13.64-13.64S57.5 17.72 50 17.72s-13.64 6.14-13.64 13.64S42.5 45 50 45zm0 6.82c-9.09 0-27.28 4.56-27.28 13.64v3.41c0 1.88 1.53 3.41 3.41 3.41h47.74c1.88 0 3.41-1.53 3.41-3.41v-3.41c0-9.08-18.19-13.64-27.28-13.64z' fill='%23fff'/%3E%3C/svg%3E`;
const profileHtml = `
