# Api23KeyPair를 통한 양방향 통신방법



# [JavaScript] Api23KeyPair를 통한 통신방법

####  **Api23KeyPair란?**

##### **Api23KeyPair**는 HOST(GUEST로부터 API 요청을 받는 사이트)와 **GUEST(HOST의 API를**

##### **사용하는 사이트)** 간의 **안전한 데이터 통신을 위해 생성되는 암호화 키 쌍**입니다.

##### 이 키는 HOST와 GUEST 간의 통신에서 인증 및 권한 확인 역할을 하며, 민감한 데이터를 교환할 때 이를 안전하게 보호합니다.


####  **API23JS란?**

##### **API23JS**는 **GUEST 사이트의 JavaScript**에서 **HOST 사이트의 API**를 사용하기 위한 권한 키입니다. 여기서 **HOST**는 데이터를 요청받아 처리하고 반환하는 **부모 사이트**이며,  
**GUEST**는 데이터를 요청하는 **자식 사이트라고 하겠습니다.**

##### 예를 들어 예시에서는 아래와 같이 정해놓고 진행하겠습니다.

- ##### **HOST**: `opticalpos`
- ##### **GUEST**: `eyemsg`

####  **HOST 설정방법**

1\. HOST가 될 사이트의 통합설정으로 이동합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/YQLimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/YQLimage.png)

<span style="color: rgb(241, 196, 15);">\* 사이트별로 메뉴명이 상이할 수 있습니다.</span>

2\. Api23 KeyPair Encrypted 메뉴를 클릭합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/V23image.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/V23image.png)

3\. ①, ②를 순서대로 클릭하여 Api23eKeyPair를 생성합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/9edimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/9edimage.png)

4\. 편집기를 실행하여 HOST(예시에서는 opticalpos)의 .env파일로 이동합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/kdBimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/kdBimage.png)

4-1. 혹은 command에서 vi 편집기를 통해 .env 파일을 열어줍니다.

5\. env파일에 API23E\_KEY\_PAIR 변수안에 Api23 KeyPair Encrypted 메뉴에서 생성한 Api23eKeyPair 값을 추가해줍니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/aXtimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/aXtimage.png)

6\. [링크](https://opticalpos.daboryhost.com/dabory/myapp/list-type/type1?bpa=eyJtZW51X25hbWUiOiJBUEkyMy1BcHAiLCJtZW51X2NvZGUiOiI2MDAwMDAiLCJkaXNhYmxlX2xfbWVudSI6IjAiLCJlbmFibGVfcl9tZW51IjoiMCIsInBlcm1pc3Npb24iOnsiaXNfbXltZW51IjoiMCIsImlzX2xpc3QiOiIxIiwiaXNfcmVhZCI6IjEiLCJpc19jcmVhdGUiOiIxIiwiaXNfdXBkYXRlIjoiMSIsImlzX2RlbGV0ZSI6IjEiLCJpc19uZXd0YWIiOiIwIn0sInBhZ2VfdXJpIjoiXC9kYWJvcnlcL215YXBwXC9saXN0LXR5cGVcL3R5cGUxIiwicGFyYV9uYW1lIjoiXC9saXN0XC9saXN0LXR5cGUxXC9hcGkyMy1hcHAtaW5wdXQiLCJ0aGVtZV9kaXIiOiIiLCJtYWluX2FwcF9pZCI6MCwiZ3Vlc3RfYXBwX2lkIjowLCJjdXN0b21fdmFyIjoiIn0=)를 클릭하여 myapp API23-Apps로 이동합니다.

7\. 아래와 같이 차례대로 버튼을 클릭합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/iW2image.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/iW2image.png)

8\. 아래와 같이 SSO App의 Api23 Keys를 생성할 수 있는 모달창이 열립니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/Sclimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/Sclimage.png)

App Type : App의 타입을 지정합니다. js를 통해 함수를 사용하여 통신할 것 이기 때문에 js로 하겠습니다.

Sort : 앱의 종료에 대해서 선택합니다. CRM을 기준하로 하기 때문에 표준 CRM인 KingkongCrm을 선택하겠습니다.

OriginUrl : geust로 사용할 url을 입력합니다.

9\. Generate New Api23 Keys 버튼을 클릭하여<span style="color: rgb(224, 62, 45);"> Api23Key</span>를 <span style="color: rgb(224, 62, 45);">생성</span>후 <span style="color: rgb(224, 62, 45);">값을 복사하여 메모장에 붙여넣습니다.</span> (추후 HOST Api를 사용하기 위해서 필요합니다.)

10\. Save 버튼을 통하여 입력한 값들을 반드시 저장합니다.

####  **GUEST 설정방법**

1\. <span style="color: rgb(224, 62, 45);"> **HOST 생성방법**</span> 3번에서 생성해준 <span style="color: rgb(224, 62, 45);">API23eKeyPair</span> 값을 HOST와 동일하게 GUEST의 프로젝트 <span style="color: rgb(224, 62, 45);">.env</span> 파일에도 동일하게 넣어주겠습니다.

<span style="color: rgb(241, 196, 15);">\* 'api23key'키가 아니라 'API23eKeyPair'키를 넣어야합니다.</span>

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/JzEimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/JzEimage.png)

2\. 편집기를 열고 <span style="color: #e03e2d;">**GUEST**</span> 사이트의 FrontEnd(dbrerp)에서 HOST의 API를 사용하려는 view 페이지로 이동합니다.

