Cap'n Web + Auth0
認証を使用したセキュアなWebSocket RPC
🔌 RPC操作
6.2: JavaScriptクライアントアプリケーションを作成する (client/app.js)
capnwebのnewWebSocketRpcSessionとAuth0 SDKを適切なESモジュールインポートで使用します:
import { createAuth0Client } from '@auth0/auth0-spa-js';
import { newWebSocketRpcSession } from 'capnweb';
// Auth0 Configuration
let auth0Client = null;
let profileApi = null;
let AUTH0_CONFIG = null;
// Load Auth0 config from server
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;
}
// Initialize the application
async function initializeApp() {
try {
showStatus('設定を読み込んでいます...', 'info');
const config = await loadConfig();
showStatus('Auth0クライアントを初期化しています...', 'info');
auth0Client = await createAuth0Client(config);
// Handle redirect callback
const query = window.location.search;
if (query.includes('code=') && query.includes('state=')) {
showStatus('ログインを処理しています...', 'info');
await auth0Client.handleRedirectCallback();
window.history.replaceState({}, document.title, window.location.pathname);
}
// Check authentication status
const isAuthenticated = await auth0Client.isAuthenticated();
if (isAuthenticated) {
// Only connect to WebSocket if authenticated
showStatus('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('初期化エラー:', error);
showStatus(`初期化に失敗しました: ${error.message}`, 'error');
}
}
// Authentication functions
async function login() {
try {
showStatus('Auth0にリダイレクトしています...', 'info');
await auth0Client.loginWithRedirect();
} catch (error) {
showStatus(`ログインに失敗しました: ${error.message}`, 'error');
}
}
async function logout() {
try {
if (profileApi) {
profileApi[Symbol.dispose]();
}
await auth0Client.logout({
logoutParams: { returnTo: window.location.origin }
});
} catch (error) {
showStatus(`ログアウトに失敗しました: ${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;
}
}
// Profile management using Cap'n Web RPC
async function fetchProfile() {
try {
showStatus('プロファイルを取得しています...', 'info');
const token = await getAccessToken();
const user = await auth0Client.getUser();
// Call RPC method directly on the profileApi stub
const profile = await profileApi.getProfile(token);
document.getElementById('userEmail').textContent = user.email || profile.email || 'メールアドレスがありません';
document.getElementById('bioTextarea').value = profile.bio || '';
showStatus('プロファイルを正常に読み込みました!', 'success');
} catch (error) {
showStatus(`プロファイルの取得に失敗しました: ${error.message}`, 'error');
}
}
async function saveProfile() {
try {
showStatus('プロファイルを保存しています...', 'info');
const token = await getAccessToken();
const bio = document.getElementById('bioTextarea').value;
// Call RPC method directly on the profileApi stub
const result = await profileApi.updateProfile(token, bio);
showStatus(result.message || 'プロファイルを正常に保存しました!', 'success');
} catch (error) {
showStatus(`プロファイルの保存に失敗しました: ${error.message}`, 'error');
}
}
// UI helper functions
function showAuthSection() {
document.getElementById('authSection').style.display = 'block';
document.getElementById('profileSection').style.display = 'none';
showStatus('ログイン準備完了', '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}`;
}
// Event listeners
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);
}
// Initialize app when DOM is loaded
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('✅ アプリケーションを正常に初期化しました', 'success');
} catch (error) {
console.error('❌ 初期化に失敗しました:', error);
this.showStatus(`❌ 初期化に失敗しました: ${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('🔄 Auth0にリダイレクトしています...', 'info');
await this.auth0Client.loginWithRedirect();
} catch (error) {
console.error('❌ ログインに失敗しました:', error);
this.showStatus(`❌ ログインに失敗しました: ${error.message}`, 'error');
}
}
async logout() {
try {
this.closeWebSocket();
await this.auth0Client.logout({
logoutParams: {
returnTo: window.location.origin
}
});
} catch (error) {
console.error('❌ ログアウトに失敗しました:', error);
this.showStatus(`❌ ログアウトに失敗しました: ${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('🔌 Cap\'n Webサーバーに接続しました', '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('❌ WebSocketメッセージの解析に失敗しました:', error);
}
};
this.ws.onerror = (error) => {
console.error('❌ WebSocketエラー:', error);
this.showStatus('❌ WebSocket接続エラー', 'error');
};
this.ws.onclose = () => {
console.log('🔌 WebSocketから切断しました');
this.showStatus('🔌 サーバーから切断しました', '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が接続されていません'));
}
const id = ++this.requestId;
const request = {
id,
method,
params
};
if (requiresAuth && this.accessToken) {
request.token = this.accessToken;
}
this.pendingRequests.set(id, { resolve, reject });
// Set timeout for request
setTimeout(() => {
if (this.pendingRequests.has(id)) {
this.pendingRequests.delete(id);
reject(new Error('RPCリクエストがタイムアウトしました'));
}
}, 10000);
this.ws.send(JSON.stringify(request));
});
}
async getProfile() {
try {
this.showStatus('🔄 プロファイルを取得中...', 'info');
const profile = await this.callRPC('getProfile');
this.showRPCResult('プロファイルデータ', profile);
} catch (error) {
console.error('❌ プロファイルの取得に失敗しました:', error);
this.showStatus(`❌ プロファイルの取得に失敗しました: ${error.message}`, 'error');
}
}
async updateProfile() {
try {
this.showStatus('🔄 プロファイルを更新中...', 'info');
const updates = {
preferences: {
theme: 'dark',
notifications: true,
lastAction: 'profile-update'
}
};
const updatedProfile = await this.callRPC('updateProfile', updates);
this.showRPCResult('更新されたプロファイル', updatedProfile);
} catch (error) {
console.error('❌ プロファイルの更新に失敗しました:', error);
this.showStatus(`❌ プロファイルの更新に失敗しました: ${error.message}`, 'error');
}
}
async getPublicData() {
try {
this.showStatus('🔄 公開データを取得中...', 'info');
const data = await this.callRPC('getPublicData', null, false);
this.showRPCResult('公開データ', data);
} catch (error) {
console.error('❌ 公開データの取得に失敗しました:', error);
this.showStatus(`❌ 公開データの取得に失敗しました: ${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 = `