SSO 로그인은 사용자 시스템과 상담 시스템을 연동하는 기능이며, 원격인증은 API Key를 통해 진행됩니다. API Key는 임의로 생성되는 유일한 문자열이며 원격로그인을 통해 상담시스템에 접속할 수 있도록 하는 안전한 인증방식입니다.
Online Contact 접속 후, 전체 관리 → SSO 로그인 메뉴에서 SSO 로그인을 먼저 등록합니다. SSO 로그인 URL, 로그인 상태 URL을 입력해주세요.
SSO 로그인을 등록하신 후에 API Key를 복사해주세요. 원격로그인 API 호출 시 인증 토큰으로 사용됩니다.
서비스 관리 → 인증 → SSO 로그인 탭에서 SSO 로그인의 활성화 및 비활성화가 가능하며, 활성화하셨을 경우 선택하신 서비스에 지정하실 SSO 로그인을 선택하실 수 있습니다.
Token 생성 샘플은 아래와 같습니다. 파라미터 순서는 반드시 아래와 일치해야 하며, SSO 로그인 API Key를 확인해주세요.
private String getSHA256Token(String serviceId, String usercode, String username, String email, String phone,
String returnUrl, Long time, String apiKey) throws Exception {
StringBuilder sb = new StringBuilder();
// Order by follow number:
sb.append(serviceId); // 1
sb.append("&");
sb.append(usercode); // 2
sb.append("&");
if (StringUtils.isNotBlank(username)) {
sb.append(username); // 3
sb.append("&");
}
if (StringUtils.isNotBlank(email)) {
sb.append(email); // 4
sb.append("&");
}
if (StringUtils.isNotBlank(phone)) {
sb.append(phone); // 5
sb.append("&");
}
if (StringUtils.isNotBlank(returnUrl)) {
sb.append(returnUrl); // 6
sb.append("&");
}
sb.append(time); // 7
SecretKeySpec signingKey = new SecretKeySpec(apiKey.getBytes("UTF-8"), "HmacSHA256");
Mac mac = Mac.getInstance(signingKey.getAlgorithm());
mac.init(signingKey);
byte[] rawHmac = mac.doFinal(sb.toString().getBytes("UTF-8"));
return new String(Base64.encodeBase64(rawHmac));
}
인터페이스 명 | 프로토콜 | 호출방향 | 인코딩 | 결과 형식 | 인터페이스 설명 |
---|---|---|---|---|---|
SSO 원격로그인 API (Client Side) | HTTPS | POST | UTF-8 | Redirect | 사용자 시스템에서 동적으로 form를 생성하여 브라우저에 반환하며, form은 자동으로 API에 form정보를 전달. API에서 전달된 form정보로 인증 후 성공시 로그인 Cookie 값 설정. |
명칭 | 변수 | 데이터 타입 | 필수 | 설명 |
---|---|---|---|---|
서비스ID | service | Varchar(50) | O | 서비스 ID |
유저ID | usercode | Varchar(50) | O | 유저ID,유일한 유저임을 표시 |
유저 명 | username | Varchar(50) | X | 유저 명 |
유저 이메일 주소 | Varchar(100) | X | 유저 이메일 | |
전화번호 | phone | Varchar(20) | X | 전화번호 |
현재 시간의 timestamp | time | Long | O | 호출 시간이 3분 초과시, 타임아웃 얼럿 출력. |
인증 Token | token | Varchar | O | 아래 파라미터 값과 SSO API Key로 산출된 SHA256 (필수가 아닌 파라미터 값이 null 혹은 빈값일 경우 , 암호화 문자열에 추가 할 필요 없음.주의:문자열 중 각 값의 순서는 아래 예시에 지정된 순서와 일치해야 함.) SHA256Digest(service + usercode + username + email + phone + retunrnUrl + time) |
리턴 화면 URL | returnUrl | Varchar | X | 설정 및 로그인 성공시 해당 주소로 이동 |
returnUrl 파라미터 존재시 지정된 returnUrl로 이동 , returnUrl 없을 경우 문자열 : SUCCESS 반환
인터페이스 명 | 프로토콜 | 호출방향 | 인코딩 | 결과 형식 | 인터페이스 설명 |
---|---|---|---|---|---|
SSO 원격로그인 API (Server Side) | HTTPS | POST | UTF-8 | String | 사용자가 서버에서 직접 API 호출. API 로그인 성공 후 로그인 Cookie 값 설정. |
명칭 | 변수 | 데이터 타입 | 필수 | 설명 |
---|---|---|---|---|
서비스ID | service | Varchar(50) | O | 서비스 ID |
유저ID | usercode | Varchar(50) | O | 유저ID,유일한 유저임을 표시 |
유저 명 | username | Varchar(50) | X | 유저 명 |
유저 이메일 주소 | Varchar(100) | X | 유저 이메일 | |
전화번호 | phone | Varchar(20) | X | 전화번호 |
현재 시간의 timestamp | time | Long | O | 호출 시간이 3분 초과시, 타임아웃 얼럿 출력. |
인증 Token | token | Varchar | O | 아래 파라미터 값과 SSO API Key로 산출된 SHA256 (필수가 아닌 파라미터 값이 null 혹은 빈값일 경우 , 암호화 문자열에 추가 할 필요 없음.주의:문자열 중 각 값의 순서는 아래 예시에 지정된 순서와 일치해야 함.) SHA256Digest(service + usercode + username + email + phone + time) |
SUCCESS
인터페이스 명 | 프로토콜 | 호출방향 | 인코딩 | URL | URL(개발) | 결과 형식 |
---|---|---|---|---|---|---|
SSO 로그인 URL | HTTPS | GET | UTF-8 | 사용자 제공 | 사용자 제공 | Redirect |
명칭 | 변수 | 데이터 타입 | 필수 | 설명 |
---|---|---|---|---|
리턴 URL | returnUrl | Varchar | O | 로그인 성공후 이동되는 URL |
유저 미 로그인 상태 - ① 로그인 화면으로 이동 - ② 유저 로그인 - ③ 서비스 측의 서버에서 유저 로그인 처리 및 로그인 유저 관련 쿠키 생성 - ④ SSO 원격 로그인 API 호출
유저 로그인 상태 - ① SSO 원격 로그인 API 호출
SSO 원격 로그인 (Client Side) - ① 유저 정보와 API Key 기준으로 로그인 token 생성 - ② 유저 정보와 token을 브라우저로 리다이렉트 - ③ 화면에서 Form 작성, 상세한 파라미터는 SSO 원격로그인 API (Client Side) 참조 - ④ Form 제출 - ⑤ SSO 원격 로그인 API를 통해 유저 정보와 token 전송 - ⑥ 로그인 성공 후 {returnUrl}로 이동
SSO 원격 로그인 (Server Side) - ① 유저 정보와 API Key 기준으로 로그인 token 생성 - ② 서버에서 "SSO 원격 로그인 API (Server Side)" 호출 - ③ API 호출 파라미터 (usercode와 time)을 returnUrl 뒤에 추가 - 예시) https://nhn-cs.alpha-oc.toast.com/multilanguage/hc/ticket/list/?usercode=xxxxxx@163.com&time=1566531359635 - ④ {returnUrl}로 이동
인터페이스 명 | 프로토콜 | 호출방향 | 인코딩 | URL | URL(개발) | 인터페이스 설명 | 결과 형식 |
---|---|---|---|---|---|---|---|
SSO 로그인 상태 API | HTTPS | GET | UTF-8 | 사용자 제공 | 사용자 제공 | 사용자가 쿠키 정보를 기준으로 로그인 여부를 확인 후 JSON 형식의 데이터를 리턴 | JSON |
명칭 | 변수 | 데이터 타입 | 필수 | 설명 |
---|---|---|---|---|
javascript function | login | Boolean | O | 로그인 상태. 로그인 :true, 미로그인 :false |
유저 코드 | usercode | Varchar(50) | X | 유저 ID(유니크 값). 로그인 상태가 true 인 경우 유저코드는 필수 |
{
"login": "true",
"usercode":"usercodeXXX"
}
{
"login": "false",
"usercode": null
}
Sample Code 파일 중 'oc_sso_sample/src/main/resources/templates/help_frame.ftl'을 참조해주세요. iframe의 이름은 반드시 id = "ocPage"로 지정하셔야 합니다.
<iframe src="https://${domain}/hangame/hc/?iframe=true" id="ocPage" frameborder="0" scrolling="no" style="padding-top: 60px; box-sizing: unset; height: 100px; width: 100%">
</iframe>
페이지에 viewport를 설정할 시 mobile/web 브라우저 모두에서 헬프센터를 사용하실 수 있습니다.
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
help_frame.ftl 파일 중 javascript 코드를 참조해주세요.
// Listener for OC content height change
window.addEventListener('message',function(event){
// Set iframe height
if(event.data > 0) {
updateHeight(event.data);
}
});
var updateHeight = function(wrapHeight) {
var iframe = window.document.getElementById('ocPage');
if(iframe != null) {
iframe.style.height = '0px';
var setHeight = (document.body.clientHeight > document.body.scrollHeight) ? document.body.clientHeight : document.body.scrollHeight;
var margin = 70;
setHeight = setHeight > wrapHeight ? setHeight : wrapHeight;
iframe.style.height = setHeight + margin + "px";
}
};
help_frame.ftl 파일 중 javascript 코드를 참조해주세요.
// get cookie
function getCookie(name) {
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
$.when( $.ready ).then(function() {
var ssotoken = getCookie("sso_test_login");
var usercode = getCookie("usercode");
if(ssotoken != null && usercode != null) {
var signout = $("#signout");
$("#signout").html("Welcome " + usercode + "! <a href='/logout.nhn'>Sign out</a>");
$("#signout").show();
$("#signin").hide();
}
});