rfcabal rfcabal - 20 days ago 5
AngularJS Question

Get token with Angularjs

I'm working on an Angularjs + Moodle + WebService APP

I have done a little Login page and have a question.

I'm getting the Token of my user via

$.ajax
and I can see it in my chrome console.

The thing is, I want to save that token for using it in WS moodle fuctions and I'm usin
JSON.strungify
to get the token, but I have not successed.

I just get -> {readystate: 1} as an alert, instead get a token. but in my
console.info(response);
I got the token as show the next image :

JS Response

Thi is my code:

controller.js

var app = angular.module('mainApp', ['ngRoute', 'toaster', 'ngAnimate']);

app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html'
})
.when('/dashboard', {
resolve: {
"check": function($location, $rootScope) {
if(!$rootScope.loggedIn){
$location.path('/');
}
}
},
templateUrl: 'dashboard.html'
})
.otherwise({
redirectTo: '/'
});
});


app.controller('loginCtrl',

function($scope, $location, $rootScope) {
$scope.submit = function() {
/*if($scope.username == 'admin' && $scope.password == 'admin') {
$rootScope.loggedIn = true;
$location.path('/dashboard');
} else {
alert('Wrong Stuff');
}*/
$rootScope.loggedIn = true;
var username = $scope.username;
var password = $scope.password;
postCredentials(username, password/*, createSession*/);

};

function postCredentials(username, password, callback) {
if (username!==null || password!==null) {


var serverurl = 'https://comunidaddeaprendizaje.cl/ac-cap/login/token.php';

var data = {
username: username,
password: password,
service: 'moodle_mobile_app' // your webservice name
}

var response = $.ajax(
{ type: 'POST',
data: data,
url: serverurl,
dataType: 'JSON'
}
);

console.info(response);
dataString = JSON.stringify(response);
alert(dataString);

if (dataString.indexOf('error') > 0) {
alert('Invalid user credentials, please try again');
};

} else {
alert('Something Wrong');
}
}

}

);


login.html

div class="breadcrumbs" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">Home</a>
</li>
<li class="active">Login</li>
</ul>
</div>

<div class="page-content">

<div class="row">
<div class="space-6"></div>
<div class="col-sm-10 col-sm-offset-1">
<div id="login-box" class="login-box visible widget-box no-border">
<div class="widget-body">
<div class="widget-main">

<h4>Login ACCAP</h4>

<div ng-controller="loginCtrl">
<form action="/" class="form-horizontal" id="myLogin">
<div class="form-group">
UserName:
<input type="text" class="form-control" id="username" ng-model="username" required focus><br>
Password:
<input type="password" class="form-control" id="password" ng-model="password" required>
</br>
<button type="button" class="width-35 pull-right btn btn-sm btn-primary" ng-click="submit()">
<div class="col-sm-7">
<i class="ace-icon fa fa-key"></i>
Login
</button>
</div>
</div>
</form>
</div>

</div>
</div>
</div>
</div>
</div>
</div>


index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login APP</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.7/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="mainApp">
<div ng-view></div>
</body>
</html>


Thanks for your help!

Answer

The response variable is an object which contains a lot of information about the response. It is not the same as your response text.
Your second mistake is that your AJAX call is asynchronous, so you cannot obtain your response immediately after AJAX call. You need to wait for the response. Instead of

var response = $.ajax({
  type: 'POST',
  data: data,
  url: serverurl,
  dataType: 'JSON'
});
console.info(response);
dataString = JSON.stringify(response);
alert(dataString);
if(dataString.indexOf('error') > 0) {
  alert('Invalid user credentials, please try again');
};

you should write

var response = $.ajax({
  type: 'POST',
  data: data,
  url: serverurl,
  dataType: 'JSON',
  success: function(response) {
    console.info(response);
    dataString = JSON.stringify(response);
    alert(dataString);
    if(dataString.indexOf('error') > 0) {
      alert('Invalid user credentials, please try again');
    };
  }
});