Update OAuth2-Backend-Approach.md

This commit is contained in:
Ste Vaidis 2025-01-08 10:41:33 +02:00
parent a516fb899b
commit d7c22f2736

View File

@ -17,18 +17,18 @@ A way for the `user` to tell `google` to give an access to `myapp` app
### Details:
1. ⭐️ Get Authorization Code
⭐️ 1. Get Authorization Code
1. Frontend **Navigate** to Google URL with a callback url
2. Google **Redirect** to Backend's callback url with the authorization code
2. ⭐️ Exchange Code with Token
⭐️ 2. Exchange Code with Token
1. Backend **POST** the `code` to Google
2. Google **Response** to Backend with an `access_token` and a `refresh token`
3. Backend **Redirect** to Frontend with the `access_token` in a `cookie`
3. ⭐️ Use Token
⭐️ 3. Use Token
1. Frontend **GET** profile data from Backend using the `cookie`
2. Backend **GET** profile data from Google using the `access_token`
@ -44,12 +44,12 @@ A way for the `user` to tell `google` to give an access to `myapp` app
# 1. ⭐️ Get Code
# ⭐️ 1. Get Code
1. Frontend **Navigate** to Google `https://accounts.google.com/o/oauth2` with a callback url
2. Google **Redirect** to Backend callback url `https://myapp/api/auth/callback` with authorization code
### 1. ⚙️ Front **GET** to Google
### ⚙️ 1. Front **GET** to Google
```sh
GET https://accounts.google.com/o/oauth2/v2/auth?
@ -60,7 +60,7 @@ GET https://accounts.google.com/o/oauth2/v2/auth?
state=xyz123 # A random string to protect against CSRF attacks.
```
### 2. ⚙️ Google **302** to Back
### ⚙️ 2. Google **302** to Back
```bash
HTTP/1.1 302 Found
@ -80,13 +80,13 @@ Content-Length: 0
# 2. ⭐️ Exchange Code with Token
# ⭐️ 2. Exchange Code with Token
1. Backend **POST** the `code` to Google `https://oauth2.googleapis.com/token`
2. Google **Response** to Backend with an `access_token` and a `refresh token`
3. Backend **Redirect** to Frontend with the `access_token` in a `cookie`
### 1. ⚙️ Backend **POST** the code to Google
### ⚙️ 1. Backend **POST** the code to Google
```sh
POST https://oauth2.googleapis.com/token
@ -99,7 +99,7 @@ client_secret=PASS1234&
redirect_uri=https://myapp/callback
```
### 2. ⚙️ Google **Response** to Backend
### ⚙️ 2. Google **Response** to Backend
```js
{
@ -111,7 +111,7 @@ redirect_uri=https://myapp/callback
}
```
### 3. ⚙️ Backend **Redirect** to Frontend success page
### ⚙️ 3. Backend **Redirect** to Frontend success page
This redirect will place a **cookie** in the browser that contains the **access token**
@ -197,9 +197,9 @@ The `redirect_uri` in the token exchange `POST` request needs to match EXACTLY t
# 3. ⭐️ Use Token
# ⭐️ 3. Use Token
### 1. ⚙️ Frontend **GET** profile data from Backend
### ⚙️ 1. Frontend **GET** profile data from Backend
```bash
curl -X GET https://myapp/api/auth/profile \
@ -207,7 +207,7 @@ curl -X GET https://myapp/api/auth/profile \
-H "Accept: application/json"
```
### 2. ⚙️ Backend **GET** profile data from Google
### ⚙️ 2. Backend **GET** profile data from Google
```bash
curl -X GET "https://www.googleapis.com/oauth2/v3/userinfo" \
@ -215,7 +215,7 @@ curl -X GET "https://www.googleapis.com/oauth2/v3/userinfo" \
-H "Accept: application/json"
```
### 3. ⚙️ Google **response** to Backend with profile data
### ⚙️ 3. Google **response** to Backend with profile data
```
{