happybell80
338392dbc5
- 상태: 계획 → 완료 - Frontend 작업 완료 항목 체크 - plans → troubleshooting 폴더로 이동 - 파일명 변경: 250829_frontend_slack_login_mockup_completed.md
138 lines
4.8 KiB
Markdown
138 lines
4.8 KiB
Markdown
# Frontend Slack 로그인 목업 구현 계획
|
|
|
|
**작성일**: 2025-08-28
|
|
**작성자**: 51123 서버 관리자
|
|
**상태**: ✅ 완료 (2025-08-29)
|
|
**목표**: Frontend에 Slack으로 회원가입/로그인 목업 구현
|
|
|
|
---
|
|
|
|
## 1. 개요
|
|
|
|
Google OAuth와 Slack 로그인 모두 레벨과 무관하게 제공. Frontend 목업 구현.
|
|
- **모든 레벨**: Google OAuth + Slack 로그인 (둘 다 사용 가능)
|
|
- **레벨 2**: Gmail 권한 아이템 획득
|
|
- **레벨 3**: Slack 아이템 획득 (봇 설치, 대화 동기화 등)
|
|
- **회원가입**: Slack 계정으로 처음 로그인하는 사용자도 자동 가입
|
|
- **현재 목표**: Frontend 목업만 구현, auth-server 연동은 향후 과제
|
|
|
|
### 확인된 설정 (auth-server/.env)
|
|
- **Slack Client ID**: `9073915808149.9085704341778`
|
|
- **Slack Client Secret**: `5f8701a3c97a9e0b406817f44f5dbb5f`
|
|
- **Redirect URI**: `https://auth.ro-being.com/auth/slack/login/callback`
|
|
|
|
---
|
|
|
|
## 2. 백엔드 통합 계획
|
|
|
|
상세 구현은 [250828_slack_integration_level3_plan.md](./250828_slack_integration_level3_plan.md) 참조
|
|
|
|
**핵심 요약**:
|
|
- Phase 1: Sign in with Slack (OIDC 로그인)
|
|
- `/auth/slack/login/`: OAuth URL 생성 및 리다이렉트
|
|
- `/auth/slack/login/callback`: 토큰 교환, UUID 매핑, JWT 발급
|
|
- Phase 2: Slack 패스포트 (레벨 3 아이템)
|
|
- `/auth/slack/passport/*`: Gmail과 동일한 패스포트 구조
|
|
- 봇 설치, workspace 토큰 저장, 활성화/비활성화
|
|
- Phase 3: 대화 동기화 (Slack ↔ Frontend)
|
|
|
|
---
|
|
|
|
## 3. Frontend 목업 구현
|
|
|
|
### 3.1 UI 컴포넌트
|
|
Slack 로그인 버튼 추가
|
|
|
|
### 3.2 목업 로그인 핸들러
|
|
Username 생성 우선순위: display_name → email@ 앞부분 → real_name → slack_{id[:8]}
|
|
|
|
---
|
|
|
|
## 4. 향후 auth-server 연동 계획
|
|
|
|
### 4.1 환경변수 설정
|
|
```bash
|
|
# frontend-customer/.env
|
|
VITE_API_URL=http://localhost:8001
|
|
VITE_ROBING_API_URL=https://ro-being.com/gateway
|
|
VITE_AUTH_SERVER_URL=https://auth.ro-being.com
|
|
```
|
|
|
|
### 4.2 OAuth URL 생성
|
|
state 생성 → sessionStorage 저장 → Slack OAuth URL 생성
|
|
|
|
### 4.3 auth-server 연동
|
|
|
|
```typescript
|
|
- OAuth 로그인: `${VITE_AUTH_SERVER_URL}/auth/slack/login/` 직접 연결
|
|
- API 호출: `/api/auth/slack/passport/*` Gateway 경유
|
|
```
|
|
|
|
### 4.4 JWT 및 Storage 정책
|
|
- **localStorage**: `token` 키로 통일 (auth_token 사용 안함)
|
|
- **JWT 만료**: 24시간, refresh token 없음
|
|
- **OAuth State**: sessionStorage 사용
|
|
- **User ID**: UUID 형식으로 저장
|
|
**현재 구현된 엔드포인트:**
|
|
- **Slack 매핑 API**: `GET /api/slack/mapping/{slack_user_id}` ✅ 동작 확인
|
|
- 반환: `{ user_id, username, email, robeing_id }`
|
|
|
|
**구현 필요한 엔드포인트:**
|
|
- **로그인 시작**: `/auth/slack/login/` (미구현)
|
|
- **콜백 처리**: `/auth/slack/login/callback` (미구현)
|
|
- **사용자 정보**: `openid.connect.userInfo` 호출로 email, real_name, display_name 획득
|
|
- **Username 생성**: display_name > email@ 앞 > real_name 첫단어 > slack_ID 순
|
|
- **UUID 생성**: slack_user_mapping 테이블 조회, 없으면 uuid4() 생성 후 저장
|
|
|
|
### 4.5 Frontend 구현 필요사항
|
|
**현재 Frontend 구조:**
|
|
- 라우터: wouter 사용
|
|
- 페이지: `src/pages/` (landing, game-dashboard, inventory, ir-presentation)
|
|
|
|
**구현 필요:**
|
|
- src/pages/slack-callback.tsx 페이지 생성
|
|
- OAuth 콜백 처리 로직
|
|
|
|
---
|
|
|
|
## 5. 구현 체크리스트
|
|
|
|
### Frontend 작업
|
|
- [x] Slack 로그인 버튼 컴포넌트 생성 ✅ (2025-08-29)
|
|
- [x] 환경변수 추가 (VITE_AUTH_SERVER_URL) ✅
|
|
- [x] login-dialog.tsx에 Slack 버튼 추가 ✅
|
|
- [x] auth-context.tsx에 loginWithSlack 함수 추가 ✅
|
|
- [ ] OAuth state 관리 (sessionStorage) - auth-server 구현 대기
|
|
- [ ] 콜백 페이지 라우팅 추가 - auth-server 구현 대기
|
|
|
|
### auth-server 확인사항
|
|
- [x] Slack Client ID/Secret 설정 (.env에 존재)
|
|
- [x] `/api/slack/mapping/{slack_id}` API 동작 확인
|
|
- [ ] `/auth/slack/login/` 엔드포인트 (미구현)
|
|
- [ ] `/auth/slack/login/callback` 엔드포인트 (미구현)
|
|
- [ ] JWT 발급 로직 (미구현)
|
|
|
|
---
|
|
|
|
## 6. 테스트 시나리오
|
|
|
|
1. **목업 테스트 (현재 단계)**
|
|
- Slack 로그인 버튼 UI 확인
|
|
- localStorage에 'token' 키로 저장 확인
|
|
- authProvider='slack' 설정 확인
|
|
- redirectAfterLogin 처리로 원래 페이지 복귀 확인
|
|
- username='johndoe' 형식 확인
|
|
|
|
2. **향후 실제 OAuth 테스트**
|
|
- Slack OAuth 권한 승인 화면
|
|
- 신규 가입자 UUID 자동 생성
|
|
- 기존 사용자 로그인 처리
|
|
|
|
---
|
|
|
|
## 6. 주의사항
|
|
|
|
- **목업 단계**: 실제 Slack API 연동 없이 Frontend만 구현
|
|
- **회원가입 플로우**: Slack 로그인 = 자동 회원가입 (Google OAuth와 동일)
|
|
- **Slack 권한**: 로그인용 최소 권한만, 추가 권한은 아이템으로 관리
|
|
- **Provider 구분**: Google/Slack 로그인 구분 필요 (authProvider 저장) |