I am trying to learn how to use stormpath with express. I have a fullstack angular/node project that I generated with yeoman and the angular-fullstack generator. I got login, register and forgot password to work. But when I want to add a restriction on one of my routes so it only works for logged in users, it won't let anyone pass.
I initialise stormpath in my app.js on the server like this:
var stormpath = require('express-stormpath');
app.use(stormpath.init(app, {
apiKeyId: 'XXXXXXXXXXXXXXXXXXX',
apiKeySecret: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
application: 'https://api.stormpath.com/v1/applications/XXXXXXXXXXXXXXXXXXX',
secretKey: 'XXXXXXXXXXXXXXXXXXX',
expandCustomData: true,
enableForgotPassword: true
}));
My route in my api index.js file looks like this:
var express = require('express');
var stormpath = require('express-stormpath');
var router = express.Router();
router.post('/:id/vote', stormpath.loginRequired, function(req, res){
console.log("User clicked vote button!");
console.log("User e-mail: "+res.user.email);
});
And the problem I am experiencing is that when I call the post route, I get no logs at all. I am logged in on the site but it seems it doesn't let me access the route. If I remove stormpath.loginRequired, then it works, but then I am missing the user data.
Thank you for the help!
The express-stormpath module isn't yet designed for use with single-page applications like Angular. We have a seperate (beta!) module which is designed for Angular: stormpath-sdk-express
We have a detailed guide which explains how to use that module with Angular:
https://docs.stormpath.com/angularjs/guide/
Note: we are actively working on combining these modules, so there will be a future release where we combine all the features into one.
Hope this helps!
Related
I have a situation with my Angular 1.8.x routing.
In my angularApp.js file, I have html5mode enabled like:
$locationProvider.html5Mode(true);
My NodeJS app does the following:
module.exports = function(express, app){
var router = express.Router();
router.get('/*', function(req, res){
res.render('index.html');
});
app.use('/', router);
};
I do, however, have an issue with a third party library - Snipcart. What that is supposed to do is include E-commerce features to a frontend app. However, Snipcart's "checkout" button links to a URL with # in it and the Snipcart library doesn't work (doesn't go to the checkout and seems to do a few loops of the current page I am on).
My question is simply this - how can I workaround this? html5mode is a must unfortunately but I need to also be able to support links with a # in it.
Thanks in advance!
I don't know if this can be classed as an answer but I spoke to Snipcart and couldn't get it to work. I guess Angular 1 is just indeed that old
You can also consider urls without the hashtag in your project
http://joeljoseph.net/angularjs-remove-hash-from-url/
I'm trying to allow users to enter Youtube URL's so I can display the videos on my site, but I need to whitelist Youtube first. How can I fix my app.ts file to accommodate this in typescript? The documentation looks something like this:
.config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self', // trust all resources from the same origin
'*://www.youtube.com/**' // trust all resources from `www.youtube.com`
]);
});
The problem is that my .config doesn't contain the function keyword, I believe because I'm using typescript. My config currently looks like this:
angular.module('MyApp', ['ngRoute', 'ngResource']).config(($routeProvider: ng.route.IRouteProvider, $locationProvider: ng.ILocationProvider, $sceDelegateProvider: ng.ISCEDelegateProvider ) => {
$sceDelegateProvider.resourceUrlWhitelist([
'self', // trust all resources from the same origin
'*://www.youtube.com/**' // trust all resources from `www.youtube.com`
]);
I'm getting the same error that the url isn't being whitelisted. Do I need to just paste the .config with the function in a different area, or is there a way to include the Delegate provider in the same place as my route provider and location provider, etc?
Tried making changes to the web config to allow this, but just not going to work. Had to find another way to do this, using the embed url from the youtube video.
I'm new with ExpressJS, I have a small example using EJS, but I want use AngularJS for manipulating the DOM. Both technologies offer me DOM manipulation, so why some people use it together? I don't understand.
I have no idea how to render HTML files. What is the correct way to use AngularJS with ExpressJS?
res.render('index.html');
As far as I know EJS is really for templating, none of the embedded js is executed on the client.
Personally I have found some cases where it is handy to use a templating language with AngularJS or any client side framework. For example, sometimes it is nice to be able to interpolate some csurf tokens, or session data required by the client app into your html on the server. Other times it is not necessary.
As for rendering html, use the express.static middleware. It comes with Express, you pass a file path, and it returns a handler that will serve the contents of a given directory. You could put express.static anywhere in your middleware chain, but I usually put it at the top to avoid naming issues. Read the documentation for more information.
Consider the following:
var express = require('express')
var app = express();
// Asssuming we have a directory
// `public` in the root of the application
app.use('/', express.static(__dirname + '/public'));
// now you're serving all the files in public directory off the root path
// Add middlewares and routes...
For a really simple app you could you use the fs module, and stream the contents of a file to the response. The following is naive example of how you could do this, in production you would want to listen for error events and implement some cache control.
app.get('/', function(req, res) {
res.set('Content-Type', 'text/html');
fs.createReadStream('./index.html').pipe(res);
});
Please use this :to render first time
and for more information please go her http://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
})
I am working on creating a website with Angularjs and WebAPI as backend support with Visual studio.
I have defined the url to webapi in app.config.js as an app constant:
var serviceBase = 'http://localhost/Webapiservice/';
app.constant('ngAppSettings', {
apiServiceBaseUri: serviceBase,
clientId: 'ngTestApp'
});
Now for QA environments (http://QAServer/Webapiservice/), the webapi resides at a different URL, the same goes for our production environment (http://ProdServer/Webapiservice/).
I can manually update the js file to the appropriate location. But is there a way to automate this process so webAPI is pointing to the correct URL?
Is it possible to do this with grunt? Again I have never used grunt before.
ngConstant does a great job, along with grunt: https://github.com/werk85/grunt-ng-constant. This way you can specify your environments as JSON files and on compile/run time, grunt generates a enviornment.js file with a module (I call mine always ENV), which can be injected in every part of your application.
I would do something like this:
angular
.module('app', [])
.value('$path', {
rest : "http://localhost/Webapiservice"
})
you will call something like this:
app.constant('ngAppSettings', {
apiServiceBaseUri: $path.rest,
clientId: 'ngTestApp'
});
I'm using AngularJS and ExpressJS and having an issue with routing. I saw many other posts but none of those solutions seemed to work. Here is my routes in Express:
module.exports = function(app, auth) {
//Api routes
var mycontroller = require('../app/controllers/mycontroller');
app.get('/api/dostuff/:id', mycontroller.getBlockByHash);
//Home route
app.get("/", function(req, res) {
res.render('index');
});
};
When I go to my root /, everything works as expected. ExpressJS serves up my index and angular picks up the rest. When I click a link /blocks, it works as expected since AngularJS picks up the route. But when I refresh, I get a 404 not found error.
I tried app.get('*' instead, but that gives me a completely different error where nothing loads.
I'm using Jade to create the basic page structure with Express. My Express config is:
app.use(express.favicon());
app.use(express.static(config.root + '/public'));
When using html5Mode the documentation says:
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)
What it doesn't mention is:
You should exclude static assets like scripts/styles/images/fonts etc.
You should also exclude your Restful API.
Your case:
The error you got there is express serving html into script tags and the browser fails to parse them as a valid javascript.
Use express.static to serve static assets and then use app.get('*', for redirecting all other requests to your angular.js entry point (index.html).
express.js middleware order do counts!
express.static must be declared before app.router
Node.js / Express.js - How does app.router work?