![[API] Cafe24, OAuth 인증 과정 구현하기(2) [카페24 쇼핑몰 앱 인증코드 발급 받기]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb80sLr%2Fbtsv8fmCaXV%2F34bmWps27kWnKiELKhKML0%2Fimg.png)
1) OAuth 인증 과정 구현하기(1) : 개발자센터 세팅
2) OAuth 인증 과정 구현하기(2) : 인증코드 발급 받기
3) OAuth 인증 과정 구현하기(3) : 엑세스 토큰 발급 받기
4) Cafe24 쇼핑몰에 스크립트 태그 심기
5) Cafe24 쇼핑몰 로그인 여부 확인하기
6) Cafe24 API, 로컬환경에서 테스트하는 방법
7) Cafe24 API, 호출건수 제한, 요청건수 제한의 의미
- Cafe24, OAuth 인증 과정 구현하기(2)
이전 게시글에서 카페24 API에 대한 개념과 개발자센터 환경세팅을 하였다.
이번에는 카페24 앱에서 OAuth 인증코드를 받아볼 예정이다.
- OAuth 인증코드 받기
OAuth 인증코드를 받기 위해서는 프로젝트가 서버에 배포되어 있어야 한다.
(또한 카페24 API는 https로만 통신이 가능하기에 SSL도 적용이 되어 있어야 한다.)
서버 세팅 및 배포 등은 아래 포스팅을 참고하면 좋다.
[Nginx] AWS 가상머신 생성, 원격 데스크톱 연결 [웹 서버 구축을 위한 기본적인 환경 조성]
1. AWS 가상머신 세팅하기 클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services AWS IoT에 대한 새로운 소식 산업, 소비자, 상업 및 자동차 워크로드에 대한 IoT 데이터를 수집, 저장 및 분석하
yermi.tistory.com
[Tomcat] 톰캣으로 war 파일 배포하기 [Apache Tomcat을 활용한 war 파일 배포]
1. Tomcat Service Installer 다운로드 Apache Tomcat® - Apache Tomcat 8 Software Downloads Welcome to the Apache Tomcat® 8.x software download page. This page provides download links for obtaining the latest versions of Tomcat 8.x software, as well as
yermi.tistory.com
index 페이지는 아래와 같이 구성하였다. 코드를 하나하나 추가해볼 예정이다.
id가 "token-url"인 a 태그에 인증코드를 받아올 url을 세팅해줄 것이다.
<body>
<p id="app">앱실행 완료 / <a href="#" id="token-url">API 자격증명 얻기</a></p>
</body>
<!-- 아래와 같은 url을 세팅해줄 것이다. -->
https://{mall_id}.cafe24api.com/api/v2/oauth/authorize?response_type=code&client_id={client_id}&state={encode_csrf_token}
&redirect_uri={encode_redirect_uri}&scope={scope}
먼저, 개발자센터에서 앱 테스트 실행을 할 것이다. 앱을 실행하는 경우, 아래와 같이 URL이 만들어진다.
(AppUrl은 개발자센터에서 입력했던 App URL이다.)
https://{{AppUrl}}/?is_multi_shop={{멀티쇼핑몰여부}}&lang={{쇼핑몰언어}}&mall_id={{mall_id}} &shop_no={{shop_no}}& timestamp= {{timestamp}}& user_id={{로그인아이디}}&user_name={{로그인사용자이름}} &user_type={{사용자유형}}&hmac={{검증용 key}}
여기서 우리가 사용해야 할 파라미터는 mall_id이다. 아래의 스크립트 코드로 url을 세팅해준다.
redirect_uri에는 특수문자가 있기에 URL encoding을 해줘야한다.
(function() {
const url = new URL(window.location.href);
const urlParams = url.searchParams;
const mallId = urlParams.get('mall_id');
if(mallId) {
let tokenUrl = 'https://' + mallId + '.cafe24api.com/api/v2/oauth/authorize?'
+ 'response_type=code&client_id=[클라이언트 ID]&state=S256'
+ '&redirect_uri=[Redirect URI]' // 인증코드를 받을 URI. ex) https%3A%2F%2Fyermi.co.kr
+ '&scope=[앱 사용 시 필요한 권한들]'; // ','로 구분한다. ex) mall.read_application,mall.write_application,...
document.getElementById("token-url").href = tokenUrl;
}
})();
[꿀팁] URL 인코딩, 디코딩(URL Encoding, Decoding) 사이트 추천 [urlencoder, Encode to URL-encoded format]
- URL 인코딩, 디코딩 사이트 추천 URL 인코딩이란 URL에서 URL로 사용할 수 없는 문자 혹은 URL로 사용할 수 있지만 의미가 왜곡될 수 있는 문자들을 '%XX'의 형태로 변환하는 것을 말한다. URL 디코딩
yermi.tistory.com
[JS] 현재 페이지 URL과 파라미터 가져오기 [URLSearchParams 객체 사용하여 parameter를 js 변수에 담기]
- 현재 페이지 URL과 파라미터 가져오기 1. 현재 페이지 URL 가져오기 // 현재 페이지의 URL 가져오기 window.location.href // https://yermi.tistory.com/?id=test&pw=1234 // 현재 페이지의 쿼리스트링만 가져오기 windo
yermi.tistory.com
이제 페이지가 띄어지는 동시에 'token-url'이 세팅이 된다.
'API 자격증명 얻기'를 누르면 아래처럼 인증코드인 code를 얻을 수 있다.
- index.html 전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>excel-bucket</title>
</head>
<body>
<p id="app">앱실행 완료 / <a href="#" id="token-url">API 자격증명 얻기</a></p>
</form>
<script>
(function() {
const url = new URL(window.location.href);
const urlParams = url.searchParams;
const mallId = urlParams.get('mall_id');
if(mallId) {
let tokenUrl = 'https://' + mallId + '.cafe24api.com/api/v2/oauth/authorize?'
+ 'response_type=code&client_id=[클라이언트 ID]&state=S256'
+ '&redirect_uri=[Redirect URI]'
+ '&scope=[앱 사용 시 필요한 권한들]';
document.getElementById("token-url").href = tokenUrl;
}
})();
</script>
</body>
OAuth의 인증코드까지 받아보았다. 이제 인증코드로 엑세스 토큰을 받아볼 것이다.
[API] Cafe24, OAuth 인증 과정 구현하기(3) [카페24 쇼핑몰 앱 엑세스 토큰 발급 받기]
[API] Cafe24, OAuth 인증 과정 구현하기(2) [카페24 쇼핑몰 앱 인증코드 발급 받기] [API] Cafe24, OAuth 인증 과정 구현하기(1) [Admin API와 Front API의 차이, Redirect URI란, 카페24 쇼핑몰 앱 만 - Cafe24, OAuth 인증
yermi.tistory.com
- 참고자료
Cafe24 Developers
developers.cafe24.com