@sanghyeon_kim/fingerprint-sdk

브라우저 Fingerprint 기반으로 방문자 고유 ID를 생성하는 공통 SDK입니다.

설치

npm install @sanghyeon_kim/fingerprint-sdk

기본 사용법

import { fingerprintSdk } from "@sanghyeon_kim/fingerprint-sdk";

await fingerprintSdk.init({ debug: true });
const visitorId = await fingerprintSdk.getVisitorId();

React 사용 예제

import { useEffect, useState } from "react";
import { fingerprintSdk } from "@sanghyeon_kim/fingerprint-sdk";

function App() {
  const [visitorId, setVisitorId] = useState<string>("");

  useEffect(() => {
    const initSdk = async () => {
      await fingerprintSdk.init({ debug: true });
      const id = await fingerprintSdk.getVisitorId();
      setVisitorId(id);
    };

    initSdk();
  }, []);

  return <div>Visitor ID: {visitorId}</div>;
}

로컬스토리지 캐싱 패턴 (권장)

getVisitorId()는 매번 브라우저 정보를 수집하는 무거운 연산입니다. 최초 1회 발급 후 로컬스토리지에 저장해두는 패턴을 권장합니다.

useEffect(() => {
  const initSdk = async () => {
    const stored = localStorage.getItem("visitor_id");
    if (stored) return;

    await fingerprintSdk.init();
    const id = await fingerprintSdk.getVisitorId();
    localStorage.setItem("visitor_id", id);
  };

  initSdk();
}, []);

API

fingerprintSdk.init(options?)

SDK를 초기화합니다. getVisitorId() 호출 전에 반드시 먼저 호출해야 합니다.

| 옵션 | 타입 | 기본값 | 설명 | | ------- | --------- | ------- | -------------------------------------------- | | debug | boolean | false | true로 설정 시 초기화 및 ID 발급 로그 출력 |

fingerprintSdk.getVisitorId()

브라우저 Fingerprint 기반 방문자 고유 ID를 반환합니다.

• 반환값: Promise<string>
• init() 호출 전에 사용하면 에러를 던집니다.