<p align="center">
  <img width="120" src="https://web-dev.echoss.co.kr/npm/readme/images/stamp.png" alt="echoss stamp">
</p>
<h2 align="center">12cm echoss SDK</h2>

### 설치
npm install 12cm-echoss-sdk@latest

<br/>

<h2 align="center">echoss Client SDK</h2>

### 개요
원투씨엠(주)의 echoss Client SDK 사용 방법을 설명합니다.

### 사용방법

#### HTML
```html
<div class="app-container"></div>
```

#### Script
```javascript
import echoss from '12cm-echoss-sdk/echoss-lite/index.js'

export default {
  components: { echoss },
  created () {
    echoss.initializeSuccess = () => {
      // 플랫폼 초기화 성공
      echoss.Stamp.init(() => {
        // 스탬프 인증센터 초기화 성공
      }, (errorCode, errorMessage) => {
        // 스탬프 인증센터 초기화 실패
      })
    }

    echoss.setLanguageCode(echoss.LANGUAGE_CODE_TYPE.KOREAN)
    echoss.initialize('API KEY를 입력하세요', echoss.REGION_CODE_TYPE.KOREA, '스탬핑 영역의 element ID를 입력하세요. ex) "app-container"')

    echoss.Stamp.onBeforeStamp = () => {
      // 스탬프가 인식되면 함수가 호출됩니다.
    }

    echoss.Stamp.onException = (errorCode, errorMessage) => {
      // 스탬프를 인증할 수 없는 상황이 감지될 경우 함수가 호출됩니다.
    }

    echoss.Stamp.onError = (errorCode, errorMessage) => {
      // 스탬프를 이용할 수 없거나 다시 한번 정확한 인식이 필요할 경우 함수가 호출됩니다.
    }

    echoss.Stamp.onStamp = (stampParams) => {
      // 스탬프 인식 함수가 호출된 후 스탬프 정보가 정상적으로 암호화되면 함수가 호출됩니다.
    }
  }
}
```

#### 리전코드
<table>
  <tbody>
    <tr>
      <th valign="middle" style="text-align: center" width="160">
        리전
      </th>
      <th valign="middle" style="text-align: center">
        코드
      </th>
    </tr>
    <tr>
      <td align="center" valign="middle">
        한국
      </td>
      <td valign="middle">
        echoss.REGION_CODE_TYPE.KOREA
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        일본
      </td>
      <td valign="middle">
        echoss.REGION_CODE_TYPE.JAPAN
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        중국
      </td>
      <td valign="middle">
        echoss.REGION_CODE_TYPE.CHINA
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        대만
      </td>
      <td valign="middle">
        echoss.REGION_CODE_TYPE.TAIWAN
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        유럽
      </td>
      <td valign="middle">
        echoss.REGION_CODE_TYPE.EUROPE
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        동남아시아1<br/>(싱가포르, 말레이시아)
      </td>
      <td valign="middle">
        echoss.REGION_CODE_TYPE.APSE1
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        동남아시아2<br/>(인도네시아, 베트남)
      </td>
      <td valign="middle">
        echoss.REGION_CODE_TYPE.APSE2
      </td>
    </tr>
  </tbody>
</table>

#### 언어코드
<table>
  <tbody>
    <tr>
      <th valign="middle" style="text-align: center" width="160">
        언어
      </th>
      <th valign="middle" style="text-align: center">
        코드
      </th>
    </tr>
    <tr>
      <td align="center" valign="middle">
        한국어
      </td>
      <td valign="middle">
        echoss.LANGUAGE_CODE_TYPE.KOREAN
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        영어
      </td>
      <td valign="middle">
        echoss.LANGUAGE_CODE_TYPE.ENGLISH
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        일본어
      </td>
      <td valign="middle">
        echoss.LANGUAGE_CODE_TYPE.JAPANESE
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        중국어(간체)
      </td>
      <td valign="middle">
        echoss.LANGUAGE_CODE_TYPE.CHINESE
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        중국어(번체)
      </td>
      <td valign="middle">
        echoss.LANGUAGE_CODE_TYPE.TAIWAN
      </td>
    </tr>
  </tbody>
</table>

<br/>

<h2 align="center">echoss Service Provider</h2>

### 개요
원투씨엠(주)의 echoss Certification Kit을 이용하기 위해 인증 페이지 및 스탬프 연동 방법을 설명합니다.

### 사용방법

#### HTML
```html
<echoss-certification-kit
      :license="license"
      :region="region"
      :language="language"
      :usercode="usercode"
      :merchantcode="merchantcode"
      :options="options"
      :on-initialize-error="onInitializeError"
      :on-stamp-error="onStampError"
      :on-stamp-success="onStampSuccess"
      :on-before-stamp="onBeforeStamp"
      :on-close="onClose" />
```

#### Script
```javascript
import EchossCertificationKit from '12cm-echoss-sdk/echoss-provider/index.vue'

export default {
  components: { EchossCertificationKit },
  data() {
    return {
      license: '라이센스를 입력하세요',
      region: 'KOREA',
      language: 'KOREAN',
      usercode: '고객코드를 입력하세요',
      merchantcode: '매장코드를 입력하세요',
      options: {
        backgroundcolor: '#000000',
        opacity: 0.4,
        description: '스탬프를 찍어주세요.',
        loading: true,
        animation: true,
        echossicon: true
      }
    }
  },
  methods: {
    onInitializeSuccess() {
      // 라이센스 키 만료 등 초기화에 성공할 경우 함수가 입니다.
    },
    onInitializeError(errorCode, errorMessage) {
      // 라이센스 키 만료 등 초기화에 실패할 경우 함수가 입니다.
    },
    onBeforeStamp() {
      // 인증 페이지에서 스탬프가 인식되면 함수가 호출됩니다.
    },
    onStampError(errorCode, errorMessage) {
      // 인증 페이지에서 스탬프 인증이 실패할 경우 함수가 호출됩니다.
    },
    onStampSuccess(response) {
      // 인증 페이지에서 스탬프의 인증이 성공할 경우 함수가 호출됩니다.
    },
    onClose() {
      // 고객이 인증 페이지를 닫을 경우 함수가 호출됩니다.
    }
  }
}
```

