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

336 ratings

The Hong Kong University of Science and Technology

Server-side Development with NodeJS, Express and MongoDB

336 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:50

Meet the Instructors

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

[MUSIC]

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 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 further

to add a full-fledged authentication service for our Express REST API server.

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 model.

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 middle way it works in 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.

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, they 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 an authentication badge.

So you notice that everything that comes after this,

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

We'll have to go through the authorization phase before

that middleware can be access.

So right there, I'm going to add in app.use and

then adding a function called auth, which I am going to implement right now.

So by doing this, what we are specifying is the default,

the client can access any of these,

either their 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 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, yeah.

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 want to 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 side.

Then, let me get their

authorization header by saying

req.headers .authorization.

So this is where we'll get hold of the authorization header that is added in

by our client side.

If it is not there, obviously, then we need to act accordingly.

So if, The authHeader is null,

which means that there is no authentication header in our incoming

request then obviously, our client did not include the username 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 see,

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 client there.

So we'll say res.setHeader, so

we are 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 our call next with the header.

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 back to my client there.

So that be, 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 will say var auth,

and I'm going to extract the authorization header.

And then since the authHeader 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 the value and

then we also give the encoding of the buffer which is Base64 encoding here.

So we will 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 Base64 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 this base64 encoded string 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 could, we are picking up the base64 encoded string from that.

And then we 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 loading 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 variable auth should be an array containing two items,

the username and the password which is extracted from the base64 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[0] and then,

var password = auth[1].

So now I've 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 will be passed through to the next middleware so, I will say next.

So when I say next, this means that from the auth

their request will passed on the next set of middleware here and

then Express will try to match the specific request to were

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 am setting 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, Error.

So we'll 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 out 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 terminal, of course,

make sure that you're MongoDB server is up and running.

Otherwise, your Express server will not start up.

So I have the prompt type npm start, and

then your Express server will be up and running.

Now, open in incognito window in your browser.

The reason why I am asking you to use an incognito window is that when you type in

the username and password then, it will 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 if you type in the username and password, it will be cached,

so 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 dialogue 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 if the server will again say that the client is not authorized.

And so it will 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 log in, and you will see that now the Express

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

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

Now, the same thing if you're trying to access localhost:dishes

without the authorization, then it wont 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 site.

Going to the console on our server site 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 that

server rejected.

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

actually included there, and you 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.

And so, that is why you see that the request header contains the authorization,

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

How do I know that?

Well, I've cross checked and know that,

that is the basic foreign encoded version of the string there.

We will also see that from our postman image or what.

Now 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 the 404 and

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

So that's fine, but note in particular.

Those particular requested came in,

where the correct authorization header was included.

And so, it was successful at the time.

Let's try and see how we could do the same thing with postmap.

So here I have my postmap window open.

And so in my Postman window I'm going to type in

a get to localhost: 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 saves, 401 Unauthorized.

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

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

the username and password.

So previewing this, we see that the sentence 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 is www.authenticatebasic.

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

So this is where they would 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 will

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 I will say username admin, password is password P-A-S-S-W-O-R-D.

So you can see that, that's exactly the password that we have here.

So once you type in the username and password, they'll 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 will see what this second part, the value you can take.

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 say YWR something, and then ends with a Q equal to.

Going to our terminal, you see that the successful request

actually contained exactly that string here.

It 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 headers.

So now 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 will see that

the reply coming in from the server site will contain the index file as you expect.

Now, let me delete the authorization.

Now this is the reason why Postmap helps me to check for these things a lot more

easily, I can delete the authorization and then send the request.

And it will still contain this authorization,

because I typed 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.

And the same thing with all the other rest APR endpoints also.

You will not be allowed to access, because the authorization middleware comes before

you get access to any 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 the 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 sock.

So this is a quick demonstration of basic

authorization in our express rest APR application.

With this, we complete this exercise.

This is a good time for

you to do a get comment with the message of basic authentication.

[MUSIC]

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