What is Single Sign-On (SSO)?

Frontend Single Sign-On (SSO) is a user authentication and authorization method enabling users to access multiple applications or websites using a single set of login credentials, eliminating repeated logins and registrations. This improves user experience, lowers maintenance costs, and strengthens security.

Implementing Single Sign-On Solutions

Several key approaches exist for frontend SSO implementation:

Cookie-Based SSO

This widely used method leverages the browser's cookie mechanism. Upon initial login to a central authentication page (e.g., Page A), an encrypted cookie containing user data and an expiration time is created. The cookie's domain is set to the top-level domain (like example.com), enabling sharing across applications within that domain (a.example.com, b.example.com, etc.). Subsequent access to other applications checks for this cookie; if present, the user is automatically logged in; otherwise, redirection to the authentication page occurs. While simple, this approach is limited to same-domain applications, faces cross-domain challenges, and has limitations on cookie size and quantity.

Example: Setting and retrieving a cookie.

Setting a cookie (Page A):

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

Retrieving and using a cookie (Page B):

// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);

Token-Based SSO

This stateless method involves generating an encrypted token (containing user information and expiration) upon successful login at the authentication center. This token is stored client-side (localStorage or sessionStorage). Subsequent application access verifies the token; a valid token grants direct access, while an invalid token redirects to the authentication center. Token-based SSO supports cross-domain functionality and avoids cookie limitations but requires additional storage and network overhead, and poses security risks if tokens are compromised.

Example: Storing and verifying a token.

Storing a token (Page A):

// Generate the token value
const token = generateToken(userinfo);

// Store the token
localStorage.setItem('sso_token', token);

Retrieving and using a token (other pages):

// Retrieve the token
const token = localStorage.getItem('sso_token');

// Validate the token
const userinfo = verifyToken(token);

// Log in directly
login(userinfo);

OAuth 2.0-Based SSO

This method utilizes OAuth 2.0's Authorization Code flow. Initial login triggers a request to the authentication center, which returns an authorization code and redirects to the application's callback URL. The application exchanges this code for access and refresh tokens (containing user data and expiration times), stored client-side. Subsequent application access checks for a valid access token, automatically logging in if found, otherwise redirecting to the authentication center. While adhering to OAuth 2.0 standards and supporting various client types (web, mobile, desktop), it's more complex, requiring multiple requests and redirects.

Example: Authorization code flow.

Sending an authorization request (Page A):

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

Handling the callback (Page A):

// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);

Leapcell: Your Premier Node.js Hosting Solution

Leapcell is a cutting-edge serverless platform for web hosting, asynchronous tasks, and Redis, offering:

• Multi-language support: Node.js, Python, Go, and Rust.
• Free unlimited projects: Pay only for usage.
• Cost-effective: Pay-as-you-go with no idle charges.
• Streamlined developer experience: Intuitive UI, automated CI/CD, real-time metrics.
• Scalable and high-performance: Auto-scaling, zero operational overhead.

Explore the documentation and give it a try!

Follow us on X: @LeapcellHQ

Read more on our blog

The above is the detailed content of Single Sign-On (SSO) Made Easy. For more information, please follow other related articles on the PHP Chinese website!