[cafe24 app개발] 코드 받기

[cafe24 app개발] 코드 받기

cafe24에서 필요한 token 을 발급 받기 위해서 는 code가 필요합니다.

사용자는 앱 관리 하면에 들어가면 아래 적힌 APP URL 을 먼저 들어가게 됩니다.

저의 경우 APP URL 사이트는 아래와 같이 생겼습니다.

먼저 현재 접속한 사람의 정보가 필요합니다.

그부분은 현재 개발된 APP의 페이지 에서

저 같은 경우 

mounted는 vue js 에서 페이지 로딩 완료시 호출되는 메소드 입니다. . 

,mounted:function(){

console.log(window.location.search);

}

이렇게 하면

https://{{AppUrl}}/?is_multi_shop={{멀티쇼핑몰여부}}&lang={{쇼핑몰언어}}&mall_id={{몰아이디}}&shop_no={{shop_no}}& timestamp= {{timestamp}}&user_id={{로그인아이디}}&user_name={{로그인사용자이름}}&user_type={{사용자유형}}&hmac={{검증용 key}}

위의 URL에 해당 되는 정보가 보이게 됩니다. 그럼 이정보로 

그리고 아래의 주소로 요청을 해야 코드 정보를 받아 올수 있습니다. 

GET 으로 위의 URL을 정보를 요청하면 되는데 꼭 웹 브라우저를 통해서 해야 합니다.

그래서

mounted(){

var query = this.searchToObject()

var params = new URLSearchParams();

var urls = 'https://'+query.mall_id+'.cafe24api.com/api/v2/oauth/authorize'

params.append('response_type','code')

params.append('client_id',"4X39PT10HBbt3fZqmetweV")

params.append('state',"xyz")

params.append('redirect_uri',"https://webrot360.tk:8080/#/web360")

params.append('scope',"mall.read_product,mall.write_product,mall.read_design,mall.write_design")

console.log(urls + "?" + params.toString());

window.location.href = urls + "?" + params.toString(); //params.toString() 는 쿼리를 만들어 줍니다.

},methods:{

searchToObject(){ //해당 코드는 window.location.search를 정리된 객체로 만들어 줍니다.

var pairs = window.location.search.substring(1).split("&"),

obj = {},

pair,

i;

for ( i in pairs ) {

if ( pairs[i] === "" ) continue;

pair = pairs[i].split("=");

obj[ decodeURIComponent( pair[0] ) ] = decodeURIComponent( pair[1] );

}

return obj;

}

}

위와 같이 = window.location.href 를 통해서 바로 URL 을 바꿔 버립니다.

그럼 redirect_uri 로 웹페이지가 바뀌 면서 URL 뒤에 code 정보를 같이 줍니다.

위 해당 처리를 하고 나면 'redirect_uri',"https://webrot360.tk:8080/#/web360"  로 이동한것 알수 있습니다.

현재 접속한 페이지 에서 
https://webrot360.tk:8080/#/web360 의 스크립트에서

,mounted:function(){

console.log("code = "+this.$route.query.code);

}

그럼 위와 같이 하면

위와 같이 코드를 받을수 있음을 알수 있습니다.