Didit iFrame 맞춤 설정: JavaScript를 활용한 동적 브랜딩 및 사용자 경험 (KO)

원활한 통합Didit의 강력한 본인 인증 기능을 InContext iFrame 방식을 사용하여 웹 애플리케이션에 직접 통합하여 빠른 설정과 임베디드 경험을 제공합니다.

동적 맞춤 설정JavaScript의 postMessage API를 활용하여 임베디드 iFrame과 통신하고 동적으로 스타일을 지정하여 인증 프로세스 전반에 걸쳐 브랜드의 모습과 느낌을 일관되게 유지합니다.

향상된 사용자 경험인증 완료 또는 취소와 같은 iFrame의 실시간 이벤트를 처리하여 즉각적인 피드백을 제공하고 사용자가 원활하고 브랜드화된 여정을 거치도록 안내합니다.

Didit의 유연한 아키텍처InContext iFrame 및 JavaScript SDK를 포함한 Didit의 모듈식 개발자 중심 접근 방식은 개발자가 무료 Core KYC를 통해 고도로 맞춤화되고 효율적인 신원 확인 워크플로를 구축할 수 있도록 지원합니다.

본인 인증을 위한 Didit의 InContext iFrame 통합

오늘날의 디지털 환경에서 강력한 본인 인증은 보안, 규정 준수 및 사기 방지에 필수적입니다. Didit은 다양한 통합 방법을 제공하며, 임베디드 경험을 통해 빠른 설정을 원하는 기업에게는 InContext iFrame이 탁월한 선택입니다. 이 방법을 사용하면 Didit의 강력한 ID Verification 기능을 웹 애플리케이션 내에 직접 임베드하여 사용자가 도메인에 머무르도록 할 수 있습니다. 구현이 간단하지만, iFrame의 진정한 힘은 JavaScript를 사용하여 동적으로 맞춤 설정할 수 있는 능력에 있으며, 표준 인증 흐름을 원활하게 브랜드화된 사용자 여정으로 변화시킵니다.

InContext iFrame은 사용자를 리디렉션하지 않고도 포함된 인증 프로세스를 원하는 시나리오에 이상적입니다. UniLink(빠른 설정을 위해 백엔드 필요 없음)와 API Session(백엔드를 통한 완전한 맞춤 설정을 위해)을 모두 지원합니다. iFrame을 임베드함으로써 OCR, MRZ 파싱, 문서 확인을 위한 바코드 디코딩을 포함한 Didit의 고급 기능을 활용하면서 주변 사용자 인터페이스를 제어할 수 있습니다.

JavaScript의 postMessage API를 이용한 동적 맞춤 설정

iFrame이 임베디드 경험을 제공하지만, 전체 사용자 여정에서 브랜드 일관성을 유지하는 것이 중요합니다. 이 지점에서 JavaScript의 postMessage API가 매우 중요해집니다. iFrame이 다른 출처(Didit의 인증 서비스)에서 콘텐츠를 로드하므로, 동일 출처 정책에 의해 직접적인 DOM 조작이 차단됩니다. 그러나 postMessage는 부모 페이지와 임베디드 Didit iFrame 간의 안전한 교차 출처 통신을 가능하게 합니다.

iFrame에서 특정 이벤트나 메시지를 수신하고 iFrame에 메시지를 전송함으로써 iFrame의 모양이나 동작을 동적으로 조정할 수 있습니다. 예를 들어 다음과 같은 작업을 수행할 수 있습니다.

• 내부에 로드된 콘텐츠에 따라 iFrame의 높이나 너비를 변경합니다.
• iFrame 내에서 인증 단계가 완료될 때 부모 페이지에서 특정 작업을 트리거합니다.
• Didit의 iFrame 구성에서 지원하는 경우 애플리케이션의 테마와 일치하도록 스타일링 매개변수를 iFrame에 전달합니다.

일반적인 설정은 다음과 같습니다.

1. 인증 URL(예: https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64)을 가리키는 src 속성으로 Didit iFrame을 임베드합니다.
2. iFrame에서 메시지를 수신하기 위해 부모 창에 이벤트 리스너를 추가합니다.

window.addEventListener('message', (event) => {
  // 메시지가 신뢰할 수 있는 출처(Didit의 도메인)에서 왔는지 확인합니다.
  if (event.origin !== 'https://verify.didit.me') return;

  const data = event.data;
  if (data.type === 'didit-verification-event') {
    console.log('Didit iFrame event:', data.payload);
    // 'verification_completed', 'verification_failed' 등과 같은 이벤트를 처리합니다.
  }
});

이를 통해 애플리케이션은 iFrame의 상태에 지능적으로 반응하여 사용자 경험을 보다 효과적으로 안내할 수 있습니다.

사용자 경험 및 이벤트 처리 향상

진정으로 원활한 사용자 경험은 단순히 임베딩하는 것을 넘어섭니다. 명확한 피드백 제공, 상태 관리, 그리고 인증 프로세스의 다양한 결과를 우아하게 처리하는 것을 포함합니다. Didit의 iFrame 통합은 특히 JavaScript와 결합될 때 UX를 크게 향상시킬 수 있는 정교한 이벤트 처리를 가능하게 합니다.

