javascript - AngularJs 应用程序无法使用 Wcf 服务验证用户登录

标签 javascript c# angularjs wcf

我正在将 Wcf 服务消耗到 Angular Js 应用程序中。我在 wcf 服务中有一个 bool 函数来接受用户名和密码。我正在尝试使用 Angular Js 应用程序创建用户登录系统,但是当我输入正确的用户名和密码时,它无法按照我的预期工作。 Google Chrome 控制台窗口中没有显示任何错误。

这是界面。

  [OperationContract]
        [WebInvoke(Method = "POST",
        RequestFormat = WebMessageFormat.Json,
        ResponseFormat = WebMessageFormat.Json,
        //BodyStyle = WebMessageBodyStyle.WrappedRequest,
        UriTemplate = "/AuthenticateUser")]
        bool AuthenticateUser(UserLogin userLogin);

这里是实现..

 public bool AuthenticateUser(UserLogin userLogin)
        {
            // ConfigurationManager class is in System.Configuration namespace
            string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            // SqlConnection is in System.Data.SqlClient namespace
            using (SqlConnection con = new SqlConnection(CS))
            {
                SqlCommand cmd = new SqlCommand("spAuthenticateUser", con);
                cmd.CommandType = CommandType.StoredProcedure;

                //Formsauthentication is in system.web.security
                string encryptedpassword = FormsAuthentication.HashPasswordForStoringInConfigFile(userLogin.Password, "SHA1");

                //sqlparameter is in System.Data namespace
                SqlParameter paramUsername = new SqlParameter("@UserName", userLogin.Username);
                SqlParameter paramPassword = new SqlParameter("@Password", encryptedpassword);

                cmd.Parameters.Add(paramUsername);
                cmd.Parameters.Add(paramPassword);

                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    int RetryAttempts = Convert.ToInt32(rdr["RetryAttempts"]);
                    if (Convert.ToBoolean(rdr["AccountLocked"]))
                    {
                        return false;
                    }
                    else if (RetryAttempts > 0)
                    {
                        int AttemptsLeft = (4 - RetryAttempts);
                        //lblMessage.Text = "Invalid user name and/or password. " +
                        //    AttemptsLeft.ToString() + "attempt(s) left";
                    }
                    else if (Convert.ToBoolean(rdr["Authenticated"]))
                    {
                        return true;
                    }

                }
                return false;
            }
        }

这是脚本代码。

///// <reference path="../angular.min.js" />  



var app = angular.module("WebClientModule", [])

    .controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {

        $scope.OperType = 1;

        //1 Mean New Entry  

        //To Clear all input controls.  
        function ClearModels() {
            $scope.OperType = 1;
            $scope.Username = "";
            $scope.Password = "";


        }


        $scope.login = function () {
            var User = {
                Username: $scope.Username,
                Password: $scope.Password,


            };
            if ($scope.OperType === 1) {

                var promisePost = myService.AuthenticateUser(User);
                promisePost.then(function (pl) {
                    $scope.Id = pl.data.Id;
                    window.location.href = "/Welcome/Index";

                    ClearModels();
                }, function (err) {
                    $scope.msg = "Password Incorrect !";
                    console.log("Some error Occured" + err);
                });
            }

        };



    }]);

app.service("myService", function ($http) {
    // Create new record  

    this.AuthenticateUser = function (User) {
        return $http.post("http://localhost:52098/HalifaxIISService.svc/AuthenticateUser", JSON.stringify(User));
    }
})

这是 HTML 代码..

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/RegistrationScript/LoginScript.js"></script>
</head>
<body>
    <table id="tblContainer" data-ng-controller="Web_Client_Controller">
        <tr>
            <td>

            </td>
        </tr>
        <tr>
            <td>
                <div style="color: red;">{{Message}}</div>
                <table style="border: solid 4px Red; padding: 2px;">

                    <tr>
                        <td></td>
                        <td>
                            <span>Username</span>
                        </td>
                        <td>
                            <input type="text" id="username" data-ng-model="Username" required="" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Password</span>
                        </td>
                        <td>
                            <input type="password" id="password" required data-ng-model="Password" require="" />
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            <input type="button" id="login" value="Login" data-ng-click="login()" />

                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
<script src="~/RegistrationScript/LoginScript.js"></script>

这是我运行应用程序时的屏幕截图。 Click here to see the result

他将不胜感激任何帮助或建议。

最佳答案

我在 jsfiddle 中运行了您的示例以查看发生了什么,然后我更改了它:

<body ng-app="WebClientModule">

我添加了 ng-app 属性,现在可以正常工作了。

请参阅下面的完整示例:

https://jsfiddle.net/s99t344y/2/

关于javascript - AngularJs 应用程序无法使用 Wcf 服务验证用户登录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46460397/

相关文章:

javascript - 选择后删除搜索字段中的文本

javascript - angularjs - 如何将输入元素转换为列表元素

javascript - css 中的动态或自适应类

javascript - 我怎么知道 node.js 需要的完整路径而不运行 require

javascript - 在 ES6 中将整个 JS 代码块包装在 {} 中

c# - 如何将 .NET 库的源代码获取到 VS

c# - ReadLine 吃掉波浪号

c# 自动裁剪图像

javascript - ui-calendar 首先隐藏然后显示时的问题

javascript - Angular JS 中 html 表格条目的分页