Skip to main content

[JavaScript] Protocal22-API 사용예제

 시작하기 전에

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

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

 JavaScript 방식의 API 호출 흐름

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

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

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

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

image.png

 script 선언과 변수설정

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

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

<script src="/js/dabory.owner-key-linker.js?serverUrl=&ownerKey="></script>

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

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

 API 요청 함수(OwnerApp)

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

$.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 -> 비동기 요청)

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

 API 요청 함수(OwnerApi)

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

$.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 -> 비동기 요청)

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

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

 OwnerApi vs OwnerApp

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

두 함수에서 사용할 수 있는 API 목록은 링크를 참고해주시기 바랍니다.
OwnerApp()
OwnerApi()
차이점

 

게스트앱에서 메인앱에 구현된 백엔드 API를 호출할때 (메인앱의 백엔드에 로직 구현 필요)

 

게스트 앱에서 메인앱의 백엔드 API를 거쳐  api 서버에 구현된 api를 호출할 때 (api 서버에 구현된 로직을 호출)
호출 흐름 guest (frontend)-> main (backend) -> guest(frontend) guest (frontend)-> main (backend) -> api 서버 (backend) -> guest(frontend)
 ownerApi 호출 예제
- API를 호출하여 비밀번호 정책 (passwd-policy) 데이터를 가져오는 예제입니다.
$.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)를 발송하는 예제입니다.
$.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)를 발송하는 예제입니다.
$.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를 호출하여 회원가입을 요청하는 예제입니다.

$.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']이 반환됩니다.


No Comments
Back to top