상세 컨텐츠

본문 제목

Front JavaScript SDK를 이용한 Cafe24 API 연동

개발/PHP

by 라이언 칸 2025. 3. 24. 23:41

본문

Cafe24 API를 활용하면 쇼핑몰 기능을 확장하고 커스터마이징할 수 있지만, 여기서는 Front JavaScript SDK와 Admin API를 간단히 사용하는 방법이다.

 

참조한 API 문서
Front JavaScript SDK : https://developers.cafe24.com/app/front/common/frontsdk
Create a script tag : https://developers.cafe24.com/docs/ko/api/admin/#create-a-script-tag
script list : https://developers.cafe24.com/docs/ko/api/admin/#retrieve-a-list-of-script-tags (script_no 조회시 사용함)
회원정보 조회 : https://developers.cafe24.com/app/front/common/frontsdk

API를 사용하려면 SSL이 붙은 도메인이 존재해야 하고, CORS가 허용이 되는 웹서버가 구성되어 있어야 한다.

ServerSide Script로는 php를 사용했다.

 

Oauth 인증처리하기 

<?php
// https://mailID.cafe24api.com/api/v2/oauth/authorize?response_type=code&client_id=clientID&state=MTIzNDU2Nzg&redirect_uri=https://devsite/api/run.php&scope=mall.read_customer 
// 이 주소로 이동하기 위해서 아래처럼 구성했다.

$sMallID = 'mailID';
$sClientID = 'clientID';
$sAuthCodeReceiveUrl = 'https://devsite/api/run.php';   // 개발자 센터 Redirect URL(s)에 등록된, 응답받을 인증코드를 처리할 url
$sScope = 'mall.read_customer'; // 예시) 상품분류 (읽기권한), 상품 (읽기+쓰기권한)
$aState = array(
    'mall_id' => $sMallID,         // 고정
    'kan'  => time()       // 코드발급 이후 처리에 필요한 값 필요시 추가
);

// 이하 공통
$sAuthCodeRequestUrl = sprintf("https://%s.cafe24api.com/api/v2/oauth/authorize?", $sMallID);
$aRequestData = array(
    'response_type' => 'code',
    'client_id'     => $sClientID,
    'state'         => base64_encode(json_encode($aState)),
    'redirect_uri'  => $sAuthCodeReceiveUrl,
    'scope'         => $sScope,
);
$sUrl = $sAuthCodeRequestUrl . http_build_query($aRequestData);

header('Location: ' . $sUrl);

 

이 페이지로 접근하면 카페24의 대표운영자 아이디로 로그인하라고 요구한다.

로그인후 앱의 승인을 요구한다.

동의하면 redirect uri(run.php)로 이동하게 되면서 결과값을 가져오게 된다.

 

 

 

 

 

 

 

 

 

 

 

run.php (redirect uri) 

<?php
$mallid = 'mailID';
$clientid = 'clientID';
$client_secret = 'xxxxxxxxxxxxxxxxxx';
$code = $_REQUEST['code'];
$redirect_uri = 'https://devsite/api/run.php';
$base64 = base64_encode($clientid.':'.$client_secret);

$data = 'grant_type=authorization_code&code='.$code.'&redirect_uri='.$redirect_uri;
$curl = curl_init();
curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://'.$mallid.'.cafe24api.com/api/v2/oauth/token',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_POSTFIELDS => $data,
  CURLOPT_HTTPHEADER => array(
    'Authorization: Basic '.$base64,
    'Content-Type: application/x-www-form-urlencoded'
  ),
));
$response = curl_exec($curl);
$err = curl_error($curl);
if ($err) {
  echo 'cURL Error #:' . $err;
} else {
  echo $response;
}
?>

 

 

그럼 아래와 같은 결과값을 출력하게 된다.

{"access_token":"xxxxxxxxx","expires_at":"2023-08-02T19:45:00.000","refresh_token":"xxxxxxxxx","refresh_token_expires_at":"2023-08-16T17:45:00.000","client_id":"clientID","mall_id":"mailID","user_id":"mailID","scopes":["mall.read_customer"],"issued_at":"2023-08-02T17:45:00.000","shop_no":"1"}

토큰을 만들고 난뒤, 매번 토근을 요구하기 위해서 대표담당자로 로그인을 해야 하는데, 그럼 많이 번거롭다.

그래서 이때 사용하는 것이 refresh_token 이다. 이것으로 access_token 을 갱신해서 로그인 필요없이 유지를 할수가 있다.

단 access_token, refresh_token 관리에 주의해야 하며, 외부 노출되었을때는 생각해서 refresh_token 갱신 주기를 너무 길게 잡지 않아야 한다.

심한 곳은 5분 단위로 한다고 하던데, 대규모 사이트가 아니면 그냥 1시간정도면 되지 않을까 싶다.(추천하는거 아님)

 

 

스크립트 추가(Create a script tag) 하기

cafe24의 front sdk를 사용하기 위해서는 스크립트를 삽입해야 한다.

 

여기서 integrity를 중요하다.. 막 생성한 것이 아니고, 해당 파일(kan.js)의 코드에 따라서 해쉬값이 변경된다.

https://www.srihash.org/ 에서 해당 파일의 해쉬값을 생성하거나 별도 코드로 구성해야 한다.

kan.js 파일을 생성 및 수정하고, 꼭 integrity를 새로이 생성해야 한다. (즉, 파일 크기나 내요에 따라서 해시값이 변경된다.)

