Comprehensive Guide to Front‑End Authentication and Authorization Methods
This article provides an in‑depth overview of authentication, authorization, and permission control concepts and compares ten common front‑end authentication techniques—including HTTP Basic Auth, Session‑Cookie, Token, JWT, SSO, OAuth 2.0, QR‑code login and one‑click login—detailing their workflows, advantages, drawbacks, and typical usage scenarios.
Introduction
The article begins by distinguishing the four key concepts: authentication (identifying a user), authorization (granting rights), authentication (verifying the claimed identity), and permission control (enforcing access rules).
What Is Authentication?
Authentication verifies a user’s identity using methods such as ID cards, username/password, SMS, biometrics, etc.
What Is Authorization?
Authorization delegates specific resource‑access permissions from the resource owner to an executor, similar to issuing a bank card or access key.
What Is Authentication (Again) and Permission Control?
Authentication validates the authenticity of the identity claim, while permission control defines a list of allowed operations and enforces them.
1. HTTP Basic Authentication
Clients send a username and password encoded in Base64. Example request:
GET /list/ HTTP/1.1
Host: www.example.com
Authorization: Basic aHR0cHdhdGNoOmY=Advantages: simple and universally supported. Drawbacks: insecure (plain Base64) and no logout mechanism.
2. Session‑Cookie Authentication
Server creates a session ID (sid) stored in a cookie; the client sends the cookie on subsequent requests. Typical flow includes login → set‑cookie → server validates cookie on each request.
Pros: easy to use, server‑side stateful management. Cons: relies on cookies (blocked browsers, mobile limitations) and adds server overhead.
3. Token Authentication
After login, the server issues a token (e.g., JWT) that the client stores in localStorage or a cookie and sends in the Authorization header for each request.
Authorization: BearerPros: stateless server, works across platforms, mitigates CSRF. Cons: larger payload, requires signature verification.
4. JWT (JSON Web Token)
JWT consists of three Base64URL‑encoded parts: Header, Payload, and Signature. Example token:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5cAdvantages: no server‑side session storage, payload can carry user claims. Drawbacks: cannot be revoked before expiration and default tokens are not encrypted.
5. Single Sign‑On (SSO)
SSO allows a user to log in once and access multiple trusted applications. The article describes same‑domain SSO using shared cookies and cross‑domain SSO using CAS (Central Authentication Service) with tickets (TGT, TGC, ST).
6. OAuth 2.0
OAuth enables third‑party login (e.g., QQ, WeChat). Four grant types are covered: Authorization Code, Implicit, Password Credentials, and Client Credentials, each with its request/response flow.
7. Federated and Trusted Login
Federated login uses third‑party credentials (e.g., social accounts) while trusted login relies on pre‑established trust relationships without user interaction.
8. Unique Login
Ensures a user can only be logged in on a single device at a time by invalidating previous tokens when a new login occurs.
9. QR‑Code (Scan) Login
Three‑stage process: generate QR code with UUID, mobile app scans and sends token, user confirms, server issues final token to the PC client.
10. One‑Click Login (Mobile)
Leverages carrier‑provided SDKs to obtain the device’s phone number directly, bypassing SMS verification. Flow: SDK init → request token → user authorizes → server exchanges token for phone number → login/registration.
Conclusion
The article summarizes the suitability of each method, recommending HTTP Basic Auth for internal networks, Session‑Cookie for medium‑large web sites, Token/JWT for most enterprise applications, SSO for multi‑system enterprises, OAuth 2.0 for rapid user onboarding, QR‑code login for three‑party setups, and one‑click login for native mobile apps.
Top Architect
Top Architect focuses on sharing practical architecture knowledge, covering enterprise, system, website, large‑scale distributed, and high‑availability architectures, plus architecture adjustments using internet technologies. We welcome idea‑driven, sharing‑oriented architects to exchange and learn together.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.