2017-09-29 8 views
0

Angular JsアプリケーションにWcfサービスを使用しています。私は、ユーザー名とパスワードを受け入れるためにwcfサービス内に1つのブール関数を持っています。私は、Angular Js Applicationを使用してユーザーログインシステムを作成しようとしています。ユーザーが正しいユーザー名とパスワードを入力した場合は、ユーザーをウェルカムページにリダイレクトする必要がありますが、正しいユーザー名とパスワードを入力すると、私の期待通りに機能しません。 Google Chromeのコンソールウィンドウにエラーは表示されません。Angular JSアプリケーションがWCFサービスで動作しない

ここはInterfaceです。ここで

[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 true; 
        } 
        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.post(User); 
       promisePost.then(function (pl) { 
        $scope.Id = pl.data.Id; 
        window.location.href = "/Login/WelcomePage"; 

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

     }; 



    }]); 

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

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


}) 

は、私がアプリケーションを実行するとここで

@{ 
    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> 

スクリーンショット..ですHTMLコードです。 Click here to see the result

ご意見やご提案は高く評価されます。

答えて

0

このライン

var promisePost = myService.post(User); 

はmyServiceというPOSTメソッドを有することを示します。それはそうではありません。

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

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

var promisePost = myService.AuthenticateUser(User); 

を試してみて、

//add user to function param, and pass in post 
this.AuthenticateUser = function (user) { 
    return $http.post("http://localhost:52098/HalifaxIISService.svc/AuthenticateUser", JSON.stringify(user)); 
} 

を変更する私は、さらに約束を解決するためにインターセプタ、および使用の$ qを実装することをお勧めしたいです。 this is a great tutorial

+0

その予期せぬユーザー入力..error –

+0

APIエラーですか?投稿できるエラーメッセージの詳細また、API/WCFをデバッグして、適切なUserオブジェクトを受け取っているかどうかを確認することもできます。 –

+0

Uncaught SyntaxError:予期せぬ入力の末尾 LoginScript.js:54 Uncaught SyntaxError:予期しない入力の終了 –

関連する問題