> ## 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.

# 웹 신원 인증 SDK: JS 및 iframe

> Didit의 웹 KYC, KYB, AML 및 생체 라이브니스 SDK: JavaScript, iframe, 리디렉션 또는 WebView 지원. 전체 KYC 건당 $0.33부터, 월 $10 무료, 계약 없음.

> [!NOTE]
>
> 이 가이드는 신원 인증을 다룹니다. 최종 사용자 로그인에는 [인증 플랫폼 가이드](https://docs.didit.me/ko/authentication/overview.md)를 사용하세요. 새로운 인증 패키지는 릴리스에 따라 제공 여부가 다릅니다.

웹 애플리케이션에 Didit 인증을 통합하세요. 아키텍처와 사용자 경험 요구 사항에 맞는 일곱 가지 통합 방식을 제공하니, 사용 중인 스택에 맞는 방식을 고르면 됩니다.

> [!NOTE]
>
> **통합 방식 선택**: 별도 코드 없이 바로 쓸 수 있는 iframe부터 JavaScript SDK를 이용한 완전한 프로그래밍 방식 제어, WordPress, Shopify, Salesforce용 드롭인 플러그인까지 선택지가 있습니다.

***

## 통합 방식

| 방식 | 설정 시간 | 백엔드 필요 여부 | 적합한 경우 |
| - | - | - | - |
| [JavaScript SDK](https://docs.didit.me/ko/integration/web-sdks/javascript-sdk.md) | 3분 | 선택 사항 | 전체 제어 — React/Vue/Angular/Next.js/Nuxt/Svelte/바닐라 JS |
| [InContext (Iframe)](https://docs.didit.me/ko/integration/web-sdks/incontext-iframe.md) | \< 1분 | 선택 사항 | 리디렉션 없이 임베드된 경험 |
| [Redirect](https://docs.didit.me/ko/integration/web-sdks/web-redirect.md) | 5분 | 예 | 최대 호환성, 기기 간 인증 흐름 |
| [WebView (iOS/Android)](https://docs.didit.me/ko/integration/web-sdks/webview-in-ios-android.md) | 15분 | 예 | 네이티브 SDK를 사용할 수 없을 때의 모바일 대체 방식 |
| [WordPress + WooCommerce](https://docs.didit.me/ko/integration/web-sdks/wordpress-woocommerce.md) | 5분 | 노코드 | WordPress 사이트, WooCommerce 스토어 |
| [Shopify](https://docs.didit.me/ko/integration/web-sdks/shopify.md) | 5분 | 노코드 | Shopify 스토어 — 결제 또는 계정 인증 |
| [Salesforce](https://docs.didit.me/ko/integration/web-sdks/salesforce.md) | 10분 | 노코드 | Salesforce CRM — Contact/Lead 레코드 인증 |

> [!NOTE]
>
> **권고**: 프로덕션 웹 앱에는 최상의 UX와 완전한 프로그래밍 방식 제어를 위해 **JavaScript SDK**를 사용하세요. 가장 빠르게 설정하려면 **InContext iframe**을, 기기 간 인증이 필요하면 **Redirect**를 사용하세요. 해당 플랫폼을 사용 중이라면 전용 **WordPress / Shopify / Salesforce** 통합을 사용하세요.

***

## JavaScript SDK

Didit JavaScript SDK는 사용자 경험을 완전히 제어하면서 인증을 프로그래밍 방식으로 통합할 수 있게 해 줍니다.

**주요 기능:**

* 세션 관리 및 이벤트 콜백
* React, Vue, Angular, NextJS, Nuxt, Svelte 및 바닐라 JS 지원
* 완전한 TypeScript 지원
* 모달 및 인라인 모드

**빠른 시작:**

```javascript theme={null}
import { DiditSdk } from '@didit-protocol/sdk-web';

DiditSdk.shared.onComplete = (result) => {
  switch (result.type) {
    case 'completed':
      console.log('Verification completed!');
      console.log('Session ID:', result.session?.sessionId);
      console.log('Status:', result.session?.status);
      break;
    case 'cancelled':
      console.log('User cancelled verification');
      break;
    case 'failed':
      console.error('Verification failed:', result.error?.message);
      break;
  }
};

// Start verification with the `url` returned by POST /v3/session/ (or your UniLink)
DiditSdk.shared.startVerification({
  url: 'https://verify.didit.me/session/3FaJ9wLqX2Mz'
});
```

→ [**JavaScript SDK 전체 문서**](https://docs.didit.me/ko/integration/web-sdks/javascript-sdk.md)

***

## InContext (Iframe)

iframe을 사용해 인증 흐름을 애플리케이션 안에 직접 임베드하세요. 사용자를 사이트 밖으로 리디렉션하지 않아 끊김 없는 경험을 제공합니다.

**주요 기능:**

* UniLink(백엔드 불필요) - \< 1분 내 설정
* API 세션(백엔드 필요) - 전체 커스터마이징
* 모달 및 인라인 구현
* React 컴포넌트 예제

**빠른 시작:**

```html theme={null}
<iframe 
  src="https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64"
  style="width: 100%; height: 700px; border: none;" 
  allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
></iframe>
```

→ [**InContext 전체 문서**](https://docs.didit.me/ko/integration/web-sdks/incontext-iframe.md)

***

## Redirect

사용자를 Didit에서 호스팅하는 인증 페이지로 리디렉션하세요. 완료 후 사용자는 콜백 URL로 돌아옵니다.

**주요 기능:**

* 최대 브라우저 호환성
* 기기 간 인증 지원
* 간단한 통합
* iframe 카메라 접근에 문제가 있을 때 작동

**빠른 시작:**

```javascript theme={null}
// After creating a session via your backend
window.location.href = verificationUrl;
```

→ [**Redirect 전체 문서**](https://docs.didit.me/ko/integration/web-sdks/web-redirect.md)

***

## 비교

| 기능 | JavaScript SDK | InContext (Iframe) | Redirect |
| - | - | - | - |
| 설정 시간 | 3분 | \< 1분 | 5분 |
| 백엔드 필요 여부 | 선택 사항 | 선택 사항 | 예 |
| 사용자 도메인에 유지 | 예 | 예 | 아니요 |
| 기기 간 지원 | 예 | 예 | 예 |
| 완전한 프로그래밍 방식 제어 | 예 | 제한적 | 콜백만 |
| 이벤트 콜백 | 실시간 | `postMessage` | 콜백만 |
| 화이트 라벨 | 예 | 예 | 예 |
| 브라우저 호환성 | 전체 | 전체 | 전체 |

> [!NOTE]
>
> 세 가지 방식 모두 최종 서명된 결과를 [webhook](https://docs.didit.me/ko/integration/webhooks.md)으로 전달합니다. 위 비교표는 브라우저 내 UX를 설명하며, 인증 결정을 수신하는 방법을 설명하지 않습니다.

***

## 구성

### 필수 iframe 권한

InContext iframe 통합에서는 다음 권한을 항상 포함하세요.

```html theme={null}
allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
```

***

## 예제 저장소

> [card] [SDK 웹 예제](https://github.com/didit-protocol/sdk-web-examples)
>
> React, Vue, Angular, Next.js, Nuxt, Svelte, 바닐라 JS 예제

> [card] [iframe 예제](https://github.com/didit-protocol/iframe-example)
>
> UniLink 및 API 세션 iframe 예제

> [card] [Next.js 전체 데모](https://github.com/didit-protocol/didit-full-demo)
>
> 엔드투엔드 Next.js 통합

> [card] [NPM 패키지](https://www.npmjs.com/package/@didit-protocol/sdk-web)
>
> npm의 `@didit-protocol/sdk-web`

## 관련 문서

* [webhook](https://docs.didit.me/ko/integration/webhooks.md) — 백엔드에서 서명된 인증 결과를 수신
* [세션 생성 API](https://docs.didit.me/ko/sessions-api/create-session.md) — 모든 웹 SDK의 기반 endpoint
* [네이티브 SDK](https://docs.didit.me/ko/integration/native-sdks/overview.md) — iOS, Android, React Native, Flutter


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.