실제 이용 흐름이 궁금하신가요?

이용 시나리오 / 웹 서비스 이용하기

웹 서비스 로그인 연동

이해하기

웹 서비스 로그인 연동은 공식 홈페이지·이벤트 페이지 같은 웹 서비스에 스토브 계정 로그인을 연동하는 기능이에요. 이용자는 별도의 계정 없이 스토브 계정으로 로그인하고, 웹 서비스는 발급된 인증 쿠키(SUAT)로 로그인 상태를 확인해요.

연동 방식은 두 가지예요. 스토브 공통 네비게이션을 웹 페이지에 삽입하는 GNB 방식과, 스토브 로그인 페이지를 직접 호출하는 로그인 URL 방식이에요. 로그인·언어·테마 같은 공통 UI까지 함께 제공하려면 GNB 방식을, 로그인 동선만 연동하려면 로그인 URL 방식을 선택하면 돼요.

연동 방식

적용 환경

스토브 인증은 도메인 요건을 충족하는 웹 서비스에서만 사용할 수 있어요. 외부 인프라로 서비스를 구성하는 경우 SSL 인증서가 필요해요.

구성 요소

동작 원리

GNB 방식은 웹 페이지에 GNB 모듈을 로드해 지정한 요소에 마운트해요. GNB가 로그인·회원가입 동선과 언어·테마 등 공통 기능을 제공하고, 로그인이 완료되면 스토브 인증 쿠키가 설정돼요. GNB 자체를 수정하지 않고 서비스별 커스텀 영역과 옵션으로 필요한 기능만 선택해 사용해요.

로그인 URL 방식은 game_no·inflow_path·redirect_url을 포함한 스토브 로그인 페이지 URL을 생성해 호출해요. 이용자가 로그인을 완료하면 redirect_url로 이동하고, 웹 서비스는 응답 쿠키에서 SUAT 등 토큰 정보를 확인해 로그인 상태를 처리해요.

연동 가이드

사전 준비

두 방식에 공통으로 필요한 준비 사항이에요. 방식별 세부 준비는 각 [개발하기] 트랙에서 안내해요.

환경별 도메인 안내

방식별로 사용하는 도메인이 환경에 따라 달라요. 연동 테스트는 Sandbox에서 먼저 진행한 뒤 Live에 적용해요.

개발하기

GNB 방식

GNB(Global Navigation Bar)는 스토브 계정 로그인·회원가입, 언어 변경, 게임 이동 등 공통 기능을 제공하는 웹 공통 네비게이션이에요. 서비스별 옵션으로 필요한 기능만 선택해 사용하고, 반응형 UI로 PC·모바일에서 동일한 경험을 제공해요. 아래 내용은 개편된 GNB 기준이에요.

사전 준비

• 웹 서비스가 onstove.com 계열 도메인을 사용하도록 도메인 연결이 완료되어 있어야 해요.
• 환경에 맞는 GNB 모듈(stove-gnb.js) 호스트 주소를 확보해야 해요. (환경별 도메인 안내 참고)
• GNB를 렌더링할 요소(예:
  )를 페이지에 준비해야 해요.
• 언어·테마 커스텀이 필요하면 서비스의 언어 커버리지와 기본 언어·테마 정책을 미리 정해야 해요.

개발 흐름

GNB 모듈을 로드한 뒤 렌더링할 요소를 지정해 window.StoveGnb.mount()를 호출하면 GNB가 마운트돼요. 로그인 여부에 따라 UI가 자동으로 바뀌고, 로그인이 완료되면 스토브 인증 쿠키가 설정돼요.

1. 환경에 맞는 GNB 모듈(stove-gnb.js)을 로드해요.
2. GNB를 렌더링할 요소의 CSS 선택자와 옵션 객체를 window.StoveGnb.mount(selector, options)에 전달해요.
3. GNB가 마운트되며 로그인·회원가입·언어·테마 등 공통 UI가 렌더링돼요.
4. 마운트·언어 변경·테마 변경 시점은 GNB 커스텀 이벤트로 전달되므로, 필요한 시점을 수신해 서비스 동작을 연결해요.
5. 이용자가 로그인을 완료하면 스토브 인증 쿠키가 설정되고, 로그인 여부에 따라 GNB UI가 자동으로 전환돼요.

window.StoveGnb.mount(selector, options)에 전달하는 인자예요.

서비스별 옵션과 파트너스 설정으로 필요한 기능만 사용해요. 로그인 여부에 따라 기본 디자인이 자동으로 바뀌고, 모바일에서는 하단 메뉴바를 제공해요.

서비스별 요구 사항은 별도 커스텀 영역에서 반영해요. GNB 자체를 수정하거나 다시 배포하지 않아도 서비스 UI를 확장할 수 있어요.

