How to make angularjs call nodejs api and auth with storm track
The following code is run in angularjs, then routed through node, which then has to make an external api call. What happens is storm path intercepts the call and tries to authenticate it (login screen is supported ... I checked res.data). I thought the app was fine because I had to login first. I have not defined a route in ui-router because I want node to handle it, not angular. So my question is how to set up different layers to handle the call.
angular -> node / stormpath -> external api
node route:
app.use('/api/v1/accounts/:search', stormpath.groupsRequired(['dataentry']), apiAccounts.findAll);
installation of the assault:
app.use(stormpath.init(app, {
apiKeyFile: config.stormpathapi.apiKeyFile,
application: config.stormpathapi.application,
secretKey: config.stormpathapi.secretKey,
sessionDuration: 1000 * 60 * 30,
enableAutoLogin: true,
enableUsername: true
}));
angular code:
$scope.getCustomers = function(chars) {
var customers = [],
url = 'api/v1/accounts/' + encodeURIComponent(chars) + '/';
console.log('getCustomers: ' + url);
try
{
//return $http.jsonp(url)
return $http.get(url)
.then(function(res) {
if(angular.isArray(res.data))
{
customers = res.data;
}
return customers;
}, function (error) {
console.log('Unable to load the customers: ' + error)
});
}
catch(e){
console.log("error searching comapny: " + e);
}
}
The URL is well formed. If I make the call in a new browser window, it works (as expected) (and authenticates me via the windpath api). I want this functionality so that no one can use the api without logging into the application.
URL format:
http://localhost:3000/api/v1/accounts/ap/
res.data contains stormpath html:
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en" class="no-js"><!--<![endif]--><head><meta charset="utf- 8"><title>Log In</title><meta content="Log into your account!" name="description"><meta content="width=device-width" name="viewport"><link href="//fonts.googleapis.com/css? family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css"><link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"><style>html,
body {
height: 100%;
.....
<body class="login"><div class="container custom-container"><div class="va-wrapper"><div class="view login-view container"><div class="box row"><div class="email-password-area col-xs-12 large col-sm-12"><div class="header"><span>Log In or <a href="/register">Create Account</a>
.....
Thank!
source to share
I believe the Stormpath middleware intercepts the API call and tries to display the login page. I think the solution is to put stormpath.LoginRequired
middleware on the route that serves your Angular app, this will force them to go to the login page and after the login should have a session cookie to be used for API calls ...
source to share