User
│
▼
Client App ── redirect ──> Authorization Server (Login & Consent)
│ │
│ <── Authorization Code ---------- │
│
▼
Client App ── POST code --------> Token Endpoint
│
▼
Access Token
│
▼
Resource Server ── GET/POST API Calls
Register client app with Authorization Server (Twitter, Google, …).
You’ll get:
client_id → public identifier for client appclient_secret → private secret (nvr expose)redirect_uri → the url for the user after Authorization server approvalClient app send request to Authorization server:
GET <https://authserver.com/oauth/authorize>
?response_type=code
&client_id=YOUR_CLIENT_ID
&redirect_uri=YOUR_REDIRECT_URI
&scope=profile email
&state=RANDOM_STRING // to prevent CSRF
&code_challenge=CODE_CHALLENGE // hash of code_verifer (the random string in client app))
&code_challenge_method=S256
User login to the Authorization Server, accept permission to allow accessing the data on client app.
Server then redirects back to client app, with AUTH_CODE (like request token, one time use) in query param:
<https://yourapp.com/callback?code=AUTH_CODE&state=RANDOM_STRING>
Client app makes a server-to-server POST request to the token endpoint:
POST <https://authserver.com/oauth/token>
Content-Type: application/x-www-form-urlencoded
grant_type=authorization_code
&code=AUTH_CODE
&redirect_uri=YOUR_REDIRECT_URI
&client_id=YOUR_CLIENT_ID
&code_verifier=CODE_VERIFIER // the original random string
Authorization server response:
{
"access_token": "eyJhbGciOi...",
"token_type": "Bearer",
"expires_in": 3600,
"refresh_token": "xyz123",
"scope": "profile email"
}
Client now calls the resource server using access token in header:
GET/api/user/profile
Authorization: Bearer eyJhbGciOi...