인증 정보 및 환경#
Visualizer SDK를 사용하는 스토어의 인증 정보를 설정하고, 필요한 경우 Product Import API 인증 정보도 설정하세요. 공개 문서를 읽는 것만으로 인증 정보가 생성되거나 스토어 접근 권한이 부여되지는 않습니다.
인증 정보별 사용 위치#
| 연동 방식 | 인증 정보 | 사용 위치 |
|---|---|---|
| 스토어용 SDK | Shop ID 및 Publishable Key | 스토어용 SDK 스크립트 속성 |
| Product Import API | Client ID 및 Client Secret | 백엔드 또는 안전한 서버 측 작업 |
Publishable Key는 브라우저에서 사용하도록 설계되었습니다. Client Secret은 서버에 보관해야 합니다. 이러한 정보를 테마, 공개 Markdown, 클라이언트 번들 또는 지원 요청용 스크린샷에 붙여 넣지 마세요.
인증 정보 발급 및 설정#
판매자 대시보드를 열고 올바른 스토어를 선택한 다음 SDK 연동 및 설정을 확인하세요. Client ID와 Client Secret은 초기 설정 안내에 따라 준비하세요.
Allowed Origins (CORS) 설정#
SDK를 테스트하거나 배포하기 전에 올바른 스토어의 Dashboard → Settings를 열고 Allowed Origins (CORS) 항목을 찾으세요.
- SDK를 불러올 스토어의 출처를 쉼표로 구분하여 입력하세요. 예:
https://example.com, https://www.example.com, https://shop.example.com. - 프로토콜과 호스트 이름을 입력하고, 필요한 경우 포트도 포함하세요. 페이지 경로, 쿼리 문자열 및 프래그먼트는 포함하지 마세요. 미리보기 또는 스테이징 환경에서 SDK를 테스트한다면 해당 출처도 추가하세요.
http://localhost:3000은 실제 로컬 테스트 출처가 이 주소인 경우에만 사용하세요. - 저장을 클릭한 다음 스토어를 새로고침하고 SDK를 다시 테스트하세요.
고객이 실제로 방문하는 URL을 확인하세요. https://example.com과 https://www.example.com은 서로 다른 출처입니다. 로컬 또는 미리보기 테스트가 성공했다고 해서 배포된 사이트의 출처까지 설정된 것은 아닙니다.
예제 값 교체#
예제에서는 <SHOP_ID>, <PUBLISHABLE_KEY>, <YOUR_CLIENT_SECRET> 등의 자리표시자를 사용합니다. 해당 환경에서만 실제 값으로 교체하세요. HTML 예제에서는 꺾쇠괄호가 <와 >로 인코딩될 수 있습니다. 인코딩된 부분을 포함하여 자리표시자 전체를 교체하세요.
SDK 및 상품 가져오기 환경#
브라우저는 동일한 스토어의 Shop ID와 Publishable Key를 사용하여 https://sdk.ideal.house/sdk.js를 불러옵니다. Product Import API는 계속 https://sdkapi.ideal.house를 사용하며, 문서에 명시된 서버 측 인증을 적용합니다.
앞서 설명한 대로 미리보기 및 운영 스토어의 출처를 각각 설정하세요. 배포 전에 준비된 테스트 상품을 사용하고 출시 체크리스트를 완료하세요.