Embed SDK 참조

설치

<script src="https://checkify.me/sdk/v1/checkify.min.js"></script>

로드 후 window.Checkify.version 는 SDK 릴리스(현재 1.0.4)를 보고합니다.

HTML 자동 마운트

페이지 로드 시 SDK은 다음 속성을 가진 요소를 자동 마운트합니다.

<div
  data-checkify-pass="YOUR_PASS_ID"
  data-checkify-request="human"
  data-checkify-text="Verify with Checkify"
  data-checkify-return-url="https://yoursite.com/done"
></div>

사용되지 않음: data-checkify-launcher 는 여전히 작동하지만 콘솔을 기록합니다. 경고. 대신 Pass + 요청 유형을 사용하세요.

폼 통합 속성

Checkify.bindForm을 사용할 때 폼 요소에 다음 설정을 추가할 수도 있습니다.

Checkify.configure(options)

위젯을 마운트하기 전에 전역 기본값을 설정하세요.

Checkify.configure({
  baseUrl: 'https://checkify.me',
  completeUrl: '/checkify/complete'
});

Checkify.bindForm(form, options)

Renders는 확인 버튼이고, 숨겨진 입력에 토큰을 쓰고, 확인될 때까지 제출을 비활성화합니다.

Checkify.bindForm('#my-form', {
  passId: 'YOUR_PASS_ID',
  requestType: 'human',
  buttonTarget: '#checkify-wrap',
  submitButton: '#submit',
  hiddenInput: '#checkify_token',
  disableSubmitUntilVerified: true
});

bindForm 옵션

Checkify.bindForm(form, options)의 두 번째 인수로 전달되는 일반적인 옵션:

Checkify.createHumanGate(options)

확인이 완료될 때까지 콘텐츠를 차단하는 전체 페이지 또는 컨테이너 게이트.

Checkify.createHumanGate({
  passId: 'YOUR_PASS_ID',
  requestType: 'human',
  container: '#gate-root',
  title: 'Verify to continue'
});

반환 URL 흐름

사용자가 Checkify 앱을 사용하는 경우 쿼리 문자열에 checkify_request_id 가 포함되어 귀하의 사이트로 돌아올 수 있습니다. SDK은 로드 시 자동으로 Checkify.checkReturnedVerification() 를 호출합니다.

Checkify.verify(옵션)

bindForm 없이 프로그래밍 방식으로 시작합니다. DOM 요소를 target으로 전달하세요(container가 아님 — container는 createHumanGate 전용). 폼에는 bindForm을 권장합니다. 사용자가 완료하거나 취소하면 resolve되는 Promise를 반환합니다.

const result = await Checkify.verify({
  passId: 'YOUR_PASS_ID',
  requestType: 'human',
  target: document.getElementById('checkify-root'),
  autoOpenModal: true
});
console.log(result.requestId); // send to your server as request_id

이벤트

window.addEventListener('checkify:verified', (e) => {
  console.log('Verified', e.detail);
});

window.addEventListener('checkify:return', (e) => {
  console.log('Returned from app', e.detail);
});

window.addEventListener('checkify:status', (e) => {
  console.log('Status', e.detail);
});

window.addEventListener('checkify:error', (e) => {
  console.error('Checkify error', e.detail);
});

상태 폴링(선택 사항)

대부분의 연동은 폼 제출 시 POST /v1/qr/results/verify를 사용하여 검증해야 합니다. 임베드를 사용하지 않는 사용자 지정 프런트엔드의 경우, 사용자가 앱에서 검증을 완료하는 동안 상태를 주기적으로 확인할 수 있습니다.

• 이전 임베드에서 가져온 레거시 설문 토큰:
• 시작 응답에서 가져온 요청 ID + 상태 토큰:

서버 확인

방법