JavaScript/HTML Integration Guide

Complete guide for frontend integration with CAS SSO

1. Frontend CAS Client

class CasAuthClient {
    constructor(options) {
        this.serverUrl = options.serverUrl;
        this.callbackUrl = options.callbackUrl;
    }

    login(returnUrl = '/') {
        const loginUrl = `${this.serverUrl}/auth/login`;
        const callbackUrl = `${this.callbackUrl}?return_url=${encodeURIComponent(returnUrl)}`;
        window.location.href = `${loginUrl}?callback_url=${encodeURIComponent(callbackUrl)}`;
    }

    async validateToken(token) {
        try {
            const response = await fetch('/api/validate-token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                }
            });
            
            if (response.ok) {
                return await response.json();
            }
            throw new Error('Token validation failed');
        } catch (error) {
            throw error;
        }
    }
}

2. HTML Example

<!DOCTYPE html>
<html>
<head>
    <title>CAS Demo</title>
</head>
<body>
    <div id="user-info"></div>
    <button onclick="login()">Login</button>
    <button onclick="logout()">Logout</button>

    <script>
        const casAuth = new CasAuthClient({
            serverUrl: 'http://localhost:5000',
            callbackUrl: 'http://localhost:3000/cas/callback'
        });

        function login() {
            casAuth.login(window.location.pathname);
        }

        function logout() {
            localStorage.removeItem('casToken');
            location.reload();
        }
    </script>
</body>
</html>

Next Steps