아이프레임으로 신원 인증 통합하기: 개발 가이드

오늘날의 디지털 환경에서 사용자 신원 확인은 사기 방지, 규정 준수 및 신뢰 구축에 매우 중요합니다. 웹 애플리케이션에 신원 인증을 직접 통합하면 간소화된 사용자 경험을 제공합니다. 이 가이드에서는 초기 설정부터 이벤트 처리 및 모범 사례까지 Didit의 신원 인증 솔루션을 아이프레임을 사용하여 통합하는 방법을 안내합니다. 신원 인증 아이프레임의 견고하고 안전한 구현에 중점을 둘 것입니다.

핵심 요약 1 아이프레임은 핵심 애플리케이션에 대한 광범위한 코드 변경 없이 신원 인증을 통합하는 빠르고 간단한 방법을 제공합니다.

핵심 요약 2 애플리케이션과 아이프레임 간의 통신을 이벤트 처리를 통해 안전하게 관리하는 것은 데이터 무결성을 위해 가장 중요합니다.

핵심 요약 3 아이프레임과 함께 Didit의 API를 활용하면 검증 프로세스에 대한 세밀한 제어와 상세한 검증 결과에 대한 액세스가 가능합니다.

핵심 요약 4 아이프레임을 사용할 때는 XSS(교차 사이트 스크립팅) 취약점을 방지하기 위해 적절한 구성 및 보안 조치가 필수적입니다.

신원 인증에 아이프레임을 사용하는 이유는 무엇입니까?

신원 인증 통합은 상당한 개발 노력이 필요한 복잡한 작업이 될 수 있습니다. 아이프레임은 웹 페이지에 포함된 별도의 HTML 문서 내에서 검증 프로세스를 캡슐화하여 단순화된 접근 방식을 제공합니다. 이는 다음과 같은 여러 가지 이점을 제공합니다:

• 통합 복잡성 감소: 기존 코드 베이스에 대한 변경을 최소화합니다.
• 보안: 아이프레임은 샌드박스 환경에서 작동하여 잠재적인 보안 위험을 제한합니다.
• 빠른 구현: 광범위한 개발 주기 없이 빠르게 시작하고 실행할 수 있습니다.
• 유지 관리성: 검증 프로세스에 대한 업데이트는 아이프레임 내에 포함되어 애플리케이션에 미치는 영향을 최소화합니다.

아이프레임 설정: 단계별 가이드

다음은 웹 애플리케이션에 Didit의 신원 인증 아이프레임을 포함하는 방법입니다:

1. 아이프레임 URL 얻기: Didit Business Console에서 검증 링크(Unilink)를 생성하고 embed 매개변수를 true로 설정합니다. 그러면 아이프레임 통합을 위해 특별히 설계된 URL이 반환됩니다.
2. 아이프레임 요소 만들기: HTML 페이지에 <iframe> 요소를 추가합니다.
3. 아이프레임 속성 설정: 다음 속으로 아이프레임을 구성합니다.
   • src: 이것을 1단계에서 얻은 아이프레임 URL로 설정합니다.
   • width: 아이프레임의 너비를 정의합니다.
   • height: 아이프레임의 높이를 정의합니다.
   • frameborder: 테두리를 제거하려면 0으로 설정합니다.

예제 HTML 코드:

<iframe src="https://business.didit.me/verification?embed=true&apiKey=YOUR_API_KEY" width="600" height="400" frameborder="0"></iframe>

중요 참고: YOUR_API_KEY를 실제 Didit API 키로 바꾸세요. 항상 아이프레임 소스에 HTTPS를 사용하여 보안 통신을 보장하십시오.

JavaScript 통합 및 이벤트 처리

견고한 JavaScript 통합을 위해서는 아이프레임에서 발생한 이벤트를 처리해야 합니다. 이렇게 하면 애플리케이션이 완료, 실패 또는 오류와 같은 검증 이벤트에 응답할 수 있습니다. Didit의 아이프레임은 안전한 교차 출처 통신을 위해 postMessage를 사용합니다.

메시지 수신:

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://business.didit.me') {
    return;
  }

  const message = JSON.parse(event.data);

  switch (message.type) {
    case 'verification_completed':
      // 성공적인 검증 처리
      console.log('Verification completed:', message.data);
      break;
    case 'verification_failed':
      // 검증 실패 처리
      console.error('Verification failed:', message.data);
      break;
    case 'error':
      // 오류 처리
      console.error('Error:', message.data);
      break;
    default:
      console.log('Unknown message:', message);
  }
});

아이프레임으로 메시지 보내기:

const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage({ type: 'resize', height: 500 }, 'https://business.didit.me');

아이프레임 임베딩을 위한 보안 고려 사항

아이프레임은 편리함을 제공하지만 보안이 최우선 사항이어야 합니다. 주요 고려 사항은 다음과 같습니다:

• 출처 확인: 메시지 수신기에 있는 event.origin을 항상 확인하여 메시지가 예상 도메인(https://business.didit.me)에서 오는지 확인합니다.
• XSS 방지: 애플리케이션에서 표시하기 전에 아이프레임에서 받은 데이터를 소독하여 교차 사이트 스크립팅(XSS) 공격을 방지합니다.
• HTTPS만 사용: 애플리케이션과 아이프레임 소스 모두에 HTTPS를 항상 사용합니다.
• 콘텐츠 보안 정책(CSP): 아이프레임이 로드할 수 있는 리소스를 제한하기 위해 강력한 콘텐츠 보안 정책을 구현합니다.

Didit이 제공하는 도움

Didit은 웹 임베딩 프로세스를 다음과 같이 단순화합니다:

• 전용 아이프레임 URL: 아이프레임 통합을 위해 특별히 설계된 사용하기 쉬운 URL입니다.
• 보안 통신: 안전한 교차 출처 통신을 위한 postMessage API입니다.
• 종합적인 이벤트 처리: 검증 상태를 추적하고 오류를 처리하기 위한 상세한 이벤트입니다.
• API 통합: 고급 제어 및 데이터 액세스를 위한 Didit의 전체 API 스위트 액세스입니다.
• 확장 가능한 인프라: 높은 양의 검증 요청을 처리할 수 있는 안정적이고 확장 가능한 인프라입니다.

시작할 준비가 되셨습니까?

웹 애플리케이션에 신원 인증을 원활하게 통합할 준비가 되셨습니까? Didit의 포괄적인 문서 및 리소스를 살펴보세요:

• 기술 문서
• 데모 센터
• 가격

Didit으로 더 안전하고 신뢰할 수 있는 온라인 경험을 구축하십시오!