# [JavaScript] Protocal22-API 사용예제

#####  **시작하기 전에**

이 문서는 Dabory Protocol22-API for JavaScript를 사용하여 **Main App과 Guest App**을 개발할 때 필요한 참고 정보를 제공하며 **JavaScript를 활용한 클라이언트 측 API 호출 방식**을 설명합니다.

예제실행전에 아래 준비사항들을 반드시 준비해주시기 바랍니다.

- [ ] script 다운로드
- [ ] [app 등록하기](https://manual.dabory.com/books/api-documents/page/app)

#####  **JavaScript 방식의 API 호출 흐름**

1\. 클라이언트 측 JavaScript에서 **OwnerKey 및 MAIN APP의 URL 정보를 설정**합니다.

2\. JavaScript에서 ownerApp() 함수를 사용하여 API 요청을 보냅니다.

3\. API 응답을 받아 클라이언트 측에서 데이터를 처리합니다.

> ## JavaScript 사용예제 (회원가입 구현)

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

#####  **script 선언과 변수설정**

javascript 방식에서는 script src 속성의 파라미터 url로 ServerUrl과 OwnerKey를 직접 입력합니다.

```javascript
<script src="/js/dabory.owner-key-linker.js?serverUrl=https://www.daborysso.com&ownerKey=zEUhgZEpPbFpz/cIghtYCsoFlNi8JX3Lh45ank1s+w2PGuK4phOxmemgKuuIJ/OQZlrpdSzlK03MpBLBSo1o537brbDPKaq9ydK8QK8JgEAYGKSNzD8W6dJhSIjPfxLJu+cma0wcAMDmSV7DMhwwgiwVb2ADWu+QOVKpU+VmIR1TBIfT00EPpuW1Ju+jop8WcBEJRrpEAGLK5jcRnAGSXaDTumqEVsLRSq87hVqRJGImIE7Bf68Ix4b2PqgVhTUY1Bpalw=="></script>
```

&lt;script src="/js/dabory.owner-key-linker.js?serverUrl=&amp;ownerKey="&gt;&lt;/script&gt;

serverUrl : MAIN APP의 도메인주소를 입력합니다.

ownerKey : MAIN\_APP 등록시 발급받은 OwnerKey를 입력합니다.

#####  **API 요청 함수(OwnerApp)**

JavaScript에서 API를 호출할 때는 ownerApp() 함수를 사용할 수 있습니다. ajax를 사용하여 API 요청을 보낼 때 사용됩니다.

```javascript
$.fn.ownerKeyLinker.ownerApp = function (url, request, callback, async = true) {
    getParameter();

    $.ajax({
        // ${$.fn.ownerKeyLinker.serverUrl} : script 파라미터 url에 입력한 serverUrl
        url: `${$.fn.ownerKeyLinker.serverUrl}/dabory-app/${url}`, //ex. https://www.daborysso.com/dabory-app/auth/signup
        data: JSON.stringify(request),
        beforeSend: function (xhr) {
            xhr.setRequestHeader('OwnerKey', $.fn.ownerKeyLinker.ownerKey);
        },
        method: 'POST',
        dataType: 'json',
        async: async,
    })
    .done(function (json) {
        callback(json);
    })
    .fail(function (json, textStatus, errorThrown) {
        callback(json);
        iziToast.error({ title: 'Error', message: 'Dabory Owner App Error' });
    });
};

```

url : API 요청의 엔드포인트( ex. www.daborysso.com/dabory-app/auth/signup)

request : 서버로 전송할 요청데이터 (JSON형식)

callback : 응답을 처리할 콜백함수

async : 요청의 동기/비동기 여부 (기본값 true -&gt; 비동기 요청)

beforeSend: 요청 이전에 setRequestHeader를 통해 OwnerKey를 header에 넣습니다.

#####  **API 요청 함수(OwnerApi)**

**JavaScript에서 API를 호출할 때는 ownerApi() 함수를 사용할 수 있습니다. ajax를 사용하여 API 요청을 보낼 때 사용됩니다.**

```javascript
$.fn.ownerKeyLinker.ownerApi = function (url, request, callback, async = true) {
    getParameter(); // $.fn.ownerKeyLinker.serverUrl과 $.fn.ownerKeyLinker.ownerKey를 추출하는 함수

    $.ajax({
        url: `${$.fn.ownerKeyLinker.serverUrl}/dabory-app/call-owner-api`,
        data: JSON.stringify(request),
        beforeSend: function (xhr) {
            xhr.setRequestHeader('OwnerKey', $.fn.ownerKeyLinker.ownerKey);
            xhr.setRequestHeader('Url', url);
        },
        method: 'POST',
        dataType: 'json',
        async: async,
    })
    .done(function (json) {
        callback(json);
    })
    .fail(function (json, textStatus, errorThrown) {
        callback(json);
        iziToast.error({ title: 'Error', message: 'Dabory Owner API Error' });
    });
};


```

url : API 요청의 엔드포인트( ex. www.daborysso.com/dabory-app/call-owner-api)

request : 서버로 전송할 요청데이터 (JSON형식)

callback : 응답을 처리할 콜백함수

async : 요청의 동기/비동기 여부 (기본값 true -&gt; 비동기 요청)

beforeSend: 요청 이전에 setRequestHeader를 통해 OwnerKey를 header에 넣습니다.

OwnerApi 함수는 OwnerApp 함수와는 다르게 api 서버에 요청할 api url을 header에 넣습니다.

#####  **OwnerApi vs OwnerApp**

두 함수는 모두 다보리 API와 통신하는 역할을 하지만 요청을 처리하는 방식과 목적이 다릅니다.

두 함수에서 사용할 수 있는 API 목록은 [링크](https://manual.dabory.com/books/api-documents/page/protocol22-api)를 참고해주시기 바랍니다.

<table border="1" id="bkmrk-ownerapp%28%29-ownerapi%28" style="border-collapse: collapse; width: 99.8765%; height: 191.594px;"><colgroup><col style="width: 13.2428%;"></col><col style="width: 43.0711%;"></col><col style="width: 43.688%;"></col></colgroup><tbody><tr style="height: 64.8281px;"><td class="align-center" style="height: 64.8281px;">  
</td><td class="align-center" style="height: 64.8281px;">##### **OwnerApp()**

</td><td class="align-center" style="height: 64.8281px;">##### **OwnerApi()**

</td></tr><tr><td class="align-center">차이점</td><td>게스트앱에서 메인앱에 구현된 백엔드 API를 호출할때 (메인앱의 백엔드에 로직 구현 필요)

</td><td>게스트 앱에서 메인앱의 백엔드 API를 거쳐 api 서버에 구현된 api를 호출할 때 (api 서버에 구현된 로직을 호출)

</td></tr><tr style="height: 46.5938px;"><td class="align-center" style="height: 46.5938px;">호출 흐름</td><td style="height: 46.5938px;">guest (frontend)-&gt; main (backend) -&gt; guest(frontend)</td><td style="height: 46.5938px;">guest (frontend)-&gt; main (backend) -&gt; api 서버 (backend) -&gt; guest(frontend)</td></tr></tbody></table>

#####  **ownerApi 호출 예제**

##### - API를 호출하여 **비밀번호 정책 (passwd-policy) 데이터를 가져오는 예제입니다.**

```javascript
$.fn.ownerKeyLinker.ownerApi(
    'remote-signup-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');
    }
);

```

**첫번째 인자값 : api 서버의 url**

**두번쨰 인자값 : api 서버 요청시 body에 포함될 request 객체**

**세번째 인자값 : response를 받아온뒤 실행될 callback 함수**

#####  **ownerApp 호출 예제**

##### **- API를 호출하여 휴대폰 인증코드 (auth/send-smsConfirm)를 발송하는 예제입니다.**

```javascript
$.fn.ownerKeyLinker.ownerApp('auth/send-smsConfirm', {
    "MobileNo": $('#mobile-no-txt').val(),
}, function (response) {
    if (response['error']) {
        $($this).prop('disabled', false);
        SmsNumber = null;
        iziToast.error({ title: 'Error', message: response['message'] });
    } else {
        SmsNumber = response['data'];
        iziToast.success({ title: 'Success', message: '휴대전화 전송 성공' });
    }
});

```

##### **- API를 호출하여 이메일 인증코드 (auth/send-emailConfirm)를 발송하는 예제입니다.**

```javascript
$.fn.ownerKeyLinker.ownerApp('auth/send-emailConfirm', {
    "Email": $('#email-txt').val(),
}, function (response) {
    if (response['error']) {
        $($this).prop('disabled', false);
        EmailNumber = null;
        iziToast.error({ title: 'Error', message: '인증메일 전송 에러' });
    } else {
        EmailNumber = response['data'];
        iziToast.success({ title: 'Success', message: '인증메일 전송 성공' });
    }
});

```

**API를 호출하여 회원가입을 요청하는 예제입니다.**

```javascript
$.fn.ownerKeyLinker.ownerApp('auth/signup', {
    "Email": $('#email-txt').val(),
    "Password": $('#password-txt').val(),
    "MobileNo": $('#mobile-no-txt').val(),
    "FirstName": $('#first-name-txt').val(),
}, function (response) {
    if (response['error']) {
        if (response['code'] === 701) {
            iziToast.info({ 
                title: 'Info', 
                message: '해당 이메일은 이미 다보리 통합 회원가입이 완료되었습니다. 로그인 버튼을 눌러 바로 로그인해 주세요.' 
            });
        } else if (response['validator']) {
            showErrorMessages(response['message']);
        } else {
            iziToast.info({ title: 'Info', message: response['message'] });
        }
        click_submit_btn(self, false);
    } else {
        iziToast.success({ title: 'Success', message: $('#action-completed').text() });
        $('#join').modal('hide');
    }
});

```

**첫번째 인자값 : main app의 백엔드 api의 url을 입력합니다.**

**두번쨰 인자값 : main app의 백엔드 api url입니다.**

**세번째 인자값 : response를 받아온뒤 실행될 callback 함수입니다.**

**response\['error'**\] : api의 response status가 200이 아닐 경우 respons\['error'\]이 반환됩니다.