happybell80
c01c266e59
- UUID5 → UUID 매핑 테이블 조회 방식으로 전면 변경 - Slack/Gmail 로그인 엔드포인트 구조 통일 (/login/, /login/callback) - localStorage 'token' 키로 통일, JWT 24시간, refresh 없음 - OAuth는 auth-server 직접, API는 Gateway 경유 명시 - 불필요한 의사코드 제거
189 lines
6.2 KiB
Markdown
189 lines
6.2 KiB
Markdown
# Frontend Slack 로그인 목업 구현 계획
|
|
|
|
**작성일**: 2025-08-28
|
|
**작성자**: 51123 서버 관리자
|
|
**상태**: 🟡 계획
|
|
**목표**: 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 목업 로그인 핸들러
|
|
```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;
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## 3. 향후 auth-server 연동 계획
|
|
|
|
### 3.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 생성
|
|
state 생성 → sessionStorage 저장 → Slack OAuth URL 생성
|
|
|
|
### 3.3 auth-server 연동
|
|
|
|
```typescript
|
|
- OAuth 로그인: `${VITE_AUTH_SERVER_URL}/auth/slack/login/` 직접 연결
|
|
- API 호출: `/api/auth/slack/passport/*` Gateway 경유
|
|
```
|
|
|
|
### 3.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/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)
|
|
|
|
### 3.4 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로 리다이렉트
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## 4. 구현 체크리스트
|
|
|
|
### Frontend 작업
|
|
- [ ] Slack 로그인 버튼 컴포넌트 생성
|
|
- [ ] 환경변수 추가 (VITE_SLACK_CLIENT_ID, VITE_AUTH_SERVER_URL)
|
|
- [ ] OAuth state 관리 (sessionStorage)
|
|
- [ ] 콜백 페이지 라우팅 추가
|
|
- [ ] JWT 토큰 저장 및 검증 로직
|
|
|
|
### auth-server 확인사항
|
|
- [x] Slack Client ID/Secret 설정 (.env에 존재)
|
|
- [x] `/api/slack/mapping/{slack_id}` API 동작 확인
|
|
- [ ] `/auth/slack/login` 엔드포인트 (미구현)
|
|
- [ ] `/auth/slack/callback` 엔드포인트 (미구현)
|
|
- [ ] JWT 발급 로직 (미구현)
|
|
|
|
---
|
|
|
|
## 5. 테스트 시나리오
|
|
|
|
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 저장) |