stevaidis/dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update OAuth2-Backend-Approach.md

Browse Source
This commit is contained in:
Ste Vaidis 2025-01-08 10:41:33 +02:00
parent a516fb899b
commit d7c22f2736
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
OAuth2-Backend-Approach.md
View File

@ -17,18 +17,18 @@ A way for the `user` to tell `google` to give an access to `myapp` app
### Details: ### Details:
1. ⭐️ Get Authorization Code ⭐️ 1. Get Authorization Code
1. Frontend **Navigate** to Google URL with a callback url 1. Frontend **Navigate** to Google URL with a callback url
2. Google **Redirect** to Backend's callback url with the authorization code 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 1. Backend **POST** the `code` to Google
2. Google **Response** to Backend with an `access_token` and a `refresh 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` 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` 1. Frontend **GET** profile data from Backend using the `cookie`
2. Backend **GET** profile data from Google using the `access_token` 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 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 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 ```sh
GET https://accounts.google.com/o/oauth2/v2/auth? 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. state=xyz123 # A random string to protect against CSRF attacks.
``` ```
### 2. ⚙️ Google **302** to Back ### ⚙️ 2. Google **302** to Back
```bash ```bash
HTTP/1.1 302 Found 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` 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` 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. 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 ```sh
POST https://oauth2.googleapis.com/token POST https://oauth2.googleapis.com/token
@ -99,7 +99,7 @@ client_secret=PASS1234&
redirect_uri=https://myapp/callback redirect_uri=https://myapp/callback
``` ```
### 2. ⚙️ Google **Response** to Backend ### ⚙️ 2. Google **Response** to Backend
```js ```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** 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 ```bash
curl -X GET https://myapp/api/auth/profile \ curl -X GET https://myapp/api/auth/profile \
@ -207,7 +207,7 @@ curl -X GET https://myapp/api/auth/profile \
-H "Accept: application/json" -H "Accept: application/json"
``` ```
### 2. ⚙️ Backend **GET** profile data from Google ### ⚙️ 2. Backend **GET** profile data from Google
```bash ```bash
curl -X GET "https://www.googleapis.com/oauth2/v3/userinfo" \ 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" -H "Accept: application/json"
``` ```
### 3. ⚙️ Google **response** to Backend with profile data ### ⚙️ 3. Google **response** to Backend with profile data
``` ```
{ {