Calling a JSON API from my controller instead of from the view in my asp.net mvc web application

Question

I need to call a JSON API for a BPM engine from my asp.ner mvc web application . The API call to the BPM is constructed as follow:-

http://localhost:8080/jw/web/json/workflow/process/list?j_username=kermit&hash=9449B5ABCFA9AFDA36B801351ED3DF66&loginAs=' + username

where both the j_user & hash paramertes represents a master login username and password which are set at the BPM engine side. Currently i am calling the API using java/script at the view level from my asp.net mvc:-

$(document).ready(function () {
    var fullurl = 'http://localhost:8080/jw/web/json/workflow/package/list?j_username=kermit&hash=9449B5ABCFA9AFDA36B801351ED3DF66&loginAs=' + username ;
    $.ajax({
        type: "GET",
        url: fullurl, 

        dataType: "JSONP",
        // contentType: "application/json; charset=utf-8",
        success: function (result) {

            $.each(result.data, function (key, val) {

                // Format the text to display.
             //   var str = val.packageName + ' | ' + val.packageId;
                var str = val.packageName ;
                // Add a list item for the product.
                $('<li/>', { text: str })
                .appendTo($('#products'));

            });
        }
    });


});

But i was told that exposing both the master-login username and password and also the LoginAS username which represents the username of the login user at the asp.net mvc is not secure, AND THAT I SHOULD PERFORM THE API CALL AT THE SERVER SIDE INSTEAD OF MAKING THE API CALL FROM A JAVASCRIPT.

but my question is how i can convert my above code to receive the JSON from the mvc controller side and then pass the JSON to the view? Best Regards

Answer 1

You could use a WebClient to fire an HTTP request to the specified url:

public class PackagesController: Controller
{
    public ActionResult List()
    {
        using (var client = new WebClient())
        {
            var query = HttpUtility.ParseQueryString(string.Empty);
            query["j_username"] = "kermit";
            query["hash"] = "9449B5ABCFA9AFDA36B801351ED3DF66";
            query["loginAs"] = "some_username";
            var url = new UriBuilder("http://localhost:8080/jw/web/json/workflow/package/list");
            url.Query = query.ToString();
            string json = client.DownloadString(url.ToString());
            return Content(json, "application/json");
        }
    }
}

or you could use the new HttpClient introduced in .NET 4.5:

public class PackagesController : AsyncController
{
    public async Task<ActionResult> ListPackages()
    {
        using (var client = new HttpClient())
        {
            var query = HttpUtility.ParseQueryString(string.Empty);
            query["j_username"] = "kermit";
            query["hash"] = "9449B5ABCFA9AFDA36B801351ED3DF66";
            query["loginAs"] = "some_username";
            var url = new UriBuilder("http://localhost:8080/jw/web/json/workflow/package/list");
            url.Query = query.ToString();
            var response = await client.GetAsync(url.ToString());
            var result = await response.Content.ReadAsStringAsync();
            return Content(result, "application/json");
        }
    }
}

and from your javascript send an AJAX request to the aforementioned action:

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: '@Url.Action("List", "Packages")', 
            type: 'GET',
            cache: false,
            success: function (result) {
                $.each(result.data, function (key, val) {
                    var str = val.packageName;
                    $('<li/>', { text: str })
                        .appendTo($('#products'));
                });
            }
        });
    });
</script>