Information Security 39 min read

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.

Top Architect
Top Architect
Top Architect
Comprehensive Guide to Front‑End Authentication and Authorization Methods

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: Bearer

Pros: 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_adQssw5c

Advantages: 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.

securityAuthenticationJWTtokenAuthorizationSSOOAuth
Top Architect
Written by

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.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.