Exercise (Video): Basic Authentication

Loading...

From the course by The Hong Kong University of Science and Technology

Server-side Development with NodeJS, Express and MongoDB

267 ratings

The Hong Kong University of Science and Technology

Server-side Development with NodeJS, Express and MongoDB

267 ratings

Course 4 of 4 in the Specialization Full-Stack Web Development with React

This course deals with all things server-side. We base the entire course around the NodeJS platform. We start with a brief overview of the Web protocols: HTTP and HTTPS. We examine NodeJS and NodeJS modules: Express for building web servers. On the database side, we review basic CRUD operations, NoSQL databases, in particular MongoDB and Mongoose for accessing MongoDB from NodeJS. We examine the REST concepts and building a RESTful API. We touch upon authentication and security. Finally we review backend as a service (BaaS) approaches, including mobile BaaS, both open-source and commercial BaaS services. At the end of this course, you will be able to: - Demonstrate an understanding of server-side concepts, CRUD and REST - Build and configure a backend server using NodeJS framework - Build a RESTful API for the front-end to access backend services

From the lesson

Halt! Who goes there?

This module is dedicated to user authentication. We first develop a full-fledged REST API server with Express, Mongo and Mongoose. Thereafter we examine basic authentication and session-based authentication briefly. We then develop token-based authentication with the support of JSON web tokens and the Passport module.

Basic Authentication13:17

Exercise (Video): Basic Authentication22:51

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Now that we have understood the need for basic authentication in our express application,

let's proceed to the exercise where we will add

basic authentication to the confusion server that what we have been developing so far.

The express REST API server.

We will, along the way,

learn how we can use basic authentication within our server,

and then in subsequent exercises,

we will expand upon this idea farther to add

a full-fledged authentication service for our express REST API sever.

In this exercise, we will go to the confusion server,

what we have been working on so far.

So you must have completed the implementation of the second assignment by now.

Where you would have developed the promotions and the leaders models and also

updated the routes for the leader router and the promo router,

in your confusion server application.

So within this code,

let's go to app.js and then add in the basic authentication into app.js.

So in app.js, as we have understood about

the way the middleware works in the express application.

So, we start out here in the app.js by importing all the various node modules here.

And then after that,

we start out here by first saying app use logger,

dev app use body parser.

So all these are going to be applied to our application.

And then, this call here,

app use express static,

is what enables us to serve static data from the public folder.

Now we want to do authentication right before we allow

the client to be able to fetch data from our server.

So right there, we will go in and add our authentication there.

So you notice that everything that comes after this,

all the middleware that is mounted and comes after this particular point,

will have to go through the authorization phase before that middleware can be accessed.

So right there I'm going to add in app use and then add in a function called port,

which I'm going to implement right now.

So by doing this,

what we are specifying is that before the client can access any of these,

either the static resources in the public folder or any of the resources, dishes,

promotions or leaders or even users as we will see later on,

the client has to be first authorized.

So right there we will be add in the auth.

So let me add in the function here called auth right there.

And then immediately use it within our express application as the middleware there.

So this function auth will take in three parameters;

the request object, the resource object and the next object.

So within this function,

let me first just to know what is contained

in the request header.

Let me just log the request headers right there just to demonstrate to you.

Because once you add the authorization header,

then we'll only be able to see it right there.

So we will first do a console log just to see what is coming in from the client site.

Then let me get

the authorization header by saying,

req.headers.authorization.

So this is where we get hold of

the authorization header that is added in by our client's site.

If it is not there,

then obviously then we need to act accordingly.

So if the auth header is null,

which means that there is no authentication header in our incoming request,

then obviously, our client did not

include the user name and password into the authentication header.

So we need to challenge our client to supply this information.

So if the authorization header is null,

then we'll say, var err, new Error.

So, we will not allow our client request to go further beyond this point.

So we'll say, you are not authenticated,

and then we will challenge the client there.

So we'll say res.setHeader.

So we're going to be setting the header in

the response message saying WWW-Authenticate.

And from the lecture earlier,

you'll see why we are putting this into the response header.

And then, we will say err status 401.

401 is unauthorized access.

And then we will simply generate or call next with the error.

So that means that,

it's going to skip over all this and go to

the error handler where the error handler will construct