예를 들어, 성공적인 인증(백엔드에서 웹훅을 통해 확인할 수 있음) 시, iFrame을 포함하는 모달을 프로그래밍 방식으로 닫고, 성공 메시지를 표시하며, 사용자를 온보딩할 수 있습니다. 인증이 실패하거나 취소되면 다시 시도하거나 지원팀에 문의할 수 있는 옵션을 제공할 수 있습니다.

Didit의 ID Verification을 사용하여 신규 사용자를 온보딩하는 시나리오를 고려해 보세요. 사용자가 iFrame 내에서 문서 캡처 및 제출을 완료하면 Didit은 딥페이크 사기를 방지하기 위해 Passive 및 Active Liveness 검사를 포함한 데이터를 처리합니다. 백엔드는 인증 결과가 포함된 웹훅을 수신합니다. 그러면 JavaScript를 사용하여 다음을 수행할 수 있습니다.

• iFrame이 'verification_submitted' 이벤트를 보낸 후 로딩 스피너를 숨깁니다.
• 백엔드가 웹훅을 처리하는 동안 UI를 'Verification Pending'으로 업데이트합니다.
• 백엔드에서 수신하고 프런트엔드에 전달된 최종 상태에 따라 'Verification Approved' 또는 'Verification Declined'를 표시합니다.

이러한 수준의 동적 상호 작용은 사용자가 항상 정보를 얻고 참여하도록 보장하여 이탈률을 줄이고 플랫폼에 대한 신뢰를 구축합니다.

올바른 통합 선택: iFrame vs. JavaScript SDK

InContext iFrame은 빠른 설정과 임베디드 편의성을 제공하지만, Didit은 최대의 프로그래밍 제어가 필요한 경우 강력한 JavaScript SDK도 제공합니다. 프로덕션 애플리케이션에 권장되는 SDK는 세션 관리, 이벤트 콜백 및 전체 TypeScript 지원을 제공하여 React, Vue, Angular 또는 바닐라 JS로 구축된 복잡한 애플리케이션에 이상적입니다.

iFrame은 최소한의 설정 시간(종종 1분 미만)과 포함된 즉시 사용 가능한 인증 흐름이 필요한 시나리오에 탁월합니다. 그러나 실시간 이벤트 콜백 및 사용자 흐름에 대한 완전한 프로그래밍 제어를 위해서는 JavaScript SDK가 뛰어난 유연성을 제공합니다. 두 가지 방법 모두 교차 장치 인증 및 화이트 라벨링을 지원하여 브랜드 일관성을 보장합니다.

개발자 중심 접근 방식에 대한 Didit의 약속은 기술 스택 및 사용자 경험 목표에 가장 적합한 방식으로 신원 확인을 통합할 수 있는 옵션을 제공한다는 것을 의미합니다. iFrame의 단순성을 통해서든 SDK의 강력한 기능을 통해서든 Didit의 AI 기반 플랫폼을 활용하여 안전하고 효율적인 신원 워크플로를 구축할 수 있습니다.

Didit이 도움이 되는 방법

Didit은 고도로 맞춤화되고 안전한 신원 확인 경험을 만들기 위한 기본 구성 요소를 제공합니다. 당사의 모듈형 아키텍처는 ID Verification, Passive & Active Liveness, 1:1 Face Match & Face Search와 같은 신원 확인 기능을 플러그 앤 플레이 방식으로 연결할 수 있도록 하며, 이 모든 것은 최첨단 AI로 구동됩니다. 임베디드 솔루션의 경우 InContext iFrame은 믿을 수 없을 정도로 빠른 설정을 제공하여 최소한의 노력으로 강력한 확인 기능을 배포할 수 있도록 합니다. 더 깊은 통합과 동적 제어가 필요한 경우 당사의 JavaScript SDK는 실시간 이벤트를 처리하고 완전한 브랜드 연속성을 유지하면서 맞춤형 사용자 여정을 구축할 수 있는 도구를 제공합니다.

Didit의 플랫폼은 즉각적인 샌드박스, 포괄적인 공개 문서 및 깔끔한 API를 제공하여 개발자 우선으로 설계되었습니다. 설정 수수료를 없애고 무료 Core KYC 등급을 제공하여 엔터프라이즈급 신원 확인을 접근 가능하게 합니다. 당사의 AI 기반 접근 방식은 높은 정확도와 자동화를 보장하여 수동 검토의 필요성을 줄이고 운영을 간소화합니다. Didit을 통해 전 세계적으로 위험을 조율하고 신뢰를 자동화하여 규정 준수 요구 사항을 충족하면서 고객에게 안전하고 사용자 친화적인 경험을 보장할 수 있습니다.

시작할 준비가 되셨나요?

Didit의 작동 방식을 보고 싶으신가요? 지금 바로 무료 데모를 받아보세요.

Didit의 무료 등급으로 무료로 신원을 확인하세요.