Question

我们正在尝试将Duo Two factor身份验证集成到我们的角度应用程序中。 Here是其文档的链接。我面临的问题是他们的JS文件在页面加载时查找iframe。但是iframe将在partial中，只有在单击按钮时才会呈现。在完成所有角度渲染后，如何运行其代码。 Here是他们的JS文件的链接。感谢任何指针。

Answer 1

假设Angular 4和5。

首先，下载js文件（https://api.duosecurity.com/frame/hosted/Duo-Web-v2.js），然后将其保存在angular项目的asset文件夹中。打开它并更改以下行：

if (iframe) {

这个

if (false && iframe) {

这样，您可以确保始终加载iframe，并调用ngAfterViewInit。

在按下按钮时将调用并加载的组件中，添加以下行：

import * as Duo from '../../../../assets/duo/Duo-Web-v2'

在ngAfterViewInit中（其中所有角度渲染都已完成，当然，您可以在任何地方调用此Duo.init方法）方法添加：

ngAfterViewInit() {
  Duo.init({
    iframe: "duo_iframe",
    host: this.duo.host,
    sig_request: this.duo.sig_request,
    submit_callback: this.twoFactorVerify.bind(this),
  });
}

其中this.duo是具有host和sig_request信息的对象。我使用回调选项，因为它是一个SPA应用程序，所以我不想重新加载页面。此外，我使用bind（this），因为我想要组件上下文，而不是调用回调的js上下文。回调函数是这样的：

twoFactorVerify(response: any) {
  console.log(response.elements.sig_response.value);
  this.serviceApi.post('/two_factor_verify', 
     { sig_response: response.elements.sig_response.value }) bla, bla...

  ...
}

其中sig_response是DUO服务的响应。

在HTML模板中，只需添加：

<iframe id="duo_iframe" align=center></iframe>

就是这样。

希望它对你有所帮助。

无法将Duo Web SDK与角度应用程序集成

1 个答案: