¶ 멀티 인증 모듈 적용 가이드
¶ 1. 개요
Web To App 인증서비스는 블록체인 기반의 Hecate Cert Mobile SDK 적용 App을 이용하여, 사용자 사설 인증 기능을 제공해 App 뿐만 아니라 다른 서비스(Web 사이트)에서도 App을 이용한 사용자 인증 기능을 이용할 수 있게 하는 서비스입니다.
별도의 아이디나 비밀번호를 기억할 필요 없이 App으로 간편하고 안전하게 서비스에 로그인 또는 전자서명 할 수 있어, 가입 계정을 동일하게 사용하거나 본인임을 확인하기 위한 서비스를 이용할 수 있습니다.
¶ 도입배경
1999년 이후로 공인인증서의 시장 독점으로 인해 신기술의 시장 진입 기회가 차단되는 문제가 발생하여 2014년 이후 의무화를 폐지 하였으나 여전히 시장 독점과 이용에 불편함이 발생하고 있습니다.
번거로운 발급과 이용 부담을 제고하여, 별도의 프로그램 설치 없이 4단계 내외의 간편한 본인 인증 절차를 제공합니다.
블록체인 또는 클라우드 기반의 보완성 강화 기술을 사용한 간편하게 비밀번호 설정하는 서비스가 성장하고 있습니다.
¶ 제품특징
¶ # Permissioned Chain
- 운영 노드별 사용자 권한 세분화를 통한 실시간 제어관리를 합니다.
- Flexible한 노드별 채널관리를 통한 다양한 서비스 운영 대응이 가능합니다.
- 타 사업에서 검증된 블록체인 사설인증 모듈 적용으로 시스템의 안정성을 제고하였습니다.
¶ # PKI 기반 사설 인증체계
- 내부 악의적 사용자로부터 보호하고, 단말(기기) 및 노드(서버)간 인증을 합니다.
- PKI 기반 표준(X.509)을 준수하고 국가정보원 검증필 암호모듈을 적용하였습니다.
¶ # 통합인증 수단
- 온ㆍ오프라인 다양한 통합인증을 적용하기위해 서버에서 Method 추가할 수 있도록 주조 설계하였습니다.
- QR코드 및 App Push를 활용한 Web/App 인증이 가능합니다.
¶ # 통신 및 데이터 암호화
- API를 이용한 Web/Mobile 등 주요 네트워크 구간 TLS 암호화를 적용하였습니다.
- 사용자 개인 단말 Connecting Information 및 기타 정보에 대한 이중 암호화를 적용하였습니다.
¶ 기능소개
¶ Web To APP 인증 주요기능
Web To App 인증(로그인 또는 전자서명)하는 기본 절차는 다음과 같습니다.
¶ Web 사이트 수행
¶ Hecate CERT Mobile App 수행
¶ 2. 사용자 화면 소개
Web To App 전자서명 또는 로그인을 이용하기 위해서는 PC통합인증Hecate Cert Mobile SDK를 적용한 App의 통합(사설)인증서 발급 후 Web To App 인증 기능을 활용하시면 해당 서비스를 이용하실 수 있습니다.
¶ PUSH
¶ STEP 1) Web 사이트 수행
- Web To App 인증은 WebToApp 인증 Web Module 적용 사이트에서 통합(사설)인증서 발급 App을 통해 전자서명 또는 로그인을 하실 수 있습니다.
¶ STEP 2) Hecate CERT Mobile SDK 적용 App 수행
- Hecate Cert Moblie SDK를 적용한 Andriod 및 iOS App에서 인증서를 발급 후 Web To App 인증 기능을 적용하여 서비스를 호출하여 이용하실 수 있습니다.
¶ STEP 3) Web 사이트 수행
¶ QR
¶ STEP 1) Web 사이트 수행
- Web To App 인증은 WebToApp 인증 Web Module 적용 사이트에서 통합(사설)인증서 발급 App을 통해 전자서명 또는 로그인을 하실 수 있습니다.
¶ STEP 2) Hecate CERT Mobile SDK 적용 App 수행
- Hecate Cert Moblie SDK를 적용한 Andriod 및 iOS App에서 인증서를 발급 후 Web To App 인증 기능을 적용하여 서비스를 호출하여 이용하실 수 있습니다.
¶ STEP 3) Web 사이트 수행
¶ 인증번호
¶ STEP 1) Web 사이트 수행
- Web To App 인증은 WebToApp 인증 Web Module 적용 사이트에서 통합(사설)인증서 발급 App을 통해 전자서명 또는 로그인을 하실 수 있습니다.
¶ STEP 2) Hecate CERT Mobile SDK 적용 App 수행
- Hecate Cert Moblie SDK를 적용한 Andriod 및 iOS App에서 인증서를 발급 후 Web To App 인증 기능을 적용하여 서비스를 호출하여 이용하실 수 있습니다.
¶ STEP 3) Web 사이트 수행
¶ 3. WebToAPP 튜토리얼
¶ 구조
project
├── src/main/java
├── src/main/resources
│ ├── static
│ │ ├── business
│ │ │ ├── css
│ │ │ ├── font
│ │ │ ├── html
│ │ │ ├── img
│ │ │ ├── js
│ │ │ │ ├── libs
│ │ │ │ ├── modules
│ │ │ │ │ ├── constants.js
│ │ │ │ │ ├── requestLogin.js
│ │ │ │ │ ├── ...
│ │ ├── person
│ │ │ ├── css
│ │ │ ├── font
│ │ │ ├── html
│ │ │ ├── img
│ │ │ ├── js
│ │ │ │ ├── libs
│ │ │ │ ├── modules
│ │ │ │ │ ├── constants.js
│ │ │ │ │ ├── request_login.js
│ │ │ │ │ ├── ...
│ │ ├── home.html
│ ├── application.yml
│ ├── interface.properties
│ ...
¶ 설정 파일 변경
interface.properties
#####################################
# 인증서버 설정 정보 #
#####################################
# SDK 개인 도메인 설정.
# 개인 인증 서버 도메인 정보.
personCertifyServerDomains=http://222.122.205.219:9102,http://222.122.205.219:9102
# 개인 PC 서버 도메인 정보.
personPcServerDomains=http://222.122.205.219:9103,http://222.122.205.219:9103
# 개인 인증 요청 기관 코드.
# 관리자로부터 기관 등록 요청 후 발급받은 코드 정보 입력
personCrtfcInsttCode=0000000056
# SDK 사업자 도메인 설정.
# 사업자 인증 서버 도메인 정보.
businessCertifyServerDomains=http://222.122.205.219:9102
# 사업자 PC 서버 도메인 정보.
businessPcServerDomains=http://222.122.205.219:9103
# 사업자 인증 요청 기관 코드.
businessCrtfcInsttCode=0000000057
# SDK 공통 설정.
# http ConnectTimeOut 시간 설정 ( 밀리초 )
connectTimeout=3000
# http ReadTimeOut 시간 설정 ( 밀리초 )
readTimeout=3000
# 서비스 접속 확인 여부.
isNetworkAlive=false
# Debug 여부[Debug Level과는 다름]
isDebug=true
¶ 화면 소스코드 입력 정보 설정
- ../static/home.html
- WebToApp 팝업 페이지 호출
- 팝업 호출 시 업무구분코드(
businessTypeCode) 파라미터 전달 필요
¶ 법인
/**
* 사업자 WebToApp 팝업 호출.
*/
function businessPopup(businessTypeCode){
var domain = location.host;
var url = "/api/hecate/module/business/client/";
var param = "?businessTypeCode="+businessTypeCode;
url = url + param;
var openUrl= domain +url; // 팝업 URL
var popupWidthSize = 750;
var popupHeightSize = 640;
var left = parseInt(getWidthCenter(popupWidthSize));
var top = parseInt(getHeightCenter(popupHeightSize));
var popupOption = "width=" + popupWidthSize + ",height=" + popupHeightSize + ",left=" + left + ",top=" + top + ", scrollbars=no, menubar=no, status=no, toolbar=no";
window.open(url,"businessPopup", popupOption);
}
function bsnesSignData(signData){
var signDoc = signData.signDoc;
var crtfcTy = signData.crtfcTy;
document.getElementById("signData").value = crtfcTy + " | " + signDoc;
}
¶ 개인
/**
* 개인 WebToApp 팝업 호출.
*/
function personPopup(businessTypeCode){
var domain = location.host;
var url = "/api/hecate/module/person/client/";
var param = "?businessTypeCode="+businessTypeCode;
url = url + param;
var openUrl= domain +url; // 팝업 URL
var popupWidthSize = 750;
var popupHeightSize = 640;
var left = parseInt(getWidthCenter(popupWidthSize));
var top = parseInt(getHeightCenter(popupHeightSize));
var popupOption = "width=" + popupWidthSize + ",height=" + popupHeightSize + ",left=" + left + ",top=" + top + ", scrollbars=no, menubar=no, status=no, toolbar=no";
window.open(url,"personPopup", popupOption);
}
function personSignData(signData){
var signDoc = signData.signDoc;
var certifyType = signData.certifyType;
document.getElementById("signData").value = certifyType + " | " + signDoc;
}
¶ 법인
- ../static/business/js/hecateLogin.js
- 법인 WebToApp 화면 파일 및 기타 모듈에 대한 기본 Root 정보 입력
- 법인 WebToApp 관련 파일들의 위치를 변경하였을 경우,
hecateRoot에 변경한 폴더 root 경로 입력
const hecateRoot = "/static/business"; // hecateLogin이 복사되어있는 root 폴더
var hecateConfig = {
paths : {
text :hecateRoot+'/js/libs/require/require-text-2.0.15', // 텍스트 로딩을 위한 requireJS 플러그인
constant :hecateRoot+'/js/modules/constants', // 프로그램 전역 상수
//기타 모듈 및 참조 프레임워크 대한 파일 정보
...
}
- ../static/business/js/modules/constants.js
- WebToApp 인증 화면 파일을 적용중인 프로젝트의 도메인 설정 정보 입력
localServer,devServer,realServer: 로컬, 개발, 운영 서버 도메인 정보를 입력.serverMode: 현재 동작할 모드 설정certIntervalPeriod: 원문 조회 여부 및 서명데이터 요청 간격 설정(밀리초)
define(['jquery', 'constantsLogin'], function($, messageConstants){
var localServer = "http://localhost:9205/";
var devServer = "http://SERVER-IP:PORT/";
var realServer = "http://SERVER-IP:PORT/";
var serverModeLocal = "serverModeLocal";
var serverModeDev = "serverModeDev";
var serverModeReal = "serverModeReal";
var serverMode = serverModeLocal;
var modules = {
defer : new $.Deferred,
getServer : function(){
if(serverMode == serverModeDev){
return devServer;
} else if(serverMode == serverModeReal){
return realServer;
} else {
return localServer;
}
},
MSG : {},
KEY : {},
certCountdownTime : [301,'second'],// [add time, time type] keyword from moment. //인증 대기시간
certIntervalPeriod : 2000// [add time, time type] keyword from moment. //원문 조회여부 및 서명데이터 요청 interval 간격
};
//로그인 전용 응답코드 추가
modules.messageConstants = messageConstants;
return modules;
});
- ../static/business/js/modules/requestLogin.js
- RequestMaiing url 설정
pushSendRequestor: PUSH요청 기관명 작성
var apiTrCode = {
// API 주소 설정 ( uri mapping setting )
createTxId : "/api/hecate/module/business/client/createTxId", // TxId 생성 요청 API
sendPush : "/api/hecate/module/business/client/sendpush", // Push 발송 API
sendPushRepeat : "/api/hecate/module/business/client/sendPushRepeat", // Push 발송 API
signDocFromServer : "/api/hecate/module/business/client/signDocFromServer", // 서명데이터 전달 ( Server ==>> Server )
certificationCancel : "/api/hecate/module/business/client/certificationCancel", // 진행중인 인증 취소.
doAction : "/api/hecate/module/business/client/doAction"
};
// PUSH 요청 기관명 (* PUSH 메세지 뒤의 괄호안에 표기)
var pushSendRequestor = "";
¶ 개인
- ../static/person/js/hecateLogin.js
- 개인 WebToApp 화면 파일 및 기타 모듈에 대한 기본 Root 정보 입력
- 개인 WebToApp 관련 파일들의 위치를 변경하였을 경우,
hecateRoot에 변경한 폴더 root 경로 입력
const hecateRoot = "/static/person"; // hecateLogin이 복사되어있는 root 폴더
var hecateConfig = {
paths : {
text :hecateRoot+'/js/libs/require/require-text-2.0.15', // 텍스트 로딩을 위한 requireJS 플러그인
constant :hecateRoot+'/js/modules/constants', // 프로그램 전역 상수
//기타 모듈 및 참조 프레임워크 대한 파일 정보
...
}
- ../static/person/js/modules/constants.js
- WebToApp 인증 화면 파일을 적용중인 프로젝트의 도메인 설정 정보 입력
DOMAIN: 로컬, 개발, 운영 서버 도메인 정보를 입력.CERT_INTERVAL_PERIOD: 원문 조회 여부 및 서명데이터 요청 간격 설정(밀리초)
define(['jquery', 'constantsLogin'], function($, cert_err){
var modules = {
defer : new $.Deferred,
SERVER : { //기본 도메인 설정
DOMAIN : "http://localhost:9205/" // local
// DOMAIN : "http://SERVER-IP:PORT/" // 검증
// DOMAIN : "http://SERVER-IP:PORT/" // 운영
},
MSG : {
/*고정 메세지*/
},
KEY : {
},
CERT_COUNTDOWN_TIME : [5,'minute'],//[add time, time type] keyword from moment. //인증 대기시간
CERT_INTERVAL_PERIOD : 2000//[add time, time type] keyword from moment. //원문 조회여부 및 서명데이터 요청 interval 간격
}
//로그인 전용 응답코드 추가
modules.cert_err = cert_err;
return modules;
});
- ../static/person/js/modules/request_login.js
- RequestMaiing url 설정
pushSendRequestor: PUSH요청 기관명 입력
var apiTrCode = {
// API 주소 설정 ( uri mapping setting )
createTxId : "/api/hecate/module/person/client/createTxId", // TxId 생성 요청 API
sendPush : "/api/hecate/module/person/client/sendpush", // Push 발송 API
certificationRequest : "/api/hecate/module/person/client/certificationRequest", // 인증 요청 API( 상태 채크 )
signDocFromServer : "/api/hecate/module/person/client/signDocFromServer", // 서명데이터 전달 ( Server ==>> client )
doAction : "/api/hecate/module/person/client/doAction"
};
//PUSH 요청 기관명 (* PUSH 메세지 뒤의 괄호안에 표기 시 사용, 빈값일 경우 미사용)
var pushSendRequestor = "";
¶ 서버 코드 설정
샘플 코드는 Spring Framework 기반으로 작성되었으며, 제공되는 war 파일에는 샘플 코드를 위한 Spring Framework 라이브러리를 포함하고 있습니다.
별도의 Spring Framework 라이브러리를 사용하는 경우, 해당 Spring Framework 버전에서 제공하는 Annotation을 확인하셔서 샘플 코드를 customizing 하시기 바랍니다.
@RequestMapping URL 변경 시, requestLogin.js(법인) 또는 request_login.js(개인)의 apiTrCode영역도 변경해야 합니다.
¶ 구조
project
├── src/main/java
│ ├── com.uracle.hecate.auth
│ │ ├── client
│ │ │ ├── controller
│ │ │ │ ├── BusinessClientController.java
│ │ │ │ ├── CommonClientController.java
│ │ │ │ ├── PersonClientController.java
│ │ │ │ ├── ...
└─src/main/resources
¶ 법인 (BusinessClientController.java)
- interface.properties에서 설정한 businessCrtfcInsttCode(인증 요청기관 코드) 설정값
- ../static/business/js/modules/constants.js 파일에 설정 한 원문 조회 여부 및 서명데이터 요청 간격 참고
/**
* [웹투앱] 서명데이터 전달 ( 인증 서버 >> 적용 서버 )
*/
@PostMapping(value="/signDocFromServer")
public ResponseEntity<?> signDocFromServer(HttpServletRequest request) throws Exception {
BusinessPcService service = BusinessPcService.getInstance(); // 서비스 객체 생성.
Map<String, Object> reqMap = util.getMap(request); // Http Body에서 데이터 불러오기.
callTxId(request, reqMap); // 저장된 txId 설정.
//서명데이터 분리 요청 시 추가
setCrtfcInsttCode(reqMap); // 1. 인증 요청 기관 코드 설정
reqMap.put(ParamBusinessConstant.PARAM_IS_SPLIT, "Y"); // 2. 서명데이터 분리 요청
...
...
...
return ResponseEntity.ok(resultMap);
}
- 로그인 처리 비즈니스 로직 구현
/**
* 비즈니스 로직 구현 영역
*/
@PostMapping("/doAction")
public ResponseEntity<?> doAction(HttpServletRequest request) throws Exception{
Map<String, Object> reqMap = util.getMap(request); // Http Body에서 데이터 불러오기.
JSONObject resultMap = null;
// 3. 비즈니스 로직 구현
return ResponseEntity.ok(resultMap);
}
¶ 개인 (PersonClientController.java)
- interface.properties에서 설정한 businessCrtfcInsttCode(인증 요청기관 코드) 설정값
- ../static/person/js/modules/constants.js 파일에 설정 한 원문 조회 여부 및 서명데이터 요청 간격 참고
/**
* [웹투앱] 서명데이터 전달 ( 인증 서버 >> 적용 서버 )
*/
@PostMapping(value="/signDocFromServer")
public ResponseEntity<?> signDocFromServer(HttpServletRequest request) throws Exception {
PersonPcService service = PersonPcService.getInstance(); // 서비스 객체 생성.
Map<String, Object> reqMap = util.getMap(request); // Http Body에서 데이터 불러오기.
callTxId(request, reqMap); // 저장된 txId 설정.
//서명데이터 분리 요청 시 추가
setCrtfcInsttCode(reqMap); // 인증 요청 기관 코드 설정
reqMap.put(ParamPersonConstant.PARAM_IS_SPLIT, "Y"); // 서명데이터 분리 요청
...
...
...
return ResponseEntity.ok(resultMap);
}
- 로그인 처리 비즈니스 로직 구현
/**
* 비즈니스 로직 구현 영역
*/
@PostMapping("/doAction")
public ResponseEntity<?> doAction(HttpServletRequest request) throws Exception{
Map<String, Object> reqMap = util.getMap(request); // Http Body에서 데이터 불러오기.
JSONObject resultMap = null;
// 3. 비즈니스 로직 구현
return ResponseEntity.ok(resultMap);
}
¶ 멀티인증 팝업 코드 설정
- 전송 , 재전송 마우스 On/Off옵션 추가
- on : /static/business 또는 person/css/morpheus-lgstyle.css(line 17)
- off : /static/business 또는 person/css/morpheus-lgstyle.css(line 16)
- 제한시간 텍스트 색상
- /static/business 또는 person/css/morpheus-lgstyle.css(line 20)
- 확인 인증 전/후 상태 변경
- /static/business 또는 person/css/morpheus-lgstyle.css(line 18)