Ionic集成Persona KYC遇X-Frame-Options报错求助

你遇到的错误是因为Persona官网设置了X-Frame-Options: deny，禁止自身被嵌入到iframe中，而默认的Persona SDK调用方式会尝试在Ionic的WebView（本质是iframe环境）中嵌入加载，因此触发了这个限制。以下是具体解决方案：

1. 修改Persona SDK的显示模式 #

初始化Persona.Client时，显式指定display参数为modal或popup，避免使用默认的嵌入模式：

function openClient(uid) {
  return new Promise((resolve, reject) => {
    const client = new Persona.Client({
        templateId: 'itmpl_KxEjwiJXJMntb25dJXdrBnTP',
        environmentId: 'env_gQDYrnzBZfXSiPWWdj4VSRGo',
        referenceId: uid,
        display: 'modal', // 推荐使用modal，在当前页面上层弹出
        // 若需新窗口打开可改为：display: 'popup'
        onReady: () => client.open(),
        onComplete: ({ inquiryId, status, fields }) => {
            console.log(`Completed inquiry ${inquiryId} with status ${status}`);
            resolve({ inquiryId, status, fields });
        },
        onCancel: () => reject(new Error('KYC验证已取消')),
        onError: (error) => reject(error)
     });
  });
}
function cancelClient() { client.cancel(true); }

2. 修正Typescript调用的异步逻辑 #

原代码中openClient未返回Promise，await不会等待KYC流程完成就直接执行后续操作。修改后可以确保验证完成后再标记状态：

declare var openClient; 
async openVerifyIdentityModal() {
  if (!this.verifyIdentity) {
    try {
      await openClient(this.auth.currentUser.uid);
      await Preferences.set({ key: "verifyidentity", value: "true" });
    } catch (error) {
      console.error('KYC验证失败或取消:', error);
      // 可在此添加错误提示逻辑
    }
  }
}

3. 配置Ionic允许导航到Persona域名（仅popup模式需要） #

如果选择display: 'popup'，需在Capacitor配置文件（capacitor.config.ts）中添加导航权限：

const config: CapacitorConfig = {
  // 其他原有配置...
  server: {
    allowNavigation: ['withpersona.com']
  }
};

内容的提问来源于stack exchange，提问作者Álex