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

Question

We are trying to integrate Duo Two factor authentication into our angular application. Here is a link to their documentation. The problem I am facing is that their JS file looks for an iframe when the page loads. But the iframe is going to be inside a partial which will render only on clicking a button. How do I run their code after all angular rendering is completed. Here is a link their JS file. Appreciate any pointers.

Answer 1

Assuming Angular 4 and 5.

First of all, download the js file ( https://api.duosecurity.com/frame/hosted/Duo-Web-v2.js ), then save it in the asset folder of the angular project. Open it and change the following line:

if (iframe) {

for this

if (false && iframe) {

With this, you ensure that iframe will load always that you call ngAfterViewInit.

In your component, which you will call and load when you press the button, add the following line:

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

In the ngAfterViewInit (where all angular rendering is completed, of course, you could call this Duo.init method wherever you want) method add this:

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

where this.duo is an object with the host and sig_request information. I used callback option because it is an SPA app, so I do not want to reload the page. Also, I used bind(this), because I want the component context, not the js context where callback is called. Callback function is something like this:

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...

  ...
}

Where sig_response is the response of the DUO service.

In the HTML template, just add:

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

That's it.

Hope it helps you.