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

Update OAuth2-Front-Approach.md

Browse Source
This commit is contained in:
Ste Vaidis 2024-12-15 18:44:27 +02:00
parent a7d3fc03d9
commit 8fd6160666
1 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
OAuth2-Front-Approach.md
View File

@ -35,7 +35,7 @@ A way for the `user` to tell `google` to give an access token to `xorismesiti.gr
# 1. Request Authorization code # 1. Get Authorization code
### Frontend ⇢ Google ⇢ Frontend ### Frontend ⇢ Google ⇢ Frontend
@ -102,13 +102,13 @@ const loginWithGoogle = () => {
# 2. Exchange Code with Token # 2. Exchange Authorization Code with Tokens
### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend ### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend
#### 2.1 Frontend #### 2.1 Frontend
Now that the frontend has the Authorization `code` on th callback url https://xorismesiti.gr/api/auth/callback`?code=AAAABCX4XfWgyVyziyLg0QHHHHH` it can send it to the backend with POST to `xorismesiti.gr/api/auth/exchange-token`, in order the backend to exchange the `code` for an `access_token` and optionally an `refresh_token` Now that the frontend has the Authorization `code` on th callback url https://xorismesiti.gr/api/auth/callback`?code=AAAABCX4XfWgyVyziyLg0QHHHHH` it can send it to the backend with POST to `xorismesiti.gr/api/auth/exchange-token`
<details> <details>
<summary><h3>Frontend HTTP POST Request to Backend</h3></summary> <summary><h3>Frontend HTTP POST Request to Backend</h3></summary>
@ -124,9 +124,6 @@ Content-Type: application/json
</details> </details>
<br><br> <br><br>
@ -231,20 +228,7 @@ app.listen(3000, () => {
</details> </details>
<details>
<summary><h3>Backend HTTP Response to Frontend</h3></summary>
```json
{
"access_token": "ya29.a0AfH6SMC8Op6zXZkHi2XITkDoOVzYXt3hTY6sny54UlWlxrnKlX5Xv78is7BEHekVX-VoA",
"token_type": "Bearer",
"expires_in": 3600,
"refresh_token": "1//04d5XHqmn6Hdy3wTf5OYDP1SyBa74zEFURjddQ2A1cFw78PY13pQyWhlD2A6XhDQtKlrjAqU4kS3vGdMvckw",
"scope": "email profile"
}
```
</details>
<details> <details>
<summary><h3>Frontend Code</h3></summary> <summary><h3>Frontend Code</h3></summary>
@ -289,8 +273,28 @@ export default Callback;
<br><br> <br><br>
#### 2.3 Front #### 2.3 Front
The frontend gets the tokens from the backend response, and saves them somewhere secure. Now its ready to use the tokens to get the user data from Google
<details>
<summary><h3>Backend HTTP Response to Frontend</h3></summary>
```json
{
"access_token": "ya29.a0AfH6SMC8Op6zXZkHi2XITkDoOVzYXt3hTY6sny54UlWlxrnKlX5Xv78is7BEHekVX-VoA",
"token_type": "Bearer",
"expires_in": 3600,
"refresh_token": "1//04d5XHqmn6Hdy3wTf5OYDP1SyBa74zEFURjddQ2A1cFw78PY13pQyWhlD2A6XhDQtKlrjAqU4kS3vGdMvckw",
"scope": "email profile"
}
```
</details>