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.