hanwha-totp-agent

한화 TOTP 팝업 호출 에이전트 라이브러리

설치

npm install hanwha-totp-agent

사용 방법

UMD (브라우저)

<script src="./dist/index.umd.js"></script>
<script>
  HanwhaTotpAgent.openTotpPopup({
    userId: '[email protected]',
    apiKey: 'your-api-key',
    onSuccess: function(data) {
      console.log('인증 성공:', data);
    },
    onError: function(error) {
      console.error('인증 실패:', error);
    },
    onCancel: function() {
      console.log('취소됨');
    }
  });
</script>

ES Module

import { openTotpPopup } from 'hanwha-totp-agent';

openTotpPopup({
  userId: '[email protected]',
  apiKey: 'your-api-key',
  onSuccess: (data) => {
    console.log('인증 성공:', data);
  },
  onError: (error) => {
    console.error('인증 실패:', error);
  },
  onCancel: () => {
    console.log('취소됨');
  }
});

⚠️ Vue 빌드 실패 시

Vue 프로젝트에서 빌드시 아래와 같은 에러가 발생할 경우:

Module not found: Error: Can't resolve 'hanwha-totp-agent'

vue.config.js 파일에서 config.resolve.alias에 다음 코드를 추가해주세요.

// vue.config.js 예시
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('hanwha-totp-agent', require.resolve('hanwha-totp-agent/dist/index.esm.js'));
  }
};

이 설정을 통해 ESM 빌드가 제대로 인식되어 빌드 오류가 해결됩니다.

CommonJS

const { openTotpPopup } = require('hanwha-totp-agent');

await openTotpPopup({
  userId: '[email protected]',
  apiKey: 'your-api-key',
  onSuccess: (data) => {
    console.log('인증 성공:', data);
  },
  onError: (error) => {
    console.error('인증 실패:', error);
  },
  onCancel: () => {
    console.log('취소됨');
  }
});

API

openTotpPopup(options)

TOTP 팝업을 열고 인증을 처리합니다.

옵션

| 옵션 | 타입 | 필수 | 기본값 | 설명 | |------|------|------|--------|------| | userId | string | ✅ | - | 사용자 ID | | apiKey | string | ✅ | - | API 키 | | popupUrl | string | ❌ | "https://dashboard.cleverse.kr/totp-app/popup" | 팝업 URL | | width | number | ❌ | 800 | 팝업 너비 (px) | | height | number | ❌ | 800 | 팝업 높이 (px) | | onSuccess | (data: PopupMessage) => void | ❌ | - | 인증 성공 콜백 (type: "success") | | onError | (data: PopupMessage) => void | ❌ | - | 에러 발생 콜백 (type: "error") | | onCancel | (data: PopupMessage) => void | ❌ | - | 취소 콜백 (type: "cancel") |

반환값

• Promise<Window | null>: 열린 팝업 윈도우 객체 또는 null (팝업이 차단된 경우)

PopupMessage 인터페이스

interface PopupMessage {
  type: "success" | "error" | "cancel";
  process: "register" | "login" | "reset";
  data?: any;
  error?: string;
}

콜백별 메시지 유형

onSuccess 콜백

인증 성공 시 호출되며, type: "success"인 PopupMessage를 받습니다.

onSuccess: (message: PopupMessage) => {
  // message.type === "success"
  // message.process === "register" | "login" | "reset"
  // message.data: 성공 데이터
  console.log('인증 성공:', message.data);
}

예시:

{
  type: "success",
  process: "login",
  data: {
    // 인증 성공 데이터
  }
}

onError 콜백

에러 발생 시 호출되며, type: "error"인 PopupMessage를 받습니다.

onError: (message: PopupMessage) => {
  // message.type === "error"
  // message.process === "register" | "login" | "reset"
  // message.error: 에러 메시지
  console.error('에러 발생:', message.error);
}

예시:

{
  type: "error",
  process: "login",
  error: "인증 실패"
}

onCancel 콜백

사용자가 취소했을 때 호출되며, type: "cancel"인 PopupMessage를 받습니다.

onCancel: (message: PopupMessage) => {
  // message.type === "cancel"
  // message.process === "register" | "login" | "reset"
  console.log('사용자가 취소했습니다.');
}

예시:

{
  type: "cancel",
  process: "register"
}

예제

자세한 사용 예제는 example.html 파일을 참고하세요.

개발

빌드

npm run build

개발 모드 (watch)

npm run dev

라이선스

ISC