모든 스토브 채널링 홈페이지는 GNB를 필수로 연동해야 합니다.
연동 하려는 웹 서비스에서 GNB 방식을 통해 STOVE 로그인을 연동하는 방법을 가이드 합니다.
기능소개
STOVE GNB 모듈을 로드 하기 위한 2가지 방법을 제공합니다.
•
명시 버전 로드 방식 : 특정 버전의 디렉토리를 지정해 연동하는 방식 입니다.
•
최신 버전 로드 방식 : 최신 버전의 정보를 조회하여 디렉토리를 지정해 연동하는 방식 입니다.
사전준비
항목 | 설명 |
인프라 | STOVE 인증을 사용하기 위해서는 연동하려는 서비스가 “ontove.com” 도메인을 사용하는 경우에만 가능합니다. |
스튜디오 | GameID 와 GameNo를 확인합니다.
GameID는 스튜디오의 GameID 이며, GameNo은 담당 PM에게 문의합니다. |
코드발급 | inflow_path는 유저의 유입경로를 식별하기 위해서 사용됩니다. 담당 PM을 통해 발급 받습니다. |
기본정보
Host:
//js-cdn.onstove.com (LIVE)
//js-cdn.gate8.com (SB)
Plain Text
복사
연동순서
1. STOVE GNB 모듈 로드 합니다.
1.1 명시 버전 로드 방식
•
명시한 버전의 GNB 모듈을 로드하는 방식 입니다.
•
<!-- 패스 구성 정보 --><script src="//js-cdn.onstove.com/libs/common-gnb/{버전 정보}}/cp-header.js"></script>
HTML
복사
<!-- SampleCode --><script src="//js-cdn.onstove.com/libs/common-gnb/6.6.5/cp-header.js"></script>
HTML
복사
1.2. 최신 버전 로드 방식
•
버전 정보에 latest를 명시하면 GNB 로드시 가장 최근에 배포된 버전의 모듈을 로드합니다.
◦
즉, 해당 방식을 적용한 서비스에서는 GNB 버전을 업데이트하지 않아도, GNB가 새로 배포될 때마다 자동으로 해당 버전을 로드하게 됩니다.
패스 구성 정보 & Sample
<script src="//js-cdn.onstove.com/libs/common-gnb/latest/cp-header.js"></script>
Plain Text
복사
latest의 실제 버전 확인 방법
https://js-cdn.onstove.com/libs/common-gnb/latest/version.txt
Plain Text
복사
2. GNB 셋팅을 위한 Option 정보를 셋팅 합니다.
var options = {
wrapper: '.wrapper',
skin: 'gnb-default',
widget: {
gameListAndService: false
},
global: {
useGds: true
},
loginMethod: {
params: {
inflow_path: 'tr',
redirect_url: Common.Http.Portal + "/member/simpleuserlogout.asp?u="+Base64LoginUrl.encode(location.href)+"&change_type=n",
game_no: '2',// 각환경별 game_no값으로 변경부탁드립니다.show_play_button:'Y',
},
redirectCurrentPage: false
},
onCreatedHeaderElement: function(headerElement) {
console.log(headerElement);
}
// gnb width, z-index css 별도 필요 (.gnb-stove.gnb-default-mini 선택자 사용)
};
var cpHeader = new window.cp.Header(options);
cpHeader.render();
JavaScript
복사
Advanced Options Guide
추가 가이드가 필요한 옵션들에 대한 내용입니다. 아래 옵션을 사용하지 않는다면 생략해도 좋습니다.
•
widget.customArea
•
skin (custom)
1. customArea
// Sample Codeconst gnbOption = {
wrapper: '.wrapper',
global: {
useGds: true,
useLanguageSelect: true,
},
widget: {
// widget - customArea를 통해 서비스 영역의 커스텀customArea: {
// widget - customArea - template 을 통해 해당 영역에 들어갈 html 코드를 옵션으로 작성template: `
<div class="custom-area">
<button style="margin-right:20px;" class="alert-button">prue alert</button>
<a style="margin-right:20px;" href="https://www.naver.com">prue 네이버 바로가기</a>
<button class="click-button">prue console</button>
</div>
`,
// widget - customArea - eventHandler 를 통해 template에 넣은 DOM의 이벤트를 컨트롤eventHandler: (customDom, gnbDom) => {
document.querySelector('.alert-button').addEventListener('click', () => {
alert('클릭 얼럿');
});
document.querySelector('.click-button').addEventListener('click', () => {
console.log('클릭 콘솔');
});
},
},
},
loginMethod: {
redirectCurrentPage: true,
}
}
const header = new window.stove.Header(gnbOption);
header.render();
JavaScript
복사
2. skin(custom)
❶ GNB 생성 옵션
// SampleCodevar options = {
wrapper: '.wrapper',
skin: 'gnb-camp',// 옵션 skin에 원하는 커스텀 클래스명을 입력시 gnb내에 커스텀 클래스명이 적용됨
.........
};
JavaScript
복사
Appendix. 옵션 스키마
기본 옵션 설정
const options = {
wrapper: '.wrapper',
logArea: 'stove',
loginMethod: {
redirectCurrentPage: true,
},
};
JavaScript
복사
•
해당 옵션을 기본으로 설정하시고, 추가로 필요한 기능을 옵션 설명 표에서 참고하여 사용하시는 것을 권장드립니다.
전체 옵션 스키마
<html>
<head>
<script charset="utf-8" src="https://js-cdn.onstove.com/libs/common-gnb/latest/stove-header.js"></script>
</head>
<body>
<div> 본문 입력.</div>
<script>
var options = {
wrapper: '.wrapper',// id 혹은 class로 지정 가능isResponsive: false,// true, false : 반응형 GNB 사용여부(6.x.x 버전이상부터 사용가능)isMobile: false// true, false : 모바일 GNB 적용시 trueskin: 'gnb-default',// : GNB에 삽입될 스킨 기존 제공하던 디폴트, 다크, 미니, 다크 + 미니 *추가적으로 커스텀 클래스를 이용해 CSS 적용가능// "gnb-default", // 기본 버전// "gnb-default-fixed" // 상단고정// "gnb-dark-theme", // 다크 버전// "gnb-dark-mix" // 다크 + 팝업 흰색 버전// "gnb- dark-mini // 다크 + 미니 버전// "gnb-dark-mix-mini" // 다크 + 팝업 흰색 + 미니 버전// "gnb-default-mini" // 미니버전// "gnb-mobile-timeline" // 모바일 타임라인 전용 스킨 (isMobile이 true 상태에서 정상동작)// "{String}" // 커스텀 클래스logArea: 'stove',// "stove", "cp", {game_id} : 로그 수집을 위한 로그 영역을 지정합니다. 외부 공홈의 경우 사용하고 있는 game_id를 문자열로 입력(센추리: CAOA)useLanguageCodeFromPath: false// true, false : URL Path에 있는 언어코드 사용 여부stoveLogo: {
use: true,// true, false : 스토브 로고 노출 여부url: '',// 자유로운 URL 지정가능 : 스토브 로그 클릭이 이동될 URL 지정
},
serviceLogo: '',// HTML형태의 string : 스토브 로그 우측에 서비스로고 추가 예시 - <h2><a href="..."><img src="..."></a></h2>appBanner: {
active: false,// 스토브앱 설치 유도 배너 노출 (해당 값이 true임과 동시에 공통 설정도 ON되어 있어야 노출)nationCoverages: []// 해당 배너 노출 국가 설정(KR, JP, ...). 설정되어 있지 않다면 모든 국가를 타겟.
}
widget: {
notification: true,// true, false : 알림 노출 여부slogan: false,// true, false : slogan 영역 노출 여부languageSelect: true,// true, false : 전체메뉴 > 언어설정 노출 여부gameListAndService: true,// true, false : 게임 및 서비스, 라운지 노출여부totalMenu: true,// true, false : 전체메뉴 노출 여부twoDepthMenu: false// true, false : XS 구간에서 스토브게임, 스토어 메뉴를 하단(2depth)에 노출 여부 결정 (false일 경우 메뉴 미노출처리 됨)customArea: {
template: '',// HTML형태의 string : 커스텀 서비스 영역에 대체로 들어갈 템플릿eventHandler: '',// 함수(콜백함수로 실행됨) : 커스텀 영역에 템플릿에 적용될 함수
},
},
userMenu: {
myProfile: true,// true, false : 유저메뉴 내에 프로필영역 노출여부myCash: true,// true, false : 유저메뉴 내에 캐시영역 노출여부note: true,// true, false : 유저메뉴 내에 알림 영역 노출여부myInfo: true,// true, false : 유저메뉴 내에 내정보 노출여부userGameInfo: true,// true, false : 유저메뉴 내에 게임정보 노출여부timeline: false,// true, false : 유저메뉴 내에 타임라인 노출여부message: false,// true, false : 유저메뉴 내에 쪽지 노출여부coupon: false,// true, false : 유저메뉴 내에 쿠폰함 노출여부userPresentList: false,// true, false : 유저메뉴 내에 선물내역 노출여부secuSetting: false,// true, false : 유저메뉴 내에 보안설정 노출여부customerCenter: true,// true, false : 유저메뉴 내에 고객센터 노출여부reportCenter: true,// true, false : 유저메뉴 내에 신고센트 노출여부logout: true,// true, false : 유저메뉴 내에 로그아웃 노출여부customArea: {
template: '',// HTML형태의 string : 유저 커스텀 영역에 들어갈 템플릿eventHandler: '',// 함수(콜백함수로 실행됨) : 유저 커스텀 영역에 템플릿에 적용될 함수
},
},
global: {
useGds: true,// true, false : GDS (글로벌) API 사용 여부languageCoverages: ['en', 'zh-cn', 'zh-tw', 'ja', 'ko'],// ['en', 'zh-cn', 'zh-tw', 'ja', 'ko'] : GDS의 미설정된 locale값이 들어올시 디폴트언어(영어)로 표기// 글로벌 언어 사용 여부 (GDS API 사용)// en: 영어// zh-tw: 중국(대만)// ja: 일본// ko: 대한민국defaultSelectedLanguage: 'en',// GDS 정책에 따름 : languageCoverages에 지정되지 않은 locale의 경우 표기될 언어 지정onChangeLanguage: Function,// 함수(콜백함수로 실행됨) : 언어선택 이후 내부동작 이외에 별도의 기능을 실행을 원할경우 함수(선택된 언어는 인자로 받음)
},
defaultLocale: {
nation: undefined,// GDS 정책에 따름 : 'ISO 3166-1'에 따른 국가코드timezone: undefined,// GDS 정책에 따름 : timezone 정보utc_offset: undefined,// GDS 정책에 따름 : timezone utc offset 정보
},
loginMethod: {
redirectCurrentPage: false,// true, false : 로그인 및 로그아웃시 이전페이지로 리다이렉트(true 설정시 현재 페이지로 이동)target: '',// 'new' : 'new'로 지정시 로그인 화면 새탭 열림path: {
login_path: '/login',// 로그인 버튼 링크의 path 값 (변경이 필요한 경우에만 옵션으로 사용. 디폴트 값은 스토브 표준 로그인 경로)signup_path: '/login',// 회원가입 버튼 링크의 path 값 (변경이 필요한 경우에만 옵션으로 사용. 디폴트 값은 스토브 표준 회원가입 경로)
}
params: {
redirect_url : null,// 자유롭게 지정 가능 : 로그인 및 로그아웃시 지정된 URL로 리다이렉트
inflow_path : null,// 자유롭게 지정 가능 : 로그인 채널 또는 서비스(로그인페이지 유입경로)
game_no : null,// 자유롭게 지정 가능 : 게임 식별자
login_url : '',// 자유롭게 지정 가능 : 로그인 클릭시 이동되는 도메인 설정, 미지정시 한국 멤버쉽 도메인 적용
show_play_button : 'Y',// 자유롭게 지정 가능 : 게임 시작 동선 여부(회원 가입 시 클라이언트 실행 버튼 노출 여부)style_type: '',// 자유롭게 지정 가능 : 크로스파이어(cf)와 같이 별도 로그인/회원가입이 필요한 경우 사용
},
}
};
/**내부 서비스만 사용**/document.addEventListener('DOMContentLoaded', () => {
const header = new window.cp.Header(options);
header.render();
const openStoveApp = () => {
header.openStoveApp('open/home');// 별도 스킴 적용시 연동 페이지 확인
};
window.addEventListener('open-stove-app', openStoveApp);
});
</script>
</body>
</html>
HTML
복사