Frontend Slack 로그인 문서 정리
- 불필요한 의사코드 제거 - VITE_SLACK_CLIENT_ID 제거 (Frontend에서 불필요) - 섹션 번호 중복 정리 - UUID5 → slack_user_mapping 테이블 조회로 수정 - 엔드포인트 경로 일관성 확보 (/auth/slack/login/)
This commit is contained in:
parent
c01c266e59
commit
a391f2f4a4
@ -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 확인
|
||||
|
||||
@ -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 처리
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user