Angular 8 front end with .NET Core back end DUO WebSDK integration?

[Carolyn]

We are considering creating an Angular 8 front end with .NET Core back end web site. Not sure how to integrate the two differing ends with a DUO push notification process.

The existing example from the WebSDK is a bit confusing in that regard. Does anyone already have experience in this area that could point us in the right direction? We already have the keys and application set up in the DUO admin area - we just need some idea how to incorporate the code into the web site properly. Thanks.

P.S. Duo Support made this statement
Because unexplored and unique webserver environments can be problematic to provide an all-encompassing solution for, it is necessary that Duo support not be involved in the architecture of code outside of the scope of the standard code we provide.

They basically said they are unable to discuss the issue with me and pointed me to the community forums to see if other folks had done such an implementation successfully.

[Carolyn]

So, just a bit of an update - I am having a partially working solution in that I can click a button, call the sign request functionality and get the sig-request value back from Duo.

My problem lies with the secondary portion of the functionality using the iframe. When I receive the sig-request I am routing to a new page that is supposed to hold the iframe. When I put an iframe into the html I immediately get an error saying that the host is missing from the Duo init. When I remove the iframe the screen just stays blank.

---

html iframe is like this:

<iframe id='duo_iframe'
        title='Two-Factor Authentication'
        frameborder='0'>
</iframe>

---

Angular code for running the iframe is like this:

  ngAfterViewInit() {
    if (this.duo.signRequest.length > 0) {
      console.log(this.duo.signRequest);
      Duo.init({
        iframe: "duo_iframe",
        host: this.hostName,
        sig_request: this.duo.signRequest,
        submit_callback: this.twoFactorVerify.bind(this),
      });
    }
  }

I know this is sort of working because I can read the duo.signRequest (there is a value), but no matter what I do the iframe is not working.

Anyone out there know what I’m talking about and how I might look at this differently in order to get it working?

[Carolyn · Accepted solution]

Moved the Angular code to the On Init method instead of the After View Init method and it works.

[sheldon_rodrigues]

Hey @Carolyn, I’m stuck in a similar situation.
In my case, I’m using Ember.js, not Angular.
The IFrame element appears on the screen, but it has no content. I have set up the Duo.init values correctly, but no matter what I do, the IFrame is blank.
Just a mention - I’m using ES6 module from here - https://github.com/duosecurity/duo_web_sdk

Let me know if you know the solution.
Thanks…

[Carolyn]

Hi @sheldon_rodrigues,

Two things to validate:

1. Did your signRequest actually have any values? If not the iFrame may not be able to load properly.
2. I had to add a little css to make it display properly (I will paste it below)

#duo_iframe {
width: 100%;
min-width: 304px;
max-width: 600px;
height: 320px;
display: block;
margin: 0 auto;
}

Basically, stepping through the process looked like this for my code base

1. Once user logs in normally (user is authenticated), it calls an angular service to sign the request. This actually calls an API on the back-end that uses the DuoWeb static class provided in their example calling the SignRequest method. The signature object from that method is returned back to the front-end. In my case that object contains the host url string, the sign request string obtained from DUO and an empty sign response string.
2. A successful return of the sign request object to the front end will then open the page containing the iFrame. On the page init (happens just before the objects are displayed to the DOM) the following values are set on the iFrame: host, sig_request, and submit_callback. This is where the iFrame should load and show up for the user. If it is missing those properties on the iFrame it won’t show up.
3. The user would then choose how to send the 2FA verification message - most of our users have the PUSH option. They wait for their push notification and approve (or deny) it - this in turn ends up calling the callback function on the web page that was set in the submit_callback property on the iFrame.
4. The callback function on the web page calls the back-end API which takes the sig response as a parameter. The API calls the DuoWeb static class VerifyResponse method passing in the iKey, sKey, aKey and the response from the web page iFrame to get a string representing the user.
5. If that string is null or empty then the verification failed; otherwise, it was a success. A bad request or an OK request are returned based on that.

Hopefully, somewhere in there is a nugget that is helpful for you. Good luck!

[sheldon_rodrigues]

Thanks @Carolyn,
I required a simple fix, somewhat similar to yours.
I was calling the Duo.init before the IFrame element containing HTML could load. I made sure I called the method after the HTML loaded. This helped show the IFrame properly.

[Kareem_Shaik]

Hi Carolyn,

In my case i am using angular 8 as front end and .net core as back-end and till duo authentication process is working fine once the user authenticated success fully i need to redirect the page to home screen and i am using the server post method and its API call from MVC controller and to redirect i cannot do it from service code. its need to down from client side code. can you suggest me how exactly i need to write in angular for redirect to home screen and below code the post method code.

string authuser = Duo.Web.VerifyResponse(keys sig_response);
string loggedInUser = string.Empty;
foreach (var item in RequestQueue.Queue)
{
loggedInUser = item.ToString();
}
bool isDuoAuthenticated = authuser == loggedInUser;
//Response.Redirect
return Json(new { isDuoAuthenticated });

[sehphirry]

Carolyn:

sig_request: this.duo.signRequest

Hi @Carolyn ,

How did you get the sig_request sig_request: this.duo.signRequest

like this: TX|YWI0OTgxNDg=|cb88d6f90:APP|YWI2NDU0NDg=|10f4d22a. From my account, I only get the secret ID, client ID and host.