动态品牌与用户体验：利用 JavaScript 定制 Didit 的 iFrame (ZH)

无缝集成：通过 InContext iFrame 方法将 Didit 强大的身份验证直接集成到您的 Web 应用程序中，提供快速设置和嵌入式体验。

动态定制：利用 JavaScript 的 postMessage API 与嵌入式 iFrame 进行通信并动态设置其样式，确保您的品牌形象在整个验证过程中保持一致。

增强用户体验：处理来自 iFrame 的实时事件，例如验证完成或取消，以提供即时反馈并引导用户完成流畅、品牌化的旅程。

Didit 的灵活架构：Didit 的模块化和开发者优先方法，包括 InContext iFrame 和 JavaScript SDK，使开发者能够利用免费的核心 KYC 构建高度定制化和高效的身份验证工作流程。

集成 Didit 的 InContext iFrame 进行身份验证

在当今的数字环境中，强大的身份验证对于安全、合规和防欺诈至关重要。Didit 提供多种集成方法，对于寻求快速设置和嵌入式体验的企业来说，InContext iFrame 脱颖而出。这种方法允许您将 Didit 强大的身份验证功能直接嵌入到您的 Web 应用程序中，让用户留在您的域名内。虽然实现简单，但 iFrame 的真正强大之处在于它能够使用 JavaScript 进行动态定制，将标准的验证流程转变为无缝品牌化的用户旅程。

InContext iFrame 非常适合您希望在不重定向用户的情况下进行封闭验证流程的场景。它支持 UniLink（无需后端即可快速设置）和 API Session（通过后端实现完全定制）。通过嵌入 iFrame，您可以利用 Didit 的高级功能，包括 OCR、MRZ 解析和条形码解码，用于文档验证，同时保持对周围用户界面的控制。

使用 JavaScript 的 postMessage API 进行动态定制

虽然 iFrame 提供了嵌入式体验，但在整个用户旅程中保持品牌一致性至关重要。这就是 JavaScript 的 postMessage API 变得无价的原因。由于 iFrame 从不同的来源（Didit 的验证服务）加载内容，因此同源策略会阻止直接的 DOM 操作。但是，postMessage 可以在您的父页面和嵌入的 Didit iFrame 之间实现安全的跨域通信。

通过监听来自 iFrame 的特定事件或消息并向其发送消息，您可以动态调整其外观或行为。例如，您可能希望：

• 根据 iFrame 中加载的内容更改其高度或宽度。
• 当 iFrame 内完成验证步骤时，在您的父页面上触发特定操作。
• 如果 Didit 的 iFrame 配置支持，将样式参数传递给 iFrame 以匹配您的应用程序主题。

典型的设置包括：

1. 嵌入 Didit iFrame，其 src 属性指向验证 URL（例如，https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64）。
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 结合使用时，可以实现复杂的事件处理，从而显著改善用户体验。

例如，在成功验证后（您的后端将通过 Webhook 确认），您可以以编程方式关闭包含 iFrame 的模态框，显示成功消息，并让用户入驻。如果验证失败或取消，您可以提供重试或联系支持的选项。

考虑一个场景，您正在使用 Didit 的身份验证来引导新用户。用户在 iFrame 中完成文档捕获和提交后，Didit 会处理数据，包括执行被动和主动活体检测以防止深度伪造欺诈。您的后端会收到包含验证结果的 Webhook。然后，您可以使用 JavaScript 来：

• 一旦 iFrame 发送 'verification_submitted' 事件，就隐藏加载指示器。
• 在您的后端处理 Webhook 时，更新 UI 以显示“验证待处理”。
• 根据您的后端收到的最终状态并传达给前端，显示“验证已批准”或“验证已拒绝”。

这种级别的动态交互确保用户始终知情并参与，从而降低放弃率并建立对您平台的信任。

选择正确的集成方式：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 为创建高度可定制和安全的身份验证体验提供了基础构建块。我们的模块化架构允许您即插即用身份检查，例如身份验证、被动和主动活体检测，以及 1:1 人脸匹配和人脸搜索，所有这些都由尖端 AI 提供支持。对于嵌入式解决方案，InContext iFrame 提供了令人难以置信的快速设置，使您能够以最少的精力部署强大的验证。对于需要更深层次集成和动态控制的用户，我们的 JavaScript SDK 提供了构建定制用户旅程的工具，处理实时事件并保持完整的品牌连续性。

Didit 的平台旨在以开发者为中心，提供即时沙盒、全面的公共文档和清晰的 API。我们取消了设置费，并提供免费的核心 KYC 层级，使企业级身份验证触手可及。我们的 AI 原生方法确保了高准确性和自动化，减少了人工审核的需要并简化了您的操作。借助 Didit，您可以在全球范围内协调风险并自动化信任，确保为您的客户提供安全且用户友好的体验，同时满足合规性要求。

准备好开始了吗？

准备好亲身体验 Didit 的强大功能了吗？立即获取免费演示。

使用Didit 的免费层级开始免费验证身份。