Checkify — 嵌入 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 + 请求类型。

方法	描述
`data-checkify-pass`	您的 Checkify Pass 公共 ID（必填）
`data-checkify-request`	Request type: human, age_over_18, age_over_21, age_over_25, or age_over_N
`data-checkify-text`	按钮标签文本
`data-checkify-return-url`	应用切换后要返回的可选 URL
`data-checkify-fields`	可选的以逗号分隔的身份字段（例如国家/地区）
`data-checkify-proofs`	当您的通行证支持多种证明方式时，可选择以逗号分隔的证明类型。
`data-checkify-launcher`	已弃用的启动器 ID — 请改用 data-checkify-pass

表单集成属性

使用 Checkify.bindForm 时，您也可以在表单元素上设置这些值：

方法	描述
`data-checkify-pass`	您的 Checkify Pass 公共 ID（必填）
`data-checkify-request`	Request type: human, age_over_18, age_over_21, age_over_25, or age_over_N
`data-checkify-form`	在表单上设置 data-checkify-pass（或 data-checkify-form），即可在页面加载时自动绑定，无需手动调用 bindForm。不支持 data-checkify-auto。
`data-checkify-hidden-input`	用于接收 request_id 的隐藏输入框的 CSS 选择器（默认值：input[name=checkify_token]）

Checkify.configure(options)

在安装小部件之前设置全局默认值。

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

Checkify.bindForm(form, options)

Render 是一个验证按钮，将令牌写入隐藏输入，并在验证之前禁用提交。

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) 的第二个参数的常用选项：

方法	描述
`passId`	Checkify Pass 公共 ID（除非通过 data-checkify-pass 在表单中设置，否则为必填项）
`requestType`	请求类型（人类，年龄超过18岁等）
`buttonTarget`	渲染验证按钮的容器元素。
`submitButton`	提交控制权以在验证后启用
`hiddenInput`	request_id 的隐藏字段选择器
`disableSubmitUntilVerified`	如果为真，则保持提交功能禁用状态，直到验证成功。

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(options)

不使用 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 + 状态令牌：

服务器验证

方法

方法	描述
`Checkify.mount(root?)`	在可选根元素下挂载传递小部件
`Checkify.bindForm(...)`	表单集成助手
`Checkify.createHumanGate(...)`	人工验证门UI
`Checkify.verify(options)`	编程验证流程
`Checkify.checkReturnedVerification()`	处理应用程序切换后的返回URL

嵌入SDK参考

安装