콘텐츠로 이동
Edicus Makers

빠른 시작

이 문서는 가장 짧은 경로로 편집기를 화면에 띄우는 과정을 안내합니다. 자세한 옵션은 SDK 레퍼런스와 Server API 레퍼런스를 참고하세요.

  1. edicus-api-key 발급받기

    모션원에 문의해 고객사용 edicus-api-key와 partner-id를 발급받습니다. 이 키는 고객사 서버에만 보관합니다.

  2. (서버) 사용자 토큰 발급

    고객사 서버에서 사용자별 edicus-uid로 1시간짜리 JWT를 발급받습니다.

    Terminal window
    curl -X POST https://api-dot-edicusbase.appspot.com/api/auth/token \
      -H "edicus-api-key: YOUR_API_KEY" \
      -H "edicus-uid: kr46KCD8vWOnOGo8CBO7c6ctSge2"
    # → { "token": "<JWT>" }

    발급된 token만 브라우저로 전달합니다.

  3. (브라우저) SDK 스크립트 추가

    <script src="edicus-sdk-v2.js"></script>

  4. (브라우저) 편집기 초기화 및 상품 열기

    const editor = window.edicusSDK.init({});
    

    editor.create_project(
        {
            parent_element: document.getElementById('editor'),
            partner: 'motion1',
            token: token, // 서버에서 받은 JWT
            ps_code: '90x50@NC',
            template_uri: 'gcs://template/partners/motion1/res/template/4201.json',
        },
        function (err, data) {
            if (err) return console.error(err);
            if (data.action === 'project-id-created') {
                console.log('생성된 프로젝트:', data.info.project_id);
            }
        }
    );

    편집기는 parent_element로 지정한 DOM 아래에 iframe으로 삽입됩니다.

  5. 토큰 만료 대응

    토큰 유효시간(1시간)이 지나면 편집기가 request-user-token 액션을 콜백으로 보냅니다. 이때 서버에서 새 토큰을 받아 send-user-token으로 전달합니다.

    if (data.action === 'request-user-token') {
        getTokenFromServer(uid, function (err, res) {
            editor.post_to_editor('send-user-token', { token: res.token });
        });
    }

다음 단계

섹션 제목: “다음 단계”