<?php
$access_token = $_REQUEST['access_token'];
$version = $version;

$data = '{
	"shop_no": 1,
	"request": {
		"src": "https://devsite/api/kan.js",
		"display_location": [
			"MAIN"
		],
		"integrity": "sha384-UttGu98Tj02YSyWJ5yU0dHmx4wisywedBShWqEz+TL3vFOCXdeMWmo6jMVR8IdFo"
	}
}';

$curl = curl_init();
curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://'.$mallid.'.cafe24api.com/api/v2/admin/scripttags',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_POSTFIELDS => $data,
  CURLOPT_HTTPHEADER => array(
    'Authorization: Bearer '.$access_token,
    'Content-Type: application/json',
    'X-Cafe24-Api-Version: '.$version
  ),
));
$response = curl_exec($curl);
$err = curl_error($curl);
if ($err) {
  echo 'cURL Error #:' . $err;
} else {
  echo $response;
}
?>

 

그래서 아래처럼 구성했더니 , 아래와 같은 오류를 발생시켰다.

{"error":{"code":422,"message":"The CORS (Cross-origin resource sharing) header of the script in the src attribute must be \"Access-Control-Allow-Origin: *\". (parameter.src)"}}

 

 

CORS 오류 해결

이는 httpd.conf나 .htaccess파일에서 Access-Control-Allow-Origin 를 지정해 줘야 한다.

 

a2enmod headers 를 활성화 시켜야 한다고 하는데, 만일 안 되면 이것을 체크해자.

 

제대로 세팅이 되면 아래처럼 Access-Control-Allow-Origin 가 * 으로 세팅된 것이 보이게 될것이다.

 

 

 

 

 

 

정상시 리턴값

{"scripttag":{"shop_no":1,"script_no":"xxxxxx","client_id":"xxxxxx","src":"https:\/\/devsite\/api\/kan.js","display_location":["MAIN"],"exclude_path":null,"skin_no":null,"integrity":"sha384-UttGu98Tj02YSyWJ5yU0dHmx4wisywedBShWqEz+TL3vFOCXdeMWmo6jMVR8IdFo","created_date":"2023-08-06T18:07:28+09:00","updated_date":"2023-08-06T18:07:28+09:00"}} "script_no":"xxxxx"

 

 

kan.js

(function(CAFE24API) {

})(CAFE24API.init({
	 client_id : 'xxxxxxxx',  // 앱의 App Key를 설정
	 version : '2023-06-01'   // 적용할 버전을 설정
}));

CAFE24API.getEncryptedMemberId('xxxxxxxxx',function(err, res){
	if (err) {
		console.log(err);
	} else {
		console.log(res);
		setToken(res.member_id);
	}
});

 

kan.js 파일을 생성 및 수정하고, 꼭 integrity를 새로이 생성해야 한다. (즉, 파일 크기나 내요에 따라서 해시값이 변경된다.)

kan.js 파일내에 일반적인 function을 넣으면 제대로 작동을 못하니, cafe24API만 사용하고..

그 안에서 일반 함수를 호출하는 형태로 불러오면 된다.

여기서는 setToken() 이 cafe24 에디터 편집으로 메인 html페이지에 존재하는 함수이다.

 

 

script 수정/삭제 하기

스크립트 추가후 리턴값을 저장해 두어야 차후 수정 및 삭제가 가능한다.

삭제시 코드(del_script.php)

<?php
$access_token = $_REQUEST['access_token'];
$version = $version;

$curl = curl_init();
curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://'.$mallid.'.cafe24api.com/api/v2/admin/scripttags/xxxxxxx', // <== 리턴값에서 가져온 script_no
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_CUSTOMREQUEST => 'DELETE',
  CURLOPT_HTTPHEADER => array(
    'Authorization: Bearer '.$access_token,
    'Content-Type: application/json',
    'X-Cafe24-Api-Version: '.$version
  ),
));

$response = curl_exec($curl);
$err = curl_error($curl);
if ($err) {
  echo 'cURL Error #:' . $err;
} else {
  echo $response;
}
?>

 

 

업데이트시(update_script.php)

<?php
$access_token = $_REQUEST['access_token'];
$version = $version;
$script_no = 'xxxxxxxx'; // 이 코드가 중요

$data = '{
	"shop_no": 1,
	"request": {
		"src": "https://devsite/api/kan.js",
		"display_location": [
			"MAIN"
		],
		"integrity": "sha384-blguk2PWxdOq8Y5/p/8lv47lzbaWnkbnBU+y2ajvBgCdAIPREg5bsZpBlBRah1xE"
	}
}';

$curl = curl_init();
curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://'.$mallid.'.cafe24api.com/api/v2/admin/scripttags/'.$script_no,
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_CUSTOMREQUEST => 'PUT', // <== 여기가 put이 된다.
  CURLOPT_POSTFIELDS => $data,
  CURLOPT_HTTPHEADER => array(
    'Authorization: Bearer '.$access_token,
    'Content-Type: application/json',
    'X-Cafe24-Api-Version: '.$version
  ),
));

$response = curl_exec($curl);
$err = curl_error($curl);
if ($err) {
  echo 'cURL Error #:' . $err;
} else {
  echo $response;
}

 

 

 

JWT 디코드(복호화)하기

https://jwt.io/ 에서 바로 디코드가 가능하다.

cafe24에서는 HS512 알고리즘을 사용한다.

{
  "typ": "JWT",
  "alg": "HS512"
}

티스토리툴바