在 NextJS 上實現 Persona Idv

Question

我們正在嘗試在我們的 NextJS 應用程序上使用嵌入式 Persona 流程。

代碼如下：

export default function PersonaTest(props) {
  const PersonaInquiry = dynamic(() => import('persona').then((mod) => mod.Inquiry), { ssr: false });

  const RenderFrame = () => (
    <PersonaInquiry
      templateId="itmpl_Ygs16MKTkA6obnF8C3Rb17dm"
      environment="sandbox
      frameHeight="900"
      frameWidth="500"
      parent="root"
      onLoad={() => {
        console.log('Loaded inline');
      }}
      onComplete={({ inquiryId, status, fields }) => {
        // Inquiry completed. Optionally tell your server about it.
        console.log(`Sending finished inquiry ${inquiryId} to backend`);
      }}
    />
  );

  return (
    <>
      <Grid container spacing={2} style={{ paddingTop: 400 }}>
        <Grid item xs={12} sm={6}>
          <div id="root" />
          <RenderFrame />
        </Grid>
      </Grid>
    </>
  );
}

Persona 組件呈現並嵌入 iframe 以允許 idv 流。

Persona 小部件已呈現，但在一個非常小的框架中。 似乎忽略了參數 frameHeight、frameWidth 和 parent。

為什么需要動態渲染來允許組件渲染 iframe（如果不是，它會拋出 'self' 類型的錯誤）。

角色支持無法診斷/幫助。

我究竟做錯了什么？

謝謝！

我嘗試了很多選項來設置框架的高度和寬度。

Answer 1

我有一個類似的問題，並在我進行故障排除時發現了這一點 - frameHeight和frameWidth僅設置最大高度和寬度。 Persona 的文檔建議從父容器中定位一般的iframe標簽，這最終對我有用。 我將我的PersonaInquiry標簽包裝在一個樣式化的組件中，並從那里定位子iframe標簽。 希望有幫助！