Client Setup for JWT Authentication
Creating a basic Angular application to access the random users resource. Also setting up CORS on the node server to enable the resource sharing across different domains (ports in our case).
Instructor: [00:00] We have our server running and it's serving up a random user every time we hit "/random-user." We want to create a front end client that is going to interface with this service. It will do so being served at from a different server.
[00:16] First we're going to make directory called "public." Then we'll go into that directory and bower install Angular. We'll create a new file called "index."
[00:29] Here we'll want to have a script for Angular and then we'll have another script that will create called app.js. We're going to want to make this an Angular app with the module app. We'll call this JWT example. Then we'll make a controller called main controller as view model.
[00:54] Then we'll have "Get Random User" with a div and a button. "Get User" and a quick handler on that, vm.getRandomUser.
[01:07] Then we'll just have, for simplicity's sake, a pre here that's bound to the vm.RandomUser.
[01:18] Now we're going to want to have our app. We'll create a new JavaScript file called "App" and we'll put this in an immediately invoking function. We'll have our app no dependencies.
[01:28] We're going to make a constant called API_URL because we're serving these up on different URLs. This is a construct for us to be able to make sure that all of our HTTP requests will go through the same URL.
[01:40] We're going to create a app.controller. We'll call this main controller. Then we'll have the vm.GetRandomUser assigned to GetRandomUser. We'll define that down here.
[01:52] This, we're obviously going to use a service for this so we'll say RandomUserFactory.GetUser().Then. We'll assign vm.randomUser to the data that we get back.
[02:09] Now let's create this RandomUserFactory. This will have the getUser. This will be a simple HTTP get. We'll use our API_URL/randomUser and we'll return that.
[02:24] Now we're going to need inject a couple things into our HTTP and our API_URL and then up here in our main controller we'll inject the RandomUserFactory. We also need to define getUser here.
[02:37] Let's see what we blew up. HTTP server and we'll go to localhost 8080. That's serving up our client side code, getUser. There is going to be an error. It's "Access-Control-Allow-Origin."
[02:54] This is CORS. CORS stands for Cross Origin Resource Sharing. It's a security mechanism. We have to enable CORS on our server explicitly.
[03:03] We're going to use a module, "npm install cors." This is just a very simple module that will enable CORS for us.
[03:10] Down here we'll say app.use(cors()). That should restart our server, get user, and object to object. It looks like we're not piping this through json.getUser. There we go.
[03:22] Then we can hit our server over and over again to get these random users.
[03:27] The next step will be, obviously, setting up authentication to protect this resource. That's what we'll cover in the next video.
http-server is a node module that just serves up a directory as static files. I would not recommend using tool approach in production. Look into static file server solutions. One thing that I've done in the past that was really easy was use an amazon s3 bucket to host my frontend code. Or you could use firebase hosting, or github pages hosting, or a host of other options.
I am following the series on JWT and everything is great until I run http-server (as you do) in the /public folder. Instead of it working like it did for you, I get "zsh: command not found: http-server". I already blew everything away once and started from scratch so I am pretty sure I haven't missed a step.
I started from an empty webstorm (actually, phpStorm) project just like you did and I have installed everything just as you did.
I suspect the http-server node package needs to be installed:
npm install -g http-server
Thanks, Joel. That worked and the site launched.
I am getting a TypeError: Cannot read property 'then' of undefined for the RandomUserFactory.getUser().then
Make sure that the getUser function is returning the promise created by $http. Like so:
return $http.get(API_URL + '/random-user');
i am getting undefined for req.body.username. followed the same steps. any idea
I find it helpful to use a Docker container with an NgInx instance.
Yes, you have to learn about Docker but it is so awesome that it will be worth your while.
I always spin up a number of Docker containers as part of my development proces, it's imho invaluable.
Took a little while to figure out why I was still getting a CORS error. Realized it's important to call cors() before defining any routes. :)
Hi, in my case everything works fine, except I am only able to click the button once and get the result. Any more clicks will not get any new random user!!! Any idea how to solve this??!
In the video Kent used a http-server in his public folder to launch his application. Is there a place in docs that explains if that is the best practice in using this method?