여러 스토어에서 하나의 계정
SDK를 사용하면 앱에서 쓰는 계정으로 스토어에 로그인할 수 있습니다. 이 문서는 지원되는 스토어에서 사용할 수 있는 메서드를 설명합니다.
중앙 로그인 창에서는 로그인과 계정 생성을 제공합니다. 이 화면은 현재 프랑스어와 영어만 지원합니다. 문서는 열두 언어로 제공되지만, 문서의 언어 수와 로그인 화면의 지원 언어는 다릅니다.
로그인 추가하기
지원되는 스토어에는 window.rankappConnect가 이미 로드되고 설정되어 있습니다. login(), getSession(), logout() 세 메서드를 사용하세요. 추가 설치는 필요 없습니다. 전체 예제는 버튼과 접근성 상태 메시지만 추가합니다.
클릭 이벤트에서 login()을 직접 호출하세요. Promise는 {status: "success", session}, {status: "cancelled"}, {status: "redirecting"} 중 하나를 반환합니다. 오류는 안정적인 코드로 Promise를 거부합니다. 모바일이나 팝업 차단 시 리디렉션합니다. returnTo는 스토어 내부여야 합니다.
const connect = window.rankappConnect;
function onSignInClick() {
return connect.login({ returnTo: '/account' });
}
function readSession() {
return connect.getSession();
}
function onSignOutClick() {
return connect.logout();
}버튼과 메시지를 포함한 전체 예제 보기
<button type="button" id="connect-login">RankAPP으로 로그인</button>
<button type="button" id="connect-logout" hidden>로그아웃</button>
<p id="connect-status" role="status" aria-live="polite"></p>
<script>
const connect = window.rankappConnect;
const login = document.querySelector('#connect-login');
const logout = document.querySelector('#connect-logout');
const status = document.querySelector('#connect-status');
const copy = {
"cancelled": "로그인이 취소되었습니다. 다시 시도할 수 있습니다.",
"redirecting": "로그인 페이지로 이동 중…",
"login": "RankAPP으로 로그인",
"logout": "로그아웃",
"signedOut": "로그아웃 상태입니다.",
"signedIn": "로그인: ",
"error": "로그인할 수 없습니다. 다시 시도하세요.",
"pending": "로그인 중…"
};
function render(session) {
status.textContent = session.authenticated
? copy.signedIn + session.user.username : copy.signedOut;
logout.hidden = !session.authenticated;
}
function failure() {
status.textContent = copy.error;
}
function busy(value) {
login.disabled = logout.disabled = value;
}
login.addEventListener('click', async () => {
busy(true);
status.textContent = copy.pending;
let redirecting = false;
try {
const result = await connect.login({ returnTo: '/account' });
if (result.status === 'success') render(result.session);
else if (result.status === 'cancelled') status.textContent = copy.cancelled;
else {
redirecting = true;
status.textContent = copy.redirecting;
}
} catch (error) { failure(); }
finally { if (!redirecting) busy(false); }
});
logout.addEventListener('click', async () => {
busy(true);
try { render(await connect.logout()); }
catch (error) { failure(); }
finally { busy(false); }
});
busy(true);
connect.getSession().then(render).catch(failure)
.finally(() => busy(false));
</script>세션 표시하기
getSession()은 서버를 조회하며 {authenticated: false}는 로그아웃 상태를 의미합니다. 인증된 세션에는 user(userId, username, avatarUrl, language), 관리형 스토어에는 orders도 포함됩니다. 페이지 로드와 리디렉션 후에 호출하고 URL 매개변수로 신원을 추측하지 마세요.
서비스 장애는 오류로 유지됩니다. STOREFRONT_SESSION_ERROR를 로그아웃 상태로 바꾸지 않습니다. 재시도 안내를 표시하세요. login()은 취소와 실패를 구분하며 logout()은 스토어 세션만 종료합니다.
인증과 쿠키
SDK는 로컬 개발을 포함한 모든 사이트와 엔드포인트에 HTTPS를 요구합니다. 브라우저가 신뢰하는 인증서가 있는 로컬 HTTPS 서버를 사용하세요. 인증에는 HTTP가 절대 허용되지 않습니다.
비밀번호는 판매자 사이트가 아니라 auth.rankapp.io에서 입력합니다. 일회용 코드와 PKCE S256으로 로그인 창을 최초 요청에 연결합니다. 코드 교환과 토큰 처리는 서버에서 이루어지며, 팝업이 보내는 완료 메시지에는 토큰이 포함되지 않습니다.
세션 쿠키에는 HttpOnly, Secure, SameSite=Lax가 적용됩니다. 공유 Domain 속성 없이 각 호스트에만 속합니다. 중앙 인증 세션과 개별 스토어 세션은 별개입니다. logout()은 해당 스토어의 세션을 종료하며, 중앙 계정의 로그인까지 자동으로 종료하지는 않습니다.
스토어 서버의 역할
이 문서는 SDK 1.1.0을 다룹니다. 호환되는 스토어에서는 사전 설정된 window.rankappConnect 클라이언트만 사용하세요. 서버가 로그인, 세션, 로그아웃을 관리하고 클라이언트가 필요한 서명된 통신을 처리합니다. 페이지에서 엔드포인트나 어댑터를 설정할 필요가 없습니다.
미리보기에서 테스트
미리보기에서는 실제 계정으로 고객 입장에서 로그인과 로그아웃을 시험할 수 있습니다. 비공개 초안에 접근하는 권한은 따로 관리되므로, 미리보기를 열었다고 구매자가 자동으로 로그인되지는 않습니다. 미리보기의 결제 기능은 비활성화되어 있습니다.
로그인 성공, 취소, 팝업 닫기, 모바일 복귀, 로그아웃 후 재로그인을 확인하세요. 운영 환경에서는 스토어가 게시되어 있고 접근 가능해야 합니다. 인증 성공은 결제 완료를 의미하지 않습니다. 결제 결과는 로그인 상태와 별도로 확인하고 안내해야 합니다.
외부 사이트 연동 준비
독립적인 외부 사이트의 연동 등록은 아직 열려 있지 않습니다. 공개하려면 클라이언트 등록, 허용된 복귀 URL 검증과 접근 권한 정의가 먼저 필요합니다. 브라우저 라이브러리만으로 이 서버 측 절차를 대신할 수는 없습니다.
호환된다고 가정하여 client_id, 토큰 엔드포인트 또는 OIDC 설정을 임의로 만들지 마세요. 현재 지원 범위는 지원되는 스토어와 제공된 어댑터입니다. 판매자 JavaScript에 비밀번호나 토큰을 넣지 말고 서버에서 확인한 세션을 사용하세요. 취소나 일시적 장애가 생겨도 이해할 수 있는 안내를 제공하세요.