Device Fingerprint SDK Demo

브라우저 지문 수집 데모

브라우저 환경 정보를 수집하고 Stable Key / Session Key를 생성합니다. 로그인·중요거래 이벤트 시점별 차이를 비교하고 리스크를 탐지합니다.

Stable Key

—

기기 고유 식별자

Session Key

—

세션 컨텍스트 키

Risk Score

—

자동화/이상 탐지 점수

마지막 이벤트

—

수집 전

이벤트 이력

이벤트를 클릭하면 상세 정보와 이전 이벤트와의 차이를 확인할 수 있습니다.

아직 수집된 이벤트가 없습니다. 위 버튼을 클릭하여 수집을 시작하세요.

SDK 사용 예시

다른 웹사이트에서 이 SDK를 사용하는 방법입니다.

<!-- 1. 빌드된 SDK 스크립트를 삽입 (CDN 또는 직접 호스팅) -->
<script src="https://your-domain.com/sdk/fingerprint-sdk.js"></script>

<!-- 2. 페이지 초기화 시 자동 수집 + 이벤트 바인딩 -->
<script>
  // SDK 초기화
  const collector = FingerprintSDK.createDeviceCollector({
    endpoint: "https://your-api.com/api/fingerprint/collect",
    appId: "my-service",
    debug: false,
    autoCollectPageView: true,           // 페이지 진입 시 자동 수집
    onCollected: (payload) => {
      console.log("수집 완료:", payload.keys.stableKey);
      console.log("리스크 점수:", payload.risk.score);
    },
    onError: (err) => {
      console.error("수집 실패:", err.message);
    },
  });

  // 로그인 버튼에 바인딩
  document.getElementById("login-btn")
    .addEventListener("click", async () => {
      const payload = await collector.collect("login");
      // 로그인 API 요청에 stableKey를 함께 전송
      await loginAPI({ stableKey: payload.keys.stableKey });
    });

  // 중요 거래 버튼에 바인딩
  document.getElementById("transfer-btn")
    .addEventListener("click", async () => {
      await collector.collect("important_transaction");
    });
</script>