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 16:54:27 +02:00
parent 4457e53ff1
commit 2df04f4cde
1 changed files with 27 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
OAuth2-Backend-Approach.md
View File

@ -39,6 +39,11 @@ A way for the `user` to tell `google` to give an access to `myapp` app
# 1. Get Code # 1. Get Code
1. Frontend **GET** to Google `https://accounts.google.com/o/oauth2` with callback url 1. Frontend **GET** to Google `https://accounts.google.com/o/oauth2` with callback url
@ -70,6 +75,11 @@ 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`
@ -92,24 +102,24 @@ redirect_uri=https://myapp/callback
### 2. Google **response** to Backend ### 2. Google **response** to Backend
```json ```js
{ {
"access_token": "ya29.a0AfH6SMC8Op6zXZkHi2XITkDoOVzYXt3hTY6sny54UlWlxrnKlX5Xv78is7BEHekVX-VoA", "access_token": "ya29.a0AfH6SMC8Op6zkVX-VoA",
"token_type": "Bearer", "token_type": "Bearer",
"expires_in": 3600, "expires_in": 3600,
"refresh_token": "1//04d5XHqmn6Hdy3wTf5OYDP1SyBa74zEFURjddQ2A1cFw78PY13pQyWhlD2A6XhDQtKlrjAqU4kS3vGdMvckw", "refresh_token": "1//04d5lrjAqU4kS3vGdMvckw",
"scope": "email profile" "scope": "email profile"
} }
``` ```
### 3. Backend **response** to Frontend (for the initial request to Google) ### 3. Backend **Redirect** to Frontend success page
```json This redirect will place a cookie in the browser that contains the access token
{
"access_token": "ya29.a0AfH6SMC8Op6zXZkHi2XITkDoOVzYXt3hTY6sny54UlWlxrnKlX5Xv78is7BEHekVX-VoA", ```bash
"token_type": "Bearer", HTTP/1.1 302 Found
"expires_in": 3600, Location: http://localhost:3000/dashboard
} Set-Cookie: access_token=ya29.a0AfH6SMC8Op6zkVX-VoA; HttpOnly; Secure; Max-Age=3600; Path=/;
``` ```
<details> <details>
@ -178,13 +188,19 @@ app.get('/callback', async (req, res) => {
# 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 \
-H "Cookie: access_token=ya29.a0AfH6SMC8Op6zXZkHi2XITkDoOVzYXt3hTY6sny54UlWlxrnKlX5Xv78is7BEHekVX-VoA" \ -H "Cookie: access_token=ya29.a0AfH6SMC8Op6zkVX-VoA" \
-H "Accept: application/json" -H "Accept: application/json"
``` ```
@ -277,64 +293,3 @@ const App = () => {
export default App; export default App;
``` ```
-------------------------
```bash
GET https://myapp/api/user-profile
Authorization: Bearer access-token-from-backend
```
```json
{
"sub": "1234567890",
"name": "John Doe",
"given_name": "John",
"family_name": "Doe",
"profile": "https://plus.google.com/1234567890",
"picture": "https://lh3.googleusercontent.com/a-/AOh14GgIXXl5JXzW0c1Szbl-e1Jch1vhl5rHhH65vlK6J5g5PqkGjj1O0p3t8bgVEOykQ6ykFSQ=s96",
"email": "john.doe@example.com",
"email_verified": true,
"locale": "en"
}
```
```sh
GET https://www.googleapis.com/oauth2/v3/userinfo
Authorization: Bearer ya29.a0AfH6SMC8Op6zXZkHi2XITkDoOVzYXt3hTY6sny54UlWlxrnKlX5Xv78is7BEHekVX-VoA
```
```json
{
"sub": "1234567890",
"name": "John Doe",
"given_name": "John",
"family_name": "Doe",
"profile": "https://plus.google.com/1234567890",
"picture": "https://lh3.googleusercontent.com/a-/AOh14GgIXXl5JXzW0c1Szbl-e1Jch1vhl5rHhH65vlK6J5g5PqkGjj1O0p3t8bgVEOykQ6ykFSQ=s96",
"email": "john.doe@example.com",
"email_verified": true,
"locale": "en"
}
```
```json
{
"access_token": "ya29.a0AfH6SMC8Op6zXZkHi2XITkDoOVzYXt3hTY6sny54UlWlxrnKlX5Xv78is7BEHekVX-VoA",
"token_type": "Bearer",
"expires_in": 3600
}
```