Weird Custom Login Issue #3217

Hello,

We have decided to take our login/page and make it more angular. However when we did this we noticed some weird responses from the server whenever we are trying to make API calls from the login page. For example, we submit the login details(using $http.post) and the server would response with an html page not a jsonresult as we expect from the action. When we login successfully, we will 302 response from the api call.

We are using MVC with angular

Here is the Login Action controller we are trying to call:

[HttpPost]
        [UnitOfWork]
        [DisableAuditing] 
        [DontWrapResult]
        public virtual async Task<JsonResult> Login(LoginViewModel loginModel, string returnUrl = "", string returnUrlHash = "", string service= "", string serviceReturnUrl = "")
        {
            CheckModelState();

            if (loginModel.LogIntoHost)
            {
                loginModel.TenancyName = null;
            }

            _unitOfWorkManager.Current.DisableFilter(AbpDataFilters.MayHaveTenant);

            var loginResult = await GetLoginResultAsync(loginModel.UsernameOrEmailAddress, loginModel.Password, loginModel.TenancyName);

            if (loginResult.User.ShouldChangePasswordOnNextLogin)
            {
                loginResult.User.SetNewPasswordResetCode();

                return Json(new AjaxResponse
                {
                    TargetUrl = Url.Action(
                        "ResetPassword",
                        new ResetPasswordViewModel
                        {
                            UserId = SimpleStringCipherProvider.Encrypt(loginResult.User.Id.ToString()),
                            ResetCode = loginResult.User.PasswordResetCode
                        })
                });
            }

            await SignInAsync(loginResult.User, loginResult.Identity, loginModel.RememberMe);

            var userRoles = await _userManager.GetRolesAsync(loginResult.User.Id);
            try
            {
                var token = await _ssoManager.Login(loginResult.User, loginResult.Tenant.Id, string.Join(",", userRoles));
                await _cacheManager.GetCache<string, string>(string.Format("{0}{1}UserSSO", loginResult.User.Id, loginResult.Tenant.Id)).SetAsync("token", token);                

                if (!service.IsNullOrEmpty() && returnUrl.Contains("http"))
                {
                    var appendQuery = returnUrl.Contains("?") ? string.Format("&authToken={0}&returnUrl={1}", token, serviceReturnUrl) : string.Format("?authToken={0}&returnUrl={1}", token, serviceReturnUrl);
                    returnUrl = returnUrl + appendQuery;

                    returnUrl = Url.Action("SSO", "Application", new { returnUrl = returnUrl });
                }
            }
            catch(Exception exp)
            {
                _logger.Error("Error Logging into SSO Server", exp);
            }

            if (string.IsNullOrWhiteSpace(returnUrl))
            {
                returnUrl = Url.Action("Index", "Application");
            }

            if (!string.IsNullOrWhiteSpace(returnUrlHash))
            {
                returnUrl = returnUrl + returnUrlHash;
            }            

            return Json(new AjaxResponse { TargetUrl = returnUrl });
        }

Here is the login js call

var CurrentPage = function () {

    var handleLogin = function () {

        var $loginForm = $('.login-form');

        $loginForm.validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                }
            },

            invalidHandler: function (event, validator) {
                $loginForm.find('.alert-danger').show();
            },

            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },

            success: function (label) {
                label.closest('.form-group').removeClass('has-error');
                label.remove();
            },

            errorPlacement: function (error, element) {
                error.insertAfter(element.closest('.input-icon'));
            },

            submitHandler: function (form) {
                $loginForm.find('.alert-danger').hide();
            }
        });

        $loginForm.find('input').keypress(function (e) {
            if (e.which == 13) {
                if ($('.login-form').valid()) {
                    $('.login-form').submit();
                }
                return false;
            }
        });

        $loginForm.submit(function (e) {
            e.preventDefault();

            if (!$('.login-form').valid()) {
                return;
            }

            abp.ui.setBusy(
                $('.login-form'),
                abp.ajax({
                    contentType: app.consts.contentTypes.formUrlencoded,
                    url: $loginForm.attr('action'),
                    data: $loginForm.serialize()
                }).done(function (response) {
                    console.log('response: ', typeof response);
                })
            );
        });

        $('a.social-login-icon').click(function() {
            var $a = $(this);
            var $form = $a.closest('form');
            $form.find('input[name=provider]').val($a.attr('data-provider'));
            $form.submit();
        });

        $loginForm.find('input[name=returnUrlHash]').val(location.hash);

        $('input[type=text]').first().focus();
    }

    return {
        init: function () {
            handleLogin();
        }
    };

}();