64 lines
1.6 KiB
Markdown
64 lines
1.6 KiB
Markdown
# OAuth Frontend Kullanimi (Google/GitHub)
|
|
|
|
Bu proje icin OAuth akisi backend uzerinden baslar ve callback sonunda frontend'e redirect edilir.
|
|
|
|
## 1) Frontend Login Baslatma
|
|
|
|
Kullanici butona tikladiginda tarayiciyi backend'e yonlendir:
|
|
|
|
```js
|
|
const API_BASE = "http://localhost:8080";
|
|
|
|
// Google
|
|
window.location.href = `${API_BASE}/v1/auth/google`;
|
|
|
|
// GitHub
|
|
// window.location.href = `${API_BASE}/v1/auth/github`;
|
|
```
|
|
|
|
## 2) Backend Callback Davranisi
|
|
|
|
OAuth tamamlandiginda backend su URL'e redirect eder:
|
|
|
|
```
|
|
http://localhost:5173/auth/callback#access_token=...&refresh_token=...&provider=google
|
|
```
|
|
|
|
Bu davranis icin backend .env ayari:
|
|
|
|
```
|
|
OAUTH_REDIRECT_URL=http://localhost:5173/auth/callback
|
|
```
|
|
|
|
## 3) Frontend Callback Sayfasi
|
|
|
|
Frontend tarafinda /auth/callback sayfasinda URL hash'ten tokenlari al:
|
|
|
|
```js
|
|
const params = new URLSearchParams(window.location.hash.replace("#", ""));
|
|
const accessToken = params.get("access_token");
|
|
const refreshToken = params.get("refresh_token");
|
|
const provider = params.get("provider");
|
|
|
|
if (accessToken && refreshToken) {
|
|
localStorage.setItem("access_token", accessToken);
|
|
localStorage.setItem("refresh_token", refreshToken);
|
|
// istersen /v1/auth/me ile kullanici bilgisini cek
|
|
}
|
|
```
|
|
|
|
## 4) /v1/auth/me Kullanimi
|
|
|
|
Token alindiktan sonra kullanici bilgisi icin:
|
|
|
|
```bash
|
|
curl http://localhost:8080/v1/auth/me \
|
|
-H "Authorization: Bearer YOUR_TOKEN"
|
|
```
|
|
|
|
## Notlar
|
|
|
|
- Callback endpoint'i frontend tarafindan fetch ile cagrilmaz.
|
|
- Tokenlar URL hash ile geldigi icin query'den daha guvenlidir (server loglarina dusmez).
|
|
- Isteklerde Authorization header olarak `Bearer <token>` kullanilir.
|