> ## Documentation Index > Fetch the complete documentation index at: https://docs.didit.me/llms.txt > Use this file to discover all available pages before exploring further. # iframe 신분증 인증: 임베디드 웹 KYC > Didit iframe으로 사이트에 KYC, KYB, AML, 라이브니스 감지를 임베드하세요. UniLink 노코드 또는 API 세션 지원. 인증 건당 $0.33부터, 월 $10 무료, 계약 없음. iframe 연동 프롬프트 프롬프트를 클립보드에 복사 \

\`Embed Didit identity verification into my web page using an iframe.

\## Two Options

\### Option A: UniLink (no backend — fastest setup)
Copy your UniLink URL from Didit Console > Workflows > Copy Link.
It looks like: https://verify.didit.me/u/
Embed it directly:

\
```> ⚠️ **필수**: 라이브니스 감지 중 카메라에 접근하려면 `allow` 속성이 반드시 필요합니다.### 주요 이점- **1분 미만 설정**: 백엔드도, API 키도 필요 없습니다
- **설정 불필요**: 콜백 URL은 워크플로 설정에서 지정됩니다
- **MVP에 적합**: 바로 시작할 수 있습니다***## API 세션 iframe(백엔드 필요)세션별 맞춤 설정이 필요한 고급 연동을 위한 방식입니다.### 사용 시기- 세션마다 사용자 지정 `vendor_data` 또는 `metadata`를 전달
- 세션마다 다른 콜백 URL 설정
- 인증이 시작되기 전에 서버에서 세션 추적
- 세션을 사용자 ID와 연결### 구현**1단계: 세션 생성(백엔드)**세션 생성 응답에는 **`url`**이라는 필드가 있습니다. 이 값을 iframe의 `src`로 사용하세요.```javascript theme={null}
// Node.js / Express
app.post('/api/create-verification', async (req, res) => {
  const { userId } = req.body;

  const response = await fetch('https://verification.didit.me/v3/session/', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.DIDIT_API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      workflow_id: process.env.DIDIT_WORKFLOW_ID,
      vendor_data: userId,
      callback: 'https://yourapp.com/verification-callback',
      metadata: { source: 'web-app', timestamp: Date.now() },
    }),
  });

  if (!response.ok) {
    return res.status(response.status).send(await response.text());
  }

  // 201 per OpenAPI: { session_id, session_number, session_token, url, vendor_data,
  //                    metadata, status, workflow_id, workflow_version, callback }
  const session = await response.json();
  res.json({ sessionId: session.session_id, verificationUrl: session.url });
});
```**2단계: iframe에 삽입(프런트엔드)**```html theme={null}



```***## 이벤트 수신(postMessage)인증 페이지는 이벤트를 부모 창으로 전송합니다. 모든 메시지는 다음 구조를 가집니다:```typescript theme={null}
{
  type: 'didit:',   // e.g. 'didit:completed'
  data: { /* payload */ }, // event-specific; may be undefined
  timestamp: 1718000000000 // ms epoch
}
```payload는 **중첩**되어 있습니다. `event.data.sessionId`가 아니라 `event.data.data.sessionId`를 읽으세요:```javascript theme={null}
window.addEventListener('message', (event) => {
  // Use your white-label domain here if you have one configured
  if (event.origin !== 'https://verify.didit.me') return;

  const { type, data } = event.data || {};

  if (type === 'didit:ready') {
    console.log('Session ID:', data.sessionId); // available as soon as the page loads
  }
  if (type === 'didit:completed') {
    console.log('Done:', data.sessionId, data.status); // e.g. "Approved" | "Declined" | "In Review"
    // UI hint only — the canonical decision arrives on your backend via webhook
  }
});
```주요 이벤트는 다음과 같습니다: `didit:ready`(`{ sessionId }`), `didit:started`, `didit:step_started` / `didit:step_completed` / `didit:step_changed`(`{ step, ... }`), `didit:status_updated`(`{ status }`), `didit:completed`(`{ sessionId, status }`), `didit:cancelled`, `didit:error`(`{ error, step? }`), `didit:close_request`, 그리고 `didit:layout`(`{ contentHeight, colorScheme, dir }`, [아래](#diditlayout으로-iframe-크기-조정) 참조). [JavaScript SDK 이벤트 참조](https://docs.didit.me/ko/integration/web-sdks/javascript-sdk.md#이벤트-참조)에는 타입이 지정된 콜백으로 제공되는 인증 이벤트가 나열되어 있습니다. 버전 0.5.0부터 SDK는 레이아웃 메시지를 `onEvent`로 전달하지 않고 내부에서 처리합니다.### `didit:layout`으로 iframe 크기 조정인증 페이지는 `didit:layout` 메시지로 필요한 공간의 크기를 알려줍니다. 페이지가 로드될 때 한 번, 그리고 콘텐츠 높이, 테마 또는 텍스트 방향이 바뀔 때마다 다시 전송합니다:```typescript theme={null}
{
  type: 'didit:layout',
  data: {
    contentHeight: 612,    // CSS px
    colorScheme: 'light',  // 'light' | 'dark'
    dir: 'ltr'             // 'ltr' | 'rtl'
  },
  timestamp: 1718000000000
}
```| 필드 | 타입 | 설명 |
| - | - | - |
| `contentHeight` | `number` | 상단 바를 포함한 페이지 콘텐츠의 자연 높이(CSS 픽셀 단위) |
| `colorScheme` | `'light' \| 'dark'` | 페이지가 표시되는 테마입니다. 화이트 라벨 색상을 사용하면 기기 설정이 아니라 배경색이 테마를 결정합니다 |
| `dir` | `'ltr' \| 'rtl'` | 페이지 언어의 텍스트 방향입니다 |> [!NOTE]
>
> 자체 iframe에서 `didit:layout`을 받으려면 iframe의 인증 URL에 `sdk_presentation=embedded`를 추가하세요. 버전 0.5.0부터 [JavaScript SDK](https://docs.didit.me/ko/integration/web-sdks/javascript-sdk.md)가 이 프레젠테이션을 자동으로 설정합니다. 프레젠테이션 파라미터가 없으면 페이지는 독립형 레이아웃을 사용하며 레이아웃 메시지를 보내지 않습니다.이 호스트는 [권장 크기](#iframe-크기)를 따릅니다. 너비 1024px 이상에서는 고정 카드, 540px 이하에서는 전체 화면, 그 사이에서는 너비 500px의 iframe이 페이지가 보고하는 높이를 사용합니다:```html theme={null}