#### 파라미터 명세
<table>
  <tbody>
    <tr>
      <th valign="middle" style="text-align: center" width="160">
        파라미터
      </th>
      <th valign="middle" style="text-align: center">
        설명
      </th>
    </tr>
    <tr>
      <td align="center" valign="middle">
        license
      </td>
      <td valign="middle">
        원투씨엠이 제공한 License ID 입니다.
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        region
      </td>
      <td valign="middle">
        API 서버 접근을 위한 국가를 설정합니다.
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        language
      </td>
      <td valign="middle">
        노출될 메세지의 언어를 설정합니다.
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        usercode
      </td>
      <td valign="middle">
        고객사 회원 체계의 고객 고유번호 입니다.
        <br/>
        <span style="color: red;">(한 서비스에서 모든 고객이 동일한 고객번호를 사용할 경우 여러 고객이 동시에 인증을 시도할 때 시스템에서는 한 고객이 동시에 부적절한 인증을 한다고 판단하기 때문에 인증 오류가 발생할 수 있습니다.)</span>
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        merchantcode
      </td>
      <td valign="middle">
        가맹점의 고유번호 입니다.
        <br/>
        <span style="color: red;">(12cm에서 제공해주는 가맹점 코드, 브랜드 코드, 고객사에서 관리하는 가맹점 고유 번호 중 입력이 가능합니다. 또는 고객사에서 가맹점 고유번호를 구분해 관리할 수 없는 경우 공백을 전달합니다.)</span>
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        options
      </td>
      <td valign="middle">
        아래 표에서 상세 설명합니다.
      </td>
    </tr>
  </tbody>
</table>

#### options
<table>
  <tbody>
    <tr>
      <th valign="middle" style="text-align: center" width="160">
        파라미터
      </th>
      <th valign="middle" style="text-align: center">
        설명
      </th>
    </tr>
    <tr>
      <td align="center" valign="middle">
        backgroundcolor
      </td>
      <td valign="middle">
        서비스 페이지의 배경 색상을 변경합니다.
        <br/>
        기본 설정은 "#000000" 입니다.
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        opacity
      </td>
      <td valign="middle">
        서비스 페이지의 배경 투명도를 변경합니다.
        <br/>
        기본 설정은 "0.4" 입니다.
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        description
      </td>
      <td valign="middle">
        서비스 페이지의 노출 문구를 변경합니다.
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        loading
      </td>
      <td valign="middle">
        서비스 페이지에서 스탬프 인식에 대한 로딩 이펙트 여부를 설정합니다.
        <br/>
        요청 파라미터는 로딩 이펙트를 허용하러면 true, 허용하지 않는다면 false 입니다.
        <br/>
        기본 설정은 true 입니다.
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        animation
      </td>
      <td valign="middle">
        서비스 페이지에서 배경 애니메이션의 사용 여부를 설정합니다.
        <br/>
        요청 파라미터는 애니메이션을 사용할 경우 true, 사용하지 않는다면 false 입니다.
        <br/>
        기본 설정은 true 입니다.
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        echossicon
      </td>
      <td valign="middle">
        서비스 페이지에서 에코스 아이콘의 사용 여부를 설정합니다.
        <br/>
        요청 파라미터는 에코스 아이콘을 사용할 경우 true, 사용하지 않는다면 false 입니다.
        <br/>
        기본 설정은 true 입니다.
      </td>
    </tr>
  </tbody>
</table>

#### 리전코드
<table>
  <tbody>
    <tr>
      <th valign="middle" style="text-align: center" width="160">
        리전
      </th>
      <th valign="middle" style="text-align: center">
        코드
      </th>
    </tr>
    <tr>
      <td align="center" valign="middle">
        한국
      </td>
      <td valign="middle">
        KOREA
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        일본
      </td>
      <td valign="middle">
        JAPAN
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        중국
      </td>
      <td valign="middle">
        CHINA
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        대만
      </td>
      <td valign="middle">
        TAIWAN
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        유럽
      </td>
      <td valign="middle">
        EUROPE
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        동남아시아1<br/>(싱가포르, 말레이시아)
      </td>
      <td valign="middle">
        APSE1
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        동남아시아2<br/>(인도네시아, 베트남)
      </td>
      <td valign="middle">
        APSE2
      </td>
    </tr>
  </tbody>
</table>

#### 언어코드
<table>
  <tbody>
    <tr>
      <th valign="middle" style="text-align: center" width="160">
        언어
      </th>
      <th valign="middle" style="text-align: center">
        코드
      </th>
    </tr>
    <tr>
      <td align="center" valign="middle">
        한국어
      </td>
      <td valign="middle">
        KOREAN
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        영어
      </td>
      <td valign="middle">
        ENGLISH
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        일본어
      </td>
      <td valign="middle">
        JAPANESE
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        중국어(간체)
      </td>
      <td valign="middle">
        SIMPLIFIED_CHINESE
      </td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        중국어(번체)
      </td>
      <td valign="middle">
        TRADITIONAL_CHINESE
      </td>
    </tr>
  </tbody>
</table>