the reply message and send it back to my client there.

So that way, if the client has not included

the authentication header or the authorization header,

then I'm going to challenge the client to ask it

to supply me the authorization header there.

So, if not, then I know that the authorization header exists.

So beyond this point,

we'll say, var auth.

And I'm going to extract

the authorization header and then since the auth header is a string,

I'm going to split that value.

And this authorization header I'm going to split the value.

So as you can see the buffer enables you to split that value and then

we also give the encoding of that buffer which is base 64 encoding here.

So we'll convert that to a buffer by splitting that into two parts,

using the space as the splitting part.

So when you looked at the authorization header,

you saw why the space separates the value, saying basic.

And then it gives you the rest of

the base 64 encoded string which contains the username and password.

And from that, we want to extract the username and password.

So we're going to split that value.

And then we're only going to consider,

so when you split the string by using this,

it will split that into an array.

And the first element of the array contains basic,

the second element of the array is where the base 64 encoded strings exist.

So that's why we are only looking at the second element of this array.

So this splitting will cause the string to split into an array of two items.

So we are picking up the base 64 encoded string from that and then into this buffer.

And then we're going to convert that to string.

And then again, split the string one more time,

because the string itself will contain the username and password separated by a colon.

So I'm going to split it using the colon as the splitting point for this string here.

So notice that I am doing two splits here.

One, on the space and the second one

using the colon which separates the username and password.

So at the end of this,

this variable auth should be an array containing two items.

The username and the password,

which is extracted from the base 64 string.

So at this point,

what I am going to do,

is just for your clarity,

I'm going to simply say var username, auth zero.

And then, var password, auth one.

So now I have extracted the username and password from my authorization header.

Now, I'm going to use a default value for

the username and password in this implementation.

Later on, we will see that we can allow

the users to create their own username and password,

but for the moment,

I'm just going to use the encoded username and password as admin.

And the password will be just password.

For this basic exercise,

we're going to be using this as the default username and password.

If the username that I obtain is admin and the password is the string password,

then I am all fine to allow the client request to pass through to the next middleware.

So I will say next.

So when I say next,

this means that from that auth,

the request will pass on to the next set of middleware here.

And then express will try to match the specific request

to the specific middleware which will service that request.

So, this is where we will allow it to pass through.

If not, that means that the username and password did not match the request,

the default username and password that I had set it up.

So that means that there is an error.

So in this case,

I'm going to again cause an error here.

So we'll say else.

So, will again generate an error and then challenge

the client to send in the correct authorization information,

the username and password here.

So that's it. This little bit of middleware that we have just implemented here,

authorization middleware that we have just implemented here is

sufficient enough to implement basic authentication within our application.

So having made these changes,

let's save the changes,

and then we'll see how this actually works in practice.

Let's save the changes.

And then we'll go and start our server.

Now going to the terminals, of course,

make sure that your MongoDB server is up and running.

Otherwise, your Express server will not start up.

So, at the prompt type npm start and then you're Express server will be up and running.

Now, open in incognito window in your browser.

The reason why I'm asking you to use

an incognito window is that when you type in the user name and password,

then it'll be cached by your browser.

So if you use an incognito window,

if you restart the browser,

then the cache will be cleared automatically.

So this information will not be remembered.

Now, what happens is if you type in the username and password,

it'll be cached or subsequently when you try to access the server,

the cached information will be automatically sent in the request that you generate.

So that is why it is important to use

an incognito window just to show you that the basic authentication works.

So in your browser address bar,

let's type localhost:3000 and see what happens.

So when you type localhost:3000,

you immediately see that your browser pops up

this dialog on top asking you to type in the username and password.

If you don't type it,

let me type in some random username,

and then see what happens.

So if I type in a random username and password then you see that the request is rejected.

I'm not allowed to access the server.

And then the server will again say that the client is not authorized.

So it'll come back and challenge us again for the correct authentication.

So let me type in the current authentication,

so let me type in admin and the password as password and then login,

and you would see that now your application,

the Express application will allow you to go in and access the default value,

which in this case is the index.html file from the static public folder.

Now, the same thing. If you're trying to access

localhost:dishes without the authorization,

then it won't work.

And I'll demonstrate that to you using Postman in a minute.

Now, having seen how the authentication works,

