CODEWITHSUNDEEP
angularjsionic-framework
Paone
Paone

Reputation: 1

Angular JS API call using ionic framework

I am developing a hybrid mobile application using Ionic framework, in the application I have a login screen. After user the enter user ID and password, I have to do API call with user credentials.

The API is organised into a set of modules and methods which can be called by constructing the right combination of module and method, along with any accompanying data converted into a JSON array in a key:value format.

Here API method is authenticateUser, for that I have to append email and password in son array in a key-value format, but when I try to append it:

angular.toJson({'email':name,'password':pw})

it is converted like this: {\"email\":\"[email protected]\",\"password\":\"PassWd\"}"

in method : authenticateUser&data={\"email\":\"[email protected]\",\"password\":\"PassWd\"}"

My requirement is like this:

authenticateUser&data={"email":"[email protected]","password":"PassWd"}

How can I achieve this and how can I achieve password encryption too using ionic framework?

Thank you in advance.

Upvotes: 0

Views: 239

Answers (1)

yBrodsky
yBrodsky

Reputation: 5041

Here you have a code sample as requested. It's in spanish, but you will get the idea.

    <form class="form" name="form" novalidate ng-submit="form.$valid && login(); form.$submitted = true">
      <div class="list">
        <label class="item item-input" ng-class="{ 'has-error': (form.$submitted && form.email.$invalid)}">
          <input type="text" placeholder="Usuario" ng-model="auth.email" name="email" required>
        </label>
        <label class="item item-input" ng-class="{ 'has-error': (form.$submitted && form.password.$invalid)}">
          <input type="password" placeholder="Contraseña" ng-model="auth.password" name="password" required>
        </label>
        <button type="submit" class="button button-block button-positive">
          Ingresar
        </button>
      </div>
    </form>

As you can see, I have two inputs. One for email and one for password. The ng-model points to an object called "auth" which contains "email" and "password". My controller:

myApp.controller('AuthLoginCtrl', function($scope, Auth, $state, $localStorage, Comun, $ionicPlatform) {
  $scope.auth = {
    email: null,
    password: null
  };
  $scope.login = function() {

    Auth.login($scope.auth).$promise.then(function(response) {
      if(response.user) {
        $localStorage.user = response.user;
        $state.go('estadisticas.unidad.general');
      }else {
        $scope.error = true;
      }
    });
  };
});

Here you can see the auth object I mentioned, plus the login function. This function uses an Angular Resource (Auth) and calls it's login function. What this does is make a POST request to a certain URL (defined in the Auth resource) and post the form data which looks like this:

{
  email: '[email protected]',
  password: 'blabla',
}

This data is posted to my backend which tries to authenticate, etc. Let me know if there's something you don't understand.

Upvotes: 0

Related Questions