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-07 13:10:14 +02:00
parent 551b96e952
commit d82e0c9db4
1 changed files with 35 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
OAuth2-Backend-Approach.md
View File

@ -7,13 +7,14 @@ A way for the `user` to tell `google` to give an access to `xorismesiti.gr` app
### OAuth2 Frontend/Backend Flow: ### OAuth2 Frontend/Backend Flow:
| When | What | How | | When | What | How |
|-------|--------------------------|:------------------------------------------------:| |-------|--------------------------|--------------------------------------------------|
| 1 | Get Code | Front ⇢ Google ⇢ Front | | 1 | Get Code | ` Front ⇢ Google ⇢ Back `|
| 2 | Exchange Code with Token | Front ⇢ Back ⇢ Google ⇢ Back ⇢ Front | | 2 | Exchange Code with Token | ` Back ⇢ Google ⇢ Back ⇢ Front `|
| 4 | Use Token | Front ⇢ Back ⇢ Google ⇢ Back ⇢ Front | | 4 | Use Token | ` Front ⇢ Back ⇢ Google ⇢ Back ⇢ Front `|
<br> <br>
### OAuth2 Frontend/Backend Flow Details: ### OAuth2 Frontend/Backend Flow Details:
1. Get Code 1. Get Code
@ -39,72 +40,20 @@ A way for the `user` to tell `google` to give an access to `xorismesiti.gr` app
# 1. Get Code
### Front **GET** to Google
### OAuth2 Standar Flow:
1. **User** clicks button "Login with Google" on your platform `xorismesiti.gr`
2. **Authorization Request**: Button redirects user to Google's authorization endpoint `accounts.google.com/o/oauth2`
3. **User Login and Consent**: User login to Google and grants permissions.
4. **Authorization Code Response**: Google redirects user back to your app `xorismesiti.gr/callback` with an authorization `code`.
5. **Access Token Request**: App exchanges the authorization `code` for an `access_token`.
6. **Access Protected Resources**: App uses the `access_token` to fetch the user's Google profile and email from `googleapis.com/oauth2`
7. **Token Refresh** (Optional): If the `access_token` expires, app uses the `refresh token` to get a new `access_token`.
<br><br><br>
### OAuth2 Frontend/Backend Flow:
**Frontend**
1. **Redirect** the user to Google's OAuth authorization endpoint `accounts.google.com/o/oauth2`
2. **Get** the authorization `code` after Google redirects back to the frontend `xorismesiti.gr/callback`
3. **Send** the authorization `code` to the backend for `token` exchange.
**Backend**
1. **exchange** the authorization `code` for an `access_token` and `refresh token`
2. **fetch** user profile data from from `googleapis.com/oauth2` using the `access_token`
3. **Store** the `tokens` securely in session (front) or a database (back)
4. **Refresh** the `access_token` if it expires
<br><br><br>
# 1. [Frontend] Request Authorization code
1. A button "Login with Google" redirects the user to the Google's authorization endpoint `accounts.google.com/o/oauth2/v2/auth`
2. After the redirection, the user will log in to Google and grant permissions (if they haven’t already).
3. Google will redirect the user back to your redirect_uri `https://xorismesiti.gr/callback` with an authorization code `?code=`
*Security: the state string should be validated upon receiving the response from Google, as it ensures that the response corresponds to the request.*
<details>
<summary><h3>Frontend HTTP GET Request to Google</h3></summary>
```sh ```sh
GET https://accounts.google.com/o/oauth2/v2/auth? GET https://accounts.google.com/o/oauth2/v2/auth?
response_type=code& response_type=code& # This indicates you're using the "authorization code" flow.
client_id=ABC34JHS9D& client_id=ABC34JHS9D& # Your Google API client ID created on the google API console.
redirect_uri=https://xorismesiti.gr/callback& redirect_uri=https://xorismesiti.gr/callback& # The URI Google will redirect to after the user consents.
scope=email%20profile& scope=email%20profile& # The permissions you're requesting (e.g., email, profile).
state=xyz123 state=xyz123 # A random string to protect against CSRF attacks.
``` ```
- `response_type=code`: This indicates you're using the "authorization code" flow. ### Google **302** to Front
- `client_id`: Your Google API client ID. Created by the developers of the `xorismesiti.gr` on the google API console.
- `redirect_uri`: The URI Google will redirect to after the user consents.
- `scope`: The permissions you're requesting (e.g., email, profile).
- `state`: A random string to protect against CSRF attacks.
</details>
<details>
<summary><h3>Google HTTP Response to Frontend </h3></summary>
```bash ```bash
HTTP/1.1 302 Found HTTP/1.1 302 Found
@ -113,7 +62,28 @@ Content-Type: text/html; charset=UTF-8
Content-Length: 0 Content-Length: 0
``` ```
</details> *Security: the state string should be validated upon receiving the response from Google, as it ensures that the response corresponds to the request.*
2. Exchange Code with Token
<details> <details>
<summary><h3>Frontend Code</h3></summary> <summary><h3>Frontend Code</h3></summary>