Angular JS-Anwendung funktioniert nicht mit WCF-Service

Ich bin Wcf Service in Angular Js-Anwendung. Ich habe eine boolesche Funktion innerhalb des Dienstes, um den Benutzernamen und das Passwort zu akzeptieren. Ich versuche, ein Benutzer-Login-System mit Hilfe von Angular Js Application zu erstellen. Wenn der Benutzer den richtigen Benutzernamen und das korrekte Passwort eingibt, möchte ich den Benutzer in die Willkommensseite umleiten, aber wenn ich den richtigen Benutzernamen und das richtige Passwort eingegeben habe, funktioniert das nicht gemäß meiner Erwartung. In Google Chrome-Konsolenfenstern werden keine Fehler angezeigt.Angular JS-Anwendung funktioniert nicht mit WCF-Service

Hier ist die Schnittstelle.

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

Hier Implementierung ist ..

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; 
      } 
     }

Hier Script-Code ist.

///// <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"); 
    } 


})

Hier ist der HTML-Code ..

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

Hier ist der Screenshot, wenn ich die Anwendung auszuführen.

Jede Hilfe oder Vorschlag wird sehr geschätzt.

Quelle

2017-09-29 Anonymous

diese Linie

var promisePost = myService.post(User);

zeigt an, dass myService eine POST-Methode hat. Während es nicht.

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

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

versuchen

var promisePost = myService.AuthenticateUser(User);

und

//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)); 
}

ich weiter modifizieren würde empfehlen, einen Abfangjäger zu implementieren, und q Einsatz $ Versprechen zu lösen. this is a great tutorial.

Quelle

2017-09-29 00:33:42

seine sagen unerwartete Benutzereingabe ..error –

Ist das ein API-Fehler? Weitere Details zu der Fehlermeldung, die Sie posten könnten? Sie können auch die API/WCF debuggen, um festzustellen, ob Sie ein ordnungsgemäßes Benutzerobjekt erhalten. –

Uncaught Syntaxerror: unerwartetes Ende der Eingabe LoginScript.js: 54 Uncaught Syntaxerror: unerwartetes Ende der Eingabe –

Angular JS-Anwendung funktioniert nicht mit WCF-Service

Antwort

Verwandte Themen