웹 신원 인증 SDK: JS 및 iframe

이 가이드는 신원 인증을 다룹니다. 최종 사용자 로그인에는 인증 플랫폼 가이드를 사용하세요. 새로운 인증 패키지는 릴리스에 따라 제공 여부가 다릅니다.

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

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

통합 방식

방식	설정 시간	백엔드 필요 여부	적합한 경우
JavaScript SDK	3분	선택 사항	전체 제어 — React/Vue/Angular/Next.js/Nuxt/Svelte/바닐라 JS
InContext (Iframe)	< 1분	선택 사항	리디렉션 없이 임베드된 경험
Redirect	5분	예	최대 호환성, 기기 간 인증 흐름
WebView (iOS/Android)	15분	예	네이티브 SDK를 사용할 수 없을 때의 모바일 대체 방식
WordPress + WooCommerce	5분	노코드	WordPress 사이트, WooCommerce 스토어
Shopify	5분	노코드	Shopify 스토어 — 결제 또는 계정 인증
Salesforce	10분	노코드	Salesforce CRM — Contact/Lead 레코드 인증

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

JavaScript SDK

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

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

빠른 시작:

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 전체 문서

InContext (Iframe)

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

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

빠른 시작:

<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 전체 문서

Redirect

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

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

빠른 시작:

// After creating a session via your backend
window.location.href = verificationUrl;

→ Redirect 전체 문서

비교

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

세 가지 방식 모두 최종 서명된 결과를 webhook으로 전달합니다. 위 비교표는 브라우저 내 UX를 설명하며, 인증 결정을 수신하는 방법을 설명하지 않습니다.

구성

필수 iframe 권한

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

allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"

예제 저장소

SDK 웹 예제

React, Vue, Angular, Next.js, Nuxt, Svelte, 바닐라 JS 예제

iframe 예제

UniLink 및 API 세션 iframe 예제

Next.js 전체 데모

엔드투엔드 Next.js 통합

NPM 패키지

npm의 @didit-protocol/sdk-web

가이드

인증

Model Context Protocol(MCP)

웹 SDK

네이티브 SDK

서버 SDK

연동

웹 신원 인증 SDK: JS 및 iframe

통합 방식

JavaScript SDK

InContext (Iframe)

Redirect

비교

구성

필수 iframe 권한

예제 저장소

SDK 웹 예제

iframe 예제

Next.js 전체 데모

NPM 패키지

관련 문서

​통합 방식

​JavaScript SDK

​InContext (Iframe)

​Redirect

​비교

​구성

​필수 iframe 권한

​예제 저장소

SDK 웹 예제

iframe 예제

Next.js 전체 데모

NPM 패키지

​관련 문서

통합 방식

JavaScript SDK

InContext (Iframe)

Redirect

비교

구성

필수 iframe 권한

예제 저장소

관련 문서