Check out a free preview of the full API Design in Node.js (using Express & Mongo) course:
The "Exercise 12 Solution, continued" Lesson is part of the full, API Design in Node.js (using Express & Mongo) course featured in this preview video. Here's what you'd learn in this lesson:

Scott continues talking about the solution to exercise 12. He demonstrates the working user interface and uses the Chrome Developer Tools to show the authorization tokens in action.

Get Unlimited Access Now

Transcript from the "Exercise 12 Solution, continued" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott Moss: So, this should be working right, so if you go, [SOUND]. NPM starts, boom boom boom, that's still running. We should be able to come in here and have that, right. So, if I go to admin. They'll go to admin, but just to show you that this is working, if I opened up this, the console, I go to resources, I get rid of the JSON web Token.

[00:00:34] Is saving this by the way, if you're wondering how that got there. Then I refresh, and if I click on admin they're like, no, no, you've got to go to sign in. I don't have an account, so I'm gonna sign up. So, this is the thing that we just made, so let's test that out.

[00:00:46] Let's sign up for an account. Cool, that worked, brought us to admin. Now if we go look back at the resources you'll see.
>> Scott Moss: That the JSON Web Token is there now. It's this thing right here. That's the JSON Web Token. You see that? And then what I want to show you is, like what is happening on every single course.

[00:01:11] Remember we said, the JSON Web Token must be sent on every single request. And it must be on the authorization header. And it must have like bearer space the token or on the query param. If you look at the output of our terminal here, it's definitely not on a query param because if it was it would show it right here.

[00:01:27] If it was on a query param it would show it right here. So it's not in a query param, so we're assuming that it's on the header. Also here's that options request that I was talking about as far as cores. You'll see that it's saying options, options. That's the preflight check that Chrome is sending, to make sure that we can access the resources.

[00:01:46] But, so now, let's do this. I'm gonna say, my new blog post love to write Java scripts like in JavaScript. So, if I hit done, that totally created it right and my blog is there. But let see what that looked like, out of the way I guess I need to have it open when I do it right, otherwise it won't do.

[00:02:16] You go out here that's really annoying. So, let's go back to admin and try that again. I want you to see what the headers are. So, another post, blah, blah, blah, blah, blah, blah, blah, blah and done. Cool. So, that made a post, is this the post request?

[00:02:40] No, that's the git request. Is that the poster class? Here it is. All right, so here's the headers.
>> Scott Moss: Right there, see that?
>> Scott Moss: So, here are our headers that we sent. Authorization header, Bearer, and then the JSON Web Token. That's Angular doing that. So before, every single request, Angular goes into local storage.

[00:03:08] It looks for the thing the Local Storage key that I gave it which is, in this case, it looks for anything with this key, ngblog/token. And if there's something there, it grabs the token and then attaches it to the header, Authorization property as Bearer space header.
>> Speaker 2: Can you show-

[00:03:28]
>> Scott Moss: Before the request goes out.
>> Speaker 2: Can you show that again in the code?
>> Scott Moss: In the Angular code?
>> Speaker 2: Yeah, or that's against the rules.
>> Scott Moss: It's not against the rules. Does anybody wanna see that? I don't know, this is a node class, anybody wanna see that in Angular?

[00:03:41]
>> Speaker 2: Or else you can just tell me where it is.
>> Scott Moss: Yeah, it's on the block branch. Go to share.js, it's in that file, you'll see it. All right, everybody with me how that works? Yeah, Mark?
>> Mark: They were wondering, how does this all work with API key style authorization?

[00:04:01] Do you just treat the API key as a prebuilt token of a user name and password?
>> Scott Moss: How does this work with the API key style?
>> Mark: Yeah.
>> Scott Moss: So API key is not the same thing as this. So, what we're talking about is user authentication and stuff like that.

[00:04:16] API key is more like an application identification and authorization. So API key is like I have this API server and let's say it has, I don't know, three clients. We have a web client, we have an Android client, we also have a IOS client, right? So, in order to only allow requests to come in from those three clients, we might make API keys for those three clients.

[00:04:40] Maybe they all have their own different API key, maybe there's just one API key, right? That's not the same as the JSON Web Tokens, which are what the users would use once they were already authorized on those clients. So, the JSON Web Tokens are for the users or for any type of authentication you use, whereas an API key is like, I wanna authorize this client to use this API.

[00:05:01] So, could you use a JSON Web Token for an API key? Yeah, of course you can do that. But that's completely different than what we're talking. You would put that, you would still put that on the header too more or less.
>> Mark: And then someone else is asking for you to to talk about slugs and slugify

[00:05:20]
>> Scott Moss: Slugify is awesome. I'm not using slugify here, the only reason I'm not using slugify here, there's actually a module in called slugify that, for instance, you see the title of this blog post it's called ten reasons you should love IE7 with space to limit it. But, if I click it, you look at the URL, it's dash limit it.

[00:05:39] So that's a slug, right? You could totally do that on the back end, but when I made this front end thing, we didn't have a back end. The first few days we made this it was all Angular, so I had to do this on the front end. But on the back end, yes you would turn this into a slug.

[00:05:50] There are known models that do it pretty easily, but if you're going to do it yourself the code is actually in that Angular repo. But really all I did was just I just ran it through a that looked for a space and replaced it with a dash, that's all I did.

[00:06:03] But, a proper slugify would probably lowercase everything and stuff like that. But there are node models that do it, and you should totally do that on database. And you should probably save the slug in the database, on the model, next to the to all the other stuff on the post, but again, we didn't do that.

[00:06:19] But yeah, you should totally do that.
>> Scott Moss: Any other questions? Yes, what do you got?
>> Speaker 4: Well, it's but. So, it's attaching that JSON Web Token to every request, right? So, let's say you're requesting to some other website.
>> Scott Moss: Right.
>> Speaker 4: And you provided some authorization header. You'd be overriding it with the JSON Web Token, right?

[00:06:48]
>> Scott Moss: If you made a request to another website?
>> Speaker 4: And you're like, this website wants this authorization, so you supply that, and then you send it. Well it's gonna intercept that reroute the JSON-
>> Scott Moss: Yeah. But you can turn it off on a route basis. I have it setup to where you do like HTTP you consider-

[00:07:04]
>> Speaker 4: You have to change the URL.
>> Scott Moss: You can say, don't authenticate this problem.
>> Speaker 4: Okay, got you.