PWA 간 HMAC 토큰 인증 흐름 만들기
중급40분7시간 전
PanelControl에서 Orders로 넘어갈 때 브라우저 내장 Web Crypto로 HMAC 서명 토큰을 만들고, 수신 앱에서 이를 검증해 사용자 상태를 전달하는 흐름을 구현합니다. 최종적으로 PanelControl과 Orders 두 개의 PWA 예제 코드와 토큰 생성·검증 코드, sessionStorage 저장 흐름, 사용자 배지 UI, PM용 인수 기준 문서가 포함된 파일 묶음을 만듭니다.
이 실습은 터미널에서 진행됩니다
오른쪽 패널에서 설치 명령어를 복사하세요이런 걸 배워요
- 브라우저 내장 암호화 기능으로 서명 토큰을 생성할 수 있습니다
- 수신 PWA에서 토큰을 검증하고 URL의 민감 정보를 제거할 수 있습니다
- sessionStorage와 사용자 배지 UI로 로그인 상태처럼 보이는 데모를 구성할 수 있습니다
- PM 관점의 보안 흐름 인수 기준과 테스트 시나리오를 문서화할 수 있습니다
어떻게 진행해요
1. 환경 검증하기
2. 프로젝트 기준 정하기
3. 서명 토큰 기능 작성하기
4. 발신 앱 화면 작성하기
5. 수신 앱 검증 화면 작성하기
6. 검증 테스트 작성하기
7. 토큰 흐름 실행 확인하기
8. 인수 기준 문서화하기
AI 튜터가 각 단계를 하나씩 안내해줄 거예요