Wyn Enterprise is a fully-secured enterprise business intelligence software that delivers collaborative self-service reporting and analytics. While Wyn Enterprise helps end-users design and work with ad hoc dashboards and reports, it also enables enterprise IT teams to integrate the functionality right into their business systems. They can leverage embedded BI to bring the analytics and KPIs to the user where they work, rather than have them switch to a special BI environment.

In this article, we'll integrate Wyn Enterprise in an ASP.NET Core app. Wyn, in itself, is a self-hosted application and doesn’t need to be integrated in any other tool or application; however, sometimes we may want to integrate it within our own applications.

To integrate Wyn Enterprise in an ASP.NET Core app:

  • Get an authentication token from the Wyn server through an api call.
  • Construct the Wyn Portal Url using this token.
  • Set this URL as the source of an iFrame.

Let’s look at these steps in detail.

Step 1: Create an ASP.NET Core App

Create an ASP.NET Core Web app with Razor pages (you could choose MVC if it suits you better). If you already have created an ASP.NET Core app, you can skip this step. If you don’t have one, you could refer to this tutorial to get started with Razor Pages in ASP.NET Core.

Step 2: Create the UI

Create the UI for the user to enter the Wyn URL, username and password. Since we’re going to send a POST request to the api to get the authentication token, we’ll place all our elements inside a form element with its method set to ‘post.’

Paste the following code in Index.cshtml:

<form method="post>
        <div class="align-content-center">
        <div class="centerAlign">
            <label>Wyn Url  </label>
            <input type="text" size="70" asp-for="User.WynUrl" />
        </div>
        <div class="centerAlign">
            <label>Username  </label>
            <input type="text" size="70" asp-for="User.Username" />
        </div>
        <div class="centerAlign">
            <label>Password  </label>
            <input type="password" size="70" asp-for="User.Password" />
        </div>
        <div class="centerAlignButton">
            <button id="btnLogin" type="submit">Login</button>
        </div>
    </div>
</form>

This is how it will look like with the above html:

Hosting Wyn in a Web Application via iFrame

Step 3: Get Authentication Token

Here, we’ll send out a POST request using HTTPClient to the Wyn api (/connect/token) with the entered username and password as part of the request’s body. Once we get a response we’ll use the returned token and append it to the Wyn url to be used as the source of iframe on the next page.

Place the following code in the OnPostAsync method of Index.cshtml.cs.

var request = new HttpRequestMessage(HttpMethod.Post, User.WynUrl.TrimEnd('/') + "/connect/token");
            Dictionary<string, string> body = new Dictionary<string, string>();
            body.Add("grant_type", "password");
            body.Add("username", User.Username);
            body.Add("password", User.Password);
            body.Add("client_id", "integration");
            body.Add("client_secret", "eunGKas3Pqd6FMwx9eUpdS7xmz");

            request.Content = new FormUrlEncodedContent(body);
            request.Content.Headers.ContentType = new MediaTypeHeaderValue("application/x-www-form-urlencoded");

            var client = _clientFactory.CreateClient(); 
            var response = await client.SendAsync(request);

            if (response.IsSuccessStatusCode)
            {
                var res = await response.Content.ReadAsAsync<Token>();
                User.WynUrl = User.WynUrl.TrimEnd('/') + "/integration/?token=" + res.Access_Token;
                return RedirectToPage($"/WynPortal", new { url = User.WynUrl, username = User.Username });
            }
            else
            {
                Console.Write(response.ReasonPhrase);
                return Page();
}

Step 4: Show Wyn Portal in iFrame

The final step is to use the Wyn URL from previous page as the source of iframe on the next page.

Place the following code in the .cshtml and .cshtml.cs pages of your Razor page.

WynPortal.cshtml:

<iframe id="wynframe" src="@Model.User.WynUrl" height="800" marginwidth="0" frameborder="0" width="1200"></iframe>

WynPortal.cshtml.cs:

[BindProperty]
public WynUser User { get; set; }
public IActionResult OnGet(string url, string username)
{
   User = new WynUser();
   User.WynUrl = url;
   User.Username = username;
   return Page();
}

Once you enter the Wyn URL, username and password and click login, this is how the next screen will look:

Hosting Wyn in a Web Application via iFrame

Are you interested in implementing an advanced BI system into your business? Try us out or request a demo to learn more about Wyn Enterprise.