```541px에서 1023px 사이에서는 이 예시가 레이아웃 메시지가 도착하기 전까지 초기 높이 700px를 사용하며, 보이는 창 높이의 90%를 넘지 않도록 제한합니다. 데스크톱과 휴대폰 크기는 즉시 적용됩니다. 휴대폰에서는 iframe이 창 전체를 덮으므로, 호스트에서 인증을 벗어날 수 있는 방법을 제공하세요. iframe 주변에 배치하는 컨트롤은 `colorScheme`과 `dir`을 사용해 페이지의 테마와 텍스트 방향에 맞추세요.사용자의 연결이 끊기면 페이지에 "No internet connection" 화면이 표시되며, 연결이 복구되면 자동으로 닫힙니다. 사용자가 이 화면에서 **Exit Verification**을 선택하면 페이지는 `error: "network_error"`를 담은 `didit:error`를 보낸 뒤 `didit:cancelled`를 보냅니다. `didit:cancelled`를 받으면 iframe을 닫으세요.***## 모달 구현페이지 위에 겹쳐 표시되는 세련된 모달 경험을 위한 방법입니다:### HTML/CSS/JS```html theme={null}



  


  

  

    

      
      
    

  


  


```***## React 컴포넌트모달 기반 인증을 위한 재사용 가능한 React 컴포넌트입니다:```tsx theme={null}
import { useState, useEffect } from 'react';

interface DiditInContextProps {
  /**
   * Either the `url` returned by POST /v3/session/ (API session)
   * or your UniLink URL copied from the Console (Workflows → Copy Link).
   * Don't derive the UniLink yourself — the path segment is a 22-character
   * base64url encoding of the workflow UUID's raw bytes, not btoa(workflowId).
   */
  verificationUrl: string;
  isOpen: boolean;
  onClose: () => void;
  onComplete?: (sessionId: string, status: string) => void;
}

export function DiditInContext({ 
  verificationUrl, 
  isOpen, 
  onClose,
  onComplete 
}: DiditInContextProps) {
  const [iframeSrc, setIframeSrc] = useState('');

  useEffect(() => {
    if (isOpen) {
      setIframeSrc(verificationUrl);
      document.body.style.overflow = 'hidden';
    } else {
      setIframeSrc('');
      document.body.style.overflow = '';
    }
  }, [isOpen, verificationUrl]);

  // Listen for postMessage from iframe
  // Messages look like: { type: 'didit:', data: {...}, timestamp }
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      // Use your white-label domain here if you have one configured
      if (event.origin !== 'https://verify.didit.me') return;

      if (event.data?.type === 'didit:completed' && onComplete) {
        onComplete(event.data.data?.sessionId, event.data.data?.status);
        onClose();
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, [onComplete, onClose]);

  // Handle escape key
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen) onClose();
    };
    
    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    
 e.target === e.currentTarget && onClose()}
    >