Frontend Slack 로그인 문서 정리

- 불필요한 의사코드 제거
- VITE_SLACK_CLIENT_ID 제거 (Frontend에서 불필요)
- 섹션 번호 중복 정리
- UUID5 → slack_user_mapping 테이블 조회로 수정
- 엔드포인트 경로 일관성 확보 (/auth/slack/login/)
This commit is contained in:
happybell80 2025-08-29 12:32:39 +09:00
parent c01c266e59
commit a391f2f4a4
2 changed files with 18 additions and 70 deletions

View File

@ -44,77 +44,31 @@ Google OAuth와 Slack 로그인 모두 레벨과 무관하게 제공. Frontend
Slack 로그인 버튼 추가
### 3.2 목업 로그인 핸들러
```typescript
const handleMockLogin = () => {
// Slack이 제공하는 사용자 정보 시뮬레이션
const slackUserInfo = {
slack_id: 'U_NEW_USER_001',
email: 'john.doe@slack-team.com',
real_name: 'John Doe',
display_name: 'johndoe', // Slack 프로필 표시 이름
};
// Username 생성 우선순위
const generateUsername = (info) => {
// 1순위: display_name
if (info.display_name) return info.display_name;
// 2순위: email @ 앞부분
if (info.email) return info.email.split('@')[0];
// 3순위: real_name 첫 단어 (소문자)
if (info.real_name) return info.real_name.split(' ')[0].toLowerCase();
// 4순위: slack_{slack_id[:8]} 기본값
return `slack_${info.slack_id.substring(0, 8)}`;
};
const newSlackUser = {
...slackUserInfo,
username: generateUsername(slackUserInfo), // 'johndoe'
uuid: 'mock-uuid-' + Date.now()
};
// 목업 JWT 생성
const mockToken = btoa(JSON.stringify({
username: newSlackUser.username,
email: newSlackUser.email,
provider: 'slack',
exp: Date.now() + 86400000
}));
// localStorage 키 통일
localStorage.setItem('token', mockToken); // 'token'으로 통일
localStorage.setItem('authProvider', 'slack'); // Google과 구분
// 로그인 후 원래 페이지로 복귀
const redirectPath = localStorage.getItem('redirectAfterLogin') || '/';
localStorage.removeItem('redirectAfterLogin');
window.location.href = redirectPath;
};
```
Username 생성 우선순위: display_name → email@ 앞부분 → real_name → slack_{id[:8]}
---
## 3. 향후 auth-server 연동 계획
## 4. 향후 auth-server 연동 계획
### 3.1 환경변수 설정
### 4.1 환경변수 설정
```bash
# frontend-customer/.env
VITE_API_URL=http://localhost:8001
VITE_ROBING_API_URL=https://ro-being.com/gateway
VITE_SLACK_CLIENT_ID=9073915808149.9085704341778
VITE_AUTH_SERVER_URL=https://auth.ro-being.com
```
### 3.2 OAuth URL 생성
### 4.2 OAuth URL 생성
state 생성 → sessionStorage 저장 → Slack OAuth URL 생성
### 3.3 auth-server 연동
### 4.3 auth-server 연동
```typescript
- OAuth 로그인: `${VITE_AUTH_SERVER_URL}/auth/slack/login/` 직접 연결
- API 호출: `/api/auth/slack/passport/*` Gateway 경유
```
### 3.4 JWT 및 Storage 정책
### 4.4 JWT 및 Storage 정책
- **localStorage**: `token` 키로 통일 (auth_token 사용 안함)
- **JWT 만료**: 24시간, refresh token 없음
- **OAuth State**: sessionStorage 사용
@ -124,34 +78,28 @@ state 생성 → sessionStorage 저장 → Slack OAuth URL 생성
- 반환: `{ user_id, username, email, robeing_id }`
**구현 필요한 엔드포인트:**
- **로그인 시작**: `/auth/slack/login` (미구현)
- **콜백 처리**: `/auth/slack/callback` (미구현)
- **로그인 시작**: `/auth/slack/login/` (미구현)
- **콜백 처리**: `/auth/slack/login/callback` (미구현)
- **사용자 정보**: `openid.connect.userInfo` 호출로 email, real_name, display_name 획득
- **Username 생성**: display_name > email@ 앞 > real_name 첫단어 > slack_ID 순
- **UUID 생성**: UUID5(namespace='6ba7b810-9dad-11d1-80b4-00c04fd430c8', slack_user_id)
- **UUID 생성**: slack_user_mapping 테이블 조회, 없으면 uuid4() 생성 후 저장
### 3.4 Frontend 구현 필요사항
### 4.5 Frontend 구현 필요사항
**현재 Frontend 구조:**
- 라우터: wouter 사용
- 페이지: `src/pages/` (landing, game-dashboard, inventory, ir-presentation)
**구현 필요:**
```typescript
// src/pages/slack-callback.tsx (생성 필요)
const handleSlackLogin = () => {
const currentPath = window.location.pathname;
localStorage.setItem('redirectAfterLogin', currentPath);
// Slack OAuth로 리다이렉트
};
```
- src/pages/slack-callback.tsx 페이지 생성
- OAuth 콜백 처리 로직
---
## 4. 구현 체크리스트
## 5. 구현 체크리스트
### Frontend 작업
- [ ] Slack 로그인 버튼 컴포넌트 생성
- [ ] 환경변수 추가 (VITE_SLACK_CLIENT_ID, VITE_AUTH_SERVER_URL)
- [ ] 환경변수 추가 (VITE_AUTH_SERVER_URL)
- [ ] OAuth state 관리 (sessionStorage)
- [ ] 콜백 페이지 라우팅 추가
- [ ] JWT 토큰 저장 및 검증 로직
@ -159,13 +107,13 @@ const handleSlackLogin = () => {
### auth-server 확인사항
- [x] Slack Client ID/Secret 설정 (.env에 존재)
- [x] `/api/slack/mapping/{slack_id}` API 동작 확인
- [ ] `/auth/slack/login` 엔드포인트 (미구현)
- [ ] `/auth/slack/callback` 엔드포인트 (미구현)
- [ ] `/auth/slack/login/` 엔드포인트 (미구현)
- [ ] `/auth/slack/login/callback` 엔드포인트 (미구현)
- [ ] JWT 발급 로직 (미구현)
---
## 5. 테스트 시나리오
## 6. 테스트 시나리오
1. **목업 테스트 (현재 단계)**
- Slack 로그인 버튼 UI 확인

View File

@ -256,7 +256,7 @@ print('Collections:', client.list_collections())
#### 1차 시도 (2025-08-26 19:00) - UUID 변환
✅ **적용된 해결책**
- **router.py:309-378** UUID 변환 로직 추가
- UUID가 아닌 경우 UUID5로 변환
- UUID가 아닌 경우 slack_user_mapping 테이블 조회
- **문제 발견**: Foreign key 제약 위반 (users 테이블에 없는 UUID)
#### 2차 해결 (2025-08-26 19:30) - Foreign key 처리