Comprehensive Guide to Frontend Authentication Methods and Their Differences

This article begins by defining the fundamental concepts of authentication (identifying a user), authorization (granting permissions), authentication (verifying claimed identity), and access control (enforcing permissions), establishing the sequential relationship: first authorize, then authenticate.

It then introduces ten widely used frontend authentication methods, each with detailed workflow diagrams, step‑by‑step explanations, pros, cons, and typical use cases.

1. HTTP Basic Authentication

Clients send credentials in the Authorization: Basic <base64> header. The server responds with 401 Unauthorized and a WWW-Authenticate: Basic realm="..." challenge.

2. Session‑Cookie Authentication

After login, the server creates a session ID ( sid ) and returns it via Set-Cookie . Subsequent requests include the cookie, allowing the server to retrieve the stored session.

3. Token Authentication

Upon successful login, the server issues a token stored in localStorage or a cookie. Clients include the token in the Authorization: Bearer <token> header for protected API calls.

4. JWT (JSON Web Token)

A JWT consists of Header , Payload , and Signature separated by dots. Example:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0...SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

The server validates the signature without storing session state.

5. Single Sign‑On (SSO)

SSO enables a user to log in once and access multiple trusted systems. The article covers same‑domain SSO using shared cookies and cross‑domain SSO via CAS, detailing ticket generation ( TGT , TGC , ST ) and validation steps.

6. OAuth 2.0

OAuth delegates authorization to third‑party providers. Four grant types are described: Authorization Code, Implicit, Password Credentials, and Client Credentials, each with required parameters and typical scenarios.

7. Federated and Trusted Login

Federated login uses external identity providers (e.g., QQ, WeChat) to authenticate users, while trusted login relies on pre‑established trust relationships between systems.

8. Unique Login

Ensures a single active session per account by invalidating previous tokens when a new login occurs.

9. QR‑Code (Scan) Login

Involves three parties (PC, mobile, server). The PC displays a QR code linked to a UUID; the mobile app scans it, confirms the login, and the server issues a token to the PC.

10. One‑Click Login for Native Apps

Leverages carrier‑provided SDKs to obtain the device’s phone number directly, bypassing SMS verification. The flow includes SDK initialization, user consent, token acquisition, and server‑side number retrieval.

The article concludes with a concise comparison table summarizing the strengths, weaknesses, and appropriate scenarios for each method, and provides reference links for further reading.