기본 디자인은 로그인 여부에 따라 자동으로 바뀌어요. 미로그인 시 회원가입·로그인 버튼을, 로그인 시 알림·내정보 메뉴를 제공해요.

기본 메뉴는 스토브·스토어 메뉴를 통합해 단순하게 구성했어요.

전체 메뉴는 게임 목록과 메뉴를 분리하고 언어·테마 설정을 함께 제공해요.

즐겨찾기는 즐겨찾기 기능과 인기 게임 목록을 제공하고, 내정보는 UI를 개선하며 고객센터·신고센터를 전체 메뉴로 옮겼어요.

모바일에서는 하단 메뉴바를 제공하며, 타이틀 설정 여부에 따라 로고 표시 방식이 달라져요. 왼쪽이 타이틀 미설정, 오른쪽이 타이틀 설정 화면이에요.

서비스 GNB는 스토브 서비스 외에도 사용할 수 있도록 다양한 옵션을 제공해요. 서비스 특성에 맞게 필요한 기능만 선택해요. 위가 기본 옵션, 아래가 서비스 옵션을 적용한 화면이에요.

GNB는 아래 우선순위로 노출 언어를 결정해요. 앞 단계에서 유효한 언어를 찾지 못하면 다음 단계로 넘어가요.

1. URL 패스에 포함된 언어 정보 (예: https://event.onstove.com/ko) — useLanguageCodeFromPath 옵션이 true일 때 적용
2. 쿠키(LOCALE)에 저장된 언어 정보 — URL 패스에 언어가 없으면 조회 후 리다이렉트
3. 브라우저 언어 — 쿠키에 언어 정보가 없으면 서버는 Accept-Language, 브라우저는 navigator.language 참조
4. 서비스 기본 언어 — 위에서 지원 언어를 찾지 못하면 각 프론트에 정의된 기본 언어 사용 (전체 웹 서비스 fallback은 영어)

// 1) URL 패스의 언어
const getLangByPath = () => {
    const langCoverage = []; // 서비스 언어 커버리지
    const lang = window.location.pathname.split('/')[1];
    if (!lang) return null;
    const lowerCaseLang = lang.toLowerCase();
    return langCoverage.some((c) => c === lang) ? lowerCaseLang : null;
};

// 2) LOCALE 쿠키의 언어 (URL 패스에 언어가 없을 때)
const getLangByCookie = () => {
    const GNBLanguageCoverage = []; // GNB 서비스 언어 커버리지
    const lang = Cookies.get('LOCALE'); // 쿠키 조회는 외부 라이브러리 사용
    if (!lang) return null;
    const lowerCaseLang = lang.toLowerCase();
    return GNBLanguageCoverage.includes(lowerCaseLang) ? lowerCaseLang : null;
};

// 3) 브라우저 언어 (쿠키에도 없을 때)
const getNavigatorLang = () => {
    const lang = window.navigator.language;
    return lang.startsWith('zh') ? lang : lang.replace(/-\S+/g, '');
};

customChangeLanguage를 true로 두면 언어 변경 시 쿠키를 바꾼 뒤 change-language 이벤트를 전달해요. false(기본)면 쿠키를 바꾼 뒤 useLanguageCodeFromPath가 true면 URL 언어 패스를 바꿔 이동하고, 아니면 페이지를 새로고침해요. 이벤트 처리 예시는 아래 [샘플 코드]의 이벤트 수신 탭을 참고해요.

mount()에 전달하는 옵션이에요. 서비스에 필요한 옵션만 선택해 지정해요.

주요 옵션의 실제 노출 예시예요.

serviceTitle — 스토브 로고 우측 서비스 타이틀 (PC / 모바일)

widget — 알림 / 스토브 설치 / 언어 선택 / 테마 선택

widget.stoveMenu — 기본 메뉴 (PC / 모바일)

global.languageCoverages / mode.theme — 언어 목록 / 테마 설정 팝업

mode.layout / userMenu.coupon — 레이아웃 / 내정보 쿠폰함

서비스가 지원하는 테마 목록과 기본 테마를 mode.theme로 설정해요. 지원 조합에 맞게 아래처럼 구성해요.

// 다크·라이트 모두 지원
mode: {
    theme: {
        support: ["dark", "light"],
        default: "dark"   // default는 서비스 기획에 따라 설정
    }
}

// 다크만 지원
mode: { theme: { support: ["dark"], default: "dark" } }

// 라이트만 지원
mode: { theme: { support: ["light"], default: "light" } }

테마 쿠키 유무와 지원 목록(support)에 따른 테마 적용 흐름이에요.

GNB 메뉴 영역은 지정된 커스텀 영역(customMenuArea)에서만 확장할 수 있어요. 기본 메뉴를 비활성화하고(widget.stoveMenu.active=false) GNB가 전달하는 마운트 이벤트를 수신해 서비스 메뉴를 직접 렌더링해요. 커스텀 영역 외에는 커스텀을 지원하지 않아요.

mount()의 반환값으로 제공되는 GNB 인스턴스의 updateOptions()로 런타임 중 옵션을 바꿀 수 있어요. 런타임 변경은 serviceTitle과 widget.stoveMenu만 적용되고, 나머지 옵션은 무시돼요.

트러블슈팅

샘플 코드

GNB 모듈을 로드해 옵션과 함께 마운트하고, 마운트·언어·테마 이벤트를 수신하는 예제예요. 모듈 호스트 주소는 환경에 맞게 적용해 주세요.

<div id="stove-gnb-wrapper"></div>
<script defer>
    (function () {
        const script = document.createElement('script');
        script.src = 'https://js-cdn.onstove.com/libs/common-gnb/latest/stove-gnb.js'; // 환경별 적용 필요
        script.onload = () => {
            if (window.StoveGnb) {
                window.StoveGnb.mount('#stove-gnb-wrapper', {
                    logArea: 'https://도메인주소를입력해주세요',
                    useLanguageCodeFromPath: true, // URL 언어 패스 미사용 시 false
                    serviceTitle: {
                        pc: '',
                        mobile: '서비스 타이틀(모바일)'
                    },
                    widget: {
                        stoveMenu: {
                            active: true, // 기본 메뉴 비활성화 시 false
                            mobile: true
                        }
                    }
                });
            }
        };
        document.body.appendChild(script);
    })();
</script>

로그인 URL 방식

GNB를 사용하지 않고 스토브 로그인 페이지를 직접 연동하는 방식이에요. 웹 서비스가 로그인 페이지 URL을 생성해 호출하고, 로그인 완료 후 발급되는 쿠키(토큰·국가·언어 정보 등)로 계정 로그인을 연동해요.

사전 준비

• 웹 서비스(공홈)의 도메인이 xxx.game.onstove.com 형태여야 스토브 인증을 사용할 수 있어요.
• 외부 인프라를 별도 구성하는 경우 SSL 인증서를 발급·설정해야 해요. (기술PM 발급)
• 유입 경로 식별용 inflow_path와 game_no를 기술PM을 통해 발급받아야 해요.
• 연동 테스트를 위해 웹에서 스토브 회원가입이 완료된 계정이 있어야 해요.

개발 흐름

파라미터를 포함한 스토브 로그인 페이지 URL을 생성해 호출하고, 로그인이 완료되면 redirect_url로 이동해요. 웹 서비스는 응답 쿠키에서 SUAT 등 토큰을 확인해 로그인 상태를 처리해요.

1. game_no·inflow_path·redirect_url을 쿼리 파라미터로 지정해 스토브 로그인 페이지 URL을 생성해요. redirect_url은 URL 인코딩해요.
2. 생성한 로그인 페이지 URL을 호출해요.
3. 이용자가 스토브 로그인 페이지에서 로그인을 완료해요.
4. 로그인 완료 후 redirect_url로 이동하며 인증 쿠키가 설정돼요.
5. 웹 서비스는 쿠키에서 SUAT(Web Access Token) 등을 확인해 로그인 상태를 처리해요.

요청 형식 예시

https://accounts.onstove.com/login
    ?inflow_path={INFLOW_PATH}
    &game_no={GAME_NO}
    &redirect_url={REDIRECT_URL}

로그인이 완료되면 인증 쿠키가 설정돼요. 웹 서비스는 SUAT로 로그인 상태를 식별해요. SUAT 외에도 로그인 전·후에 따라 다양한 쿠키가 함께 전달돼요.

트러블슈팅

샘플 코드

파라미터를 지정해 스토브 로그인 페이지 URL을 생성해 호출하는 예제예요. 도메인은 환경에 맞게 적용해 주세요.

// 스토브 로그인 페이지 URL 생성 및 호출
function openStoveLogin({ gameNo, inflowPath, redirectUrl }) {
    const base = "https://accounts.onstove.com/login"; // 환경별 적용 필요
    const url = new URL(base);

    url.searchParams.set("inflow_path", inflowPath); // 대문자
    url.searchParams.set("game_no", gameNo);
    url.searchParams.set("redirect_url", redirectUrl); 

    // URLSearchParams가 인코딩 처리
    window.location.href = url.toString();
}

openStoveLogin({
    gameNo: "45",
    inflowPath: "STOVE_GAMEID",
    redirectUrl: "https://test.game.onstove.com/"
});

자주 묻는 질문