feat(auth): 애플 로그인 nonce를 iOS와 동일하게 수정

This commit is contained in:
Yu Sung
2026-03-30 09:47:36 +09:00
parent 94e673b576
commit a288b406ac
2 changed files with 64 additions and 20 deletions

View File

@@ -10,6 +10,7 @@
- [x] 환경변수 설정 추가 가이드: VUE_APP_APPLE_CLIENT_ID, VUE_APP_APPLE_REDIRECT_URI (.env.*)
- [x] 서버 엔드포인트 요청 형식 정합화: POST /member/login/apple 본문에 container/identityToken/nonce 전달
- [x] 트러블슈팅 가이드 추가: 403 에러 및 200 응답 후 중단 현상 원인 분석
- [x] nonce 정합화 보완: iOS와 동일한 raw nonce 생성 규칙 + SHA-256(Base64URL) 적용
- [ ] QA/수동검증: 실제 Apple 계정으로 팝업 로그인 플로우 확인 및 토큰 교환 성공 확인(테스트 서버 배포 후)
## 범위 변경 사항
@@ -45,10 +46,10 @@ Content-Type: application/json
```
- container 값은 web로 고정합니다.
- nonce는 프론트에서 매 로그인 시점에 보안 난수로 생성합니다(raw). Apple에 전달하는 nonce는 SHA-256 해시(hex)로 보냅니다. 서버에서는 raw nonce를 받아 동일한 방식으로 해시하여 id_token 내 nonce와 일치하는지 검증합니다.
- nonce는 프론트에서 매 로그인 시점에 보안 난수로 생성합니다(raw). Apple에 전달하는 nonce는 SHA-256 해시(Base64URL)로 보냅니다. 서버에서는 raw nonce를 받아 동일한 방식으로 해시하여 id_token 내 nonce와 일치하는지 검증합니다.
코드 반영 사항:
- src/views/Login/Login.vue: 로그인 직전 raw nonce 생성 → SHA-256 해시(hex)를 AppleID.auth.init의 nonce로 설정 → signIn 후 id_token과 raw nonce를 서버로 전송.
- src/views/Login/Login.vue: 로그인 직전 raw nonce 생성(iOS와 동일한 문자셋/샘플링 규칙) → SHA-256 해시(Base64URL)를 AppleID.auth.init의 nonce로 설정 → signIn 후 id_token과 raw nonce를 서버로 전송.
- src/api/member.js: Authorization 헤더 제거. 요청 본문으로 { container: 'web', identityToken, nonce, ... } 전송.
## 환경변수 설정(redirect URI, apple_client_id)
@@ -185,5 +186,17 @@ Content-Type: application/json
- 조치: Apple Return URLs에 등록된 도메인으로 앱을 실제 배포하여 동일 오리진 환경에서 검증할 것을 권장함
- 결과: 테스트 서버 배포 시 오리진 불일치 문제가 해결되어 정상적인 Promise resolve 및 서버 전송이 가능해짐
### 4차 수정(nonce 불일치 이슈 정합화)
- 무엇을: Web의 nonce 생성/해시 로직을 iOS 앱에서 사용하는 규칙과 동일하게 수정
- 왜: Apple 로그인 시 서버 검증 단계에서 `invalid nonce`가 발생하는 문제를 해소하기 위해
- 어떻게:
- 코드: `src/views/Login/Login.vue`
- `generateNonce`: iOS와 동일한 문자셋(`0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._`) + 16바이트 샘플링 방식으로 raw nonce 생성
- `sha256Hex`: SHA-256 결과를 hex가 아닌 Base64URL(`+``-`, `/``_`, `=` 제거)로 인코딩하도록 변경
- 해시 기능 미지원 브라우저에서는 예외를 발생시켜 잘못된 nonce 전송을 방지
- 검증 명령:
- `npm run lint` → 성공
- 결과: Apple SDK에 전달되는 nonce 포맷이 iOS와 동일해져 서버 nonce 검증 정합성 개선
## 정정/메모
- 초기 계획 문서는 구현 직후 정리되었습니다. 향후 환경변수/서버 설정 완료 시 체크박스 및 검증 기록을 추가 업데이트하세요.