예시에서는 eyemsg의 right.blade.php 파일에 아래와 같이 script를 추가하겠습니다.

```javascript
<script src="/js/dabory.data-linker.js?serverUrl=https://opticalpos.daboryhost.com&api23Key=Nx4QebHKTssjDuP0AKude0IMZWnak0O0hb1SJ5C3PCUuPK0oRxAVAclS5/I6Zs4cO1Czr8DDrR2LNw/uJpwmzibLTYvsH54ThO5lVLs8ifHllF0fenDeHGL1R6Tuv+KJMQGQGt//HhRLrNKRyrXsx2wN1ZSUtPrpkvEQLC+DE/O0xPxYqBXqM80EaRJ+K1qrTQFkVKMwcTEv"></script>
```

<div id="bkmrk-%EC%9C%84-script%EC%9D%98-src-%EC%86%8D%EC%84%B1%EC%97%90%EC%84%9C-d">위 script의 src 속성에서 dabory.data-linker.js에 ServerUrl에 HOST 사이트인 opticalpos url을 넣고 api23Key에 <span style="color: rgb(224, 62, 45);">**HOST 생성방법**</span> 9번에서 생성해준 <span style="color: rgb(224, 62, 45);">Api23Key</span>를 파라미터로 넣습니다.</div><div id="bkmrk--11"></div><div id="bkmrk-%2A-dabory.data-linker"><span style="color: rgb(241, 196, 15);">\* dabory.data-linker.js는 GUEST에서 HOST와 통신할 수 있도록 구현된 함수를 모아둔 파일입니다.</span></div><div id="bkmrk--12"></div><div id="bkmrk--13"></div>####  **dabory.data-linker.js 사용방법**

<div id="bkmrk--14"></div>```javascript
<script src="/js/dabory.data-linker.js?serverUrl=https://opticalpos.daboryhost.com&api23Key=Nx4QebHKTssjDuP0AKude0IMZWnak0O0hb1SJ5C3PCUuPK0oRxAVAclS5/I6Zs4cO1Czr8DDrR2LNw/uJpwmzibLTYvsH54ThO5lVLs8ifHllF0fenDeHGL1R6Tuv+KJMQGQGt//HhRLrNKRyrXsx2wN1ZSUtPrpkvEQLC+DE/O0xPxYqBXqM80EaRJ+K1qrTQFkVKMwcTEv"></script>
    <script>
        $('#open-signup-popup').on('click', function () {
            if (! window.passwdPolicy) {
                $.fn.dataLinker.api23Js('setup-get', {
                    'SetupCode': 'passwd-policy',
                    'BrandCode': 'member'
                }, function (response) {
                    window.passwdPolicy = response
                    $('#policy-desc-em').text(window.passwdPolicy['PolicyDesc'])
                    // console.log(window.passwdPolicy)
                    $('#join').modal('show');
                })
            } else {
                $('#join').modal('show');
            }
        });
    </script>
```

<div id="bkmrk-1%EB%B2%88-%EC%A4%84-%3A">1번 줄 :</div><div id="bkmrk---dabory.data-linker">- `dabory.data-linker.js` 스크립트를 로드합니다. 이 스크립트는 `serverUrl`과 `api23Key` 파라미터를 통해 API 호출을 처리할 서버와 인증 키를 설정합니다.</div><div id="bkmrk--15"></div>5번줄 :

- window.passwdPolicy가 존재하는지 확인후 없을 경우 `dabory.data-linker.js`에서 제공하는 `api23Js` 메서드를 사용해 `setup-get` HOST의 API를 호출합니다.
- 호출 시, 요청 데이터(`SetupCode`와 `BrandCode`)를 GUEST로 전송하여 API에서 필요한 비밀번호 정책 정보를 가져옵니다.

이렇게 API23JS는 HOST와 GUEST간의 안전한 데이터 통신을 가능하게 합니다.

- **HOST는 API23E\_KEY\_PAIR를 생성하고 API23\_KEY를 발급**하여 GUEST에게 제공합니다.
- GUEST는 **API23\_KEY를 사용해 HOST API를 호출**하여 필요한 데이터를 가져옵니다.  
    이를 통해 HOST의 API 데이터를 GUEST 사이트에서 효율적으로 사용할 수 있습니다.

# [WEB] Api23KeyPair를 통한 통신방법

#### **Api23KeyPair란?**

##### **Api23KeyPair**는 HOST(GUEST로부터 API 요청을 받는 사이트)와 **GUEST(HOST의 API를**

##### **사용하는 사이트)** 간의 **안전한 데이터 통신을 위해 생성되는 암호화 키 쌍**입니다.

##### 이 키는 HOST와 GUEST 간의 통신에서 인증 및 권한 확인 역할을 하며, 민감한 데이터를 교환할 때 이를 안전하게 보호합니다.

# [Native-App] Api23KeyPair를 통한 통신방법

#### **Api23KeyPair란?**

##### **Api23KeyPair**는 HOST(GUEST로부터 API 요청을 받는 사이트)와 **GUEST(HOST의 API를**

##### **사용하는 사이트)** 간의 **안전한 데이터 통신을 위해 생성되는 암호화 키 쌍**입니다.

##### 이 키는 HOST와 GUEST 간의 통신에서 인증 및 권한 확인 역할을 하며, 민감한 데이터를 교환할 때 이를 안전하게 보호합니다.

# [JavaSript] OwnerKey 사용하기

1\.