let's go and look at what happened on the console on our server side.

Going to the console on our server side,

you see that a whole bunch of information has been printed out here.

So as you saw, we were logging out the request headers here.

So this is the first request that came in with the request header.

And here, you see that there is no authorization header in the request.

And so, your server rejected that with a 401 asking our client to authorize itself.

The second time also,

since we didn't type in the correct authorization, the server rejected.

Of course, you now notice that in the header right there,

the authorization is actually included there.

And you'll see the way the authorization is included.

It says, Basic separated by a space and separated by

the 64 bit encoded string which contains the username and password.

And then we see that the server

rejected this because the authorization was wrong at that point.

Now, later on, we typed in the correct username and password.

So right there, in the third request that came in,

we typed the correct username and password.

So that is why you see that the request header contains the authorization,

and this string is the correct encoding of the username and password.

How do I know that? Well, I have cross-checked

and know that that is the base 64 encoded version of the string there.

We will also see that from our Postman in a short while.

Then you see that the request was accepted and it returned the value correctly.

And then of course, subsequently,

the client requested for a favicon, the icon.

And since we don't have the favicon in our server side, it replies with a 404,

and of course, your favorite icon is not displayed in the address bar.

So that's fine.

But note in particular,

this particular request that came in,

where the correct authorization header was

included and so it was successful at that point.

Let's try and see how we can do the same thing with Postman.

So, here I have my Postman window open.

And so, in my Postman window,

I'm going to type in a get to localhost:3000 to my server and then send the request,

and you will immediately notice that it challenges saying 401 Unauthorized.

So this is the reply message from the server side.

So notice what it says, 401 Unauthorized.

And it says the response must include a WWW-Authenticate header field,

and this will be challenging the client to send in their authorization information,

the user name and password.

So previewing this, we see that this says,

"You are not authenticated!"

And then the code 401 here.

Now looking at the headers of the reply message,

when you look at the header of the reply message,

you can see, in particular,

this header included there which says WWW-Authenticate Basic.

Now, how do we do authentication or authorization in Postman?

So this is where we will go to this,

right below this box here,

you will see this authorization here.

And when you click on the authorization,

right now it says "No Auth."

Let's use the basic authentication.

So when I say basic authentication,

it'll give me these two fields here where I can type in the username and password.

Let me type in the correct username and password.

So we'll say username admin,

password is password,

P-A-S-S-W-O-R-D. You can see that that's exactly the password that we have here.

So once you type in the username and password,

it will say update request.

So when I click on update request,

you would see that immediately, in the header,

you will see that there is

this field here that has been added here, saying authorization.

And then you see what this second part,

the value contained, it says Basic and a space and then this particular string.

So if you check this particular string here,

this will be the exact string that you'll see in

the header of the successful request message.

Notice what this string says, it says,

YWR something and then ends with a Q equal to.

Going to our terminal,

you see that the successful request actually contain exactly that string here

says YWR and then ending with Q equal to there.

So by typing in the information into

the authorization and then clicking on the update request,

this information is added into the authorization header.

So now, since this is a get request,

I don't need the content type there because it doesn't contain any body.

So now that the authorization has been included,

let's send the request now correctly and then you would see that the reply coming in from

the server side will contain the index file as you expect.

Now, let me delete the authorization.

Now, this is the reason why Postman helps me to check for these things a lot more easy.

I can delete the authorization and then send the request and it'll still

contain this authorization because I typed in this into the authorization field.

So let me clear the authorization from there and then send the request here.

And then it says, "You are not authenticated!"

Similarly, if I send the request to the dishes.

Previously this worked fine,

but now you see that we are prevented from accessing the /dishes endpoint also,

then the same thing with all the other rest API endpoints also.

You will not be allowed to access because

the authorization middleware comes before you get

access to any one of these endpoints in the list of middleware for your Express server.

So now, if I now include

the authorization and then

update my request and then send the request to the server,

then the server will respond.

Now, obviously, at this moment,

my database is empty,

so it is replying with an empty array there.

But, now the request went through successfully

and I'm able to retrieve the information from the server side.

So this is a quick demonstration of basic authorization

in our Express REST API application.

With this, we complete this exercise.

This is a good time for you to do a Git comment with the message or basic authentication.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play