Now that we have
completed implementing the REST API server using Express and MongoDB in this course,
the next immediate thought that might occur in your mind is,
since we have already developed the client applications,
whether it is the Angular application, the Ionic application,
or the Native Script application in the previous courses,
how do we integrate the two together so that our client application is able to
interact with the full-fledge REST API server that we have developed in this course?
So, this is what we will examine in this lesson,
in this lecture, and the two exercises that follow this lecture.
So, at the end of this lesson,
you will have an Angular client that we'll be
able to communicate with the server that you have just developed in
this course and be able to support
the full-fledged client side view of our entire application.
So, that way, we will see that we have developed
the complete end to end application from the client side all the way to the server side.
A similar approach can also be used with
your Ionic client or with your Native script client,
given the fact that both Ionic and Native script have been
developed with the Angular engine behind the scenes.
So, carrying out a similar set of steps should be able to make your Ionic client and also
your Native script client communicate with the Express
plus MongoDB rest API server that we have developed in this course.
To integrate the client and the server,
as we have realized,
our server is already implemented to support the full-fledged REST API.
From our client side,
whether it is the angular client,
the ionic client or the native script client,
they all interact with the server using the REST API endpoints.
So, when the client sends the request to the server at the REST API endpoint,
the server will respond with the corresponding JSON data back to the client,
and the client can then make use of the JSON data to render the views for the user.
So, given this understanding of the communication between the client and the server,
the integration should be fairly straightforward.
But, now of course,
when we developed our Angular or the Ionic or the NativeScript client,
we didn't do the full-fledged user authentication part,
because we didn't have that in our JSON server.
Now that we have the user authentication built into our server side,
we need to retrofit our client applications to
enable them to do user authentication on the server side,
by posting the login information to the server and then
obtaining the authentication token from the server side,
and thereafter, communicating with the server including
the authentication token in the header of the request messages.
So, all this means that we need to do
minor adjustments both to the client and the server,
so that the two can communicate with each other.
One aspect that I haven't dealt with in the exercise earlier,
is how the server will handle the query parameters that come in from the client side.
So, as we realized,
when the client side sends a request for
a featured dish or a featured leader or a feature promotion,
we saw that the URL includes dishes,
question mark feature is equal to true in
the request URL that comes from the client side.
Now, in the data on the server side,
we already saw that the dish,
the promotion or the leader,
includes the feature flag already in the JSON data.
So, when this request comes to the server side,
then the server should be able to extract this query parameter from the incoming request,
and then appropriately do the query of
the MongoDB and then obtain only the results where this featured flag is set to true.
So, to do that as we saw,
the URL that is used for sending the request to the server is /dishes?feature=true.
So, that is how we will supply the query parameters to our server side.
Now, in addition, when this information is received on the server side,
now, we saw that earlier when we did the get request on the server side,
we simply said dishes find and then we would find all the dishes and then return them
when the get request is sent to the dishRouterroute/.
The same logic applies both to the promo router as well as to the leader router.
Now, when you include a query parameter like that in the URL,
how will our server side be able to extract this query parameter?
So, this is where when the incoming request has
this query parameter attached to the incoming URL,
the express server will automatically process that and turn that into
a JSON object that is loaded onto a request message coming in on the server side.
Now, this is available on the server side in the form of req.query.
So, whatever query parameters you include in the URL,
will be turned into corresponding JSON objects with the information set as shown here,
and then loaded onto the request object on the server side.
So, by using req.query on the server side,
we will be able to obtain these query parameters.
So, when you perform a get request on the server side,
you say dishes.find and then you include the req.query into the find there.
So, thereby, when the MongoDB is queried, then,
only those records or only those documents for which the featured is set to true will be
extracted from the MongoDB and supplied back to us within this get method here,
and then, can be returned to the client side.
So, this is as simple as that in handling the query parameters on our server side.
So, this update we will do to both the dish router,
the promo router, and the leader router on our server side.
The next part is of course, user authentication.
So, as we have realized on the server side,
we already have these REST API endpoints,
which are useful for user authentication.
In particular, when you do a post to /users/login,
with the username and password, then,
you will be able to authenticate the user on the server side.
Now, when the user is authenticated on the server side successfully,
then the reply message coming from the server side will include
the JSON web token in the reply body of the incoming reply message from the server side.
So, on the client side,
we should be able to extract this token and then use this token subsequently.
So, when the client receives the reply message from
the server side and the user is successfully authenticated on the server side,
the reply message will contain the JSON web token,
which has to be extracted, and thereafter,
the client should include this JSON web token in
the authorization header for every outgoing request from the client side.
So, how do we handle this whole set of operations?
Now, this is where we will implement
another service that will be used on our client side,
in our Angular client,
called the authentication service,
and that is where we will handle the entire login and the logout operations.
Now, the logout process is fairly straightforward but,
if we destroy the JSON web token that we have on the client side,
then the client will no longer be able to access the server.
So, it is as simple as just destroying
the JSON web token on the client side for logging out that client.
So, given this understanding,
let's see the steps that are involved in
doing the user authentication and handling the user authentication on the client side.
So, to handle the user authentication on the client side,
the client will send a post request to the /users/login endpoint,
and the body of the post request will contain the username and password.
We are using the login authentication in this case.
Now, for Facebook authentication again,
that is a different setup that I'm not going to discuss right now.
But, the request body as you'll see for local authentication,
will contain the username and password.
So, when the user is successfully authenticated on the server side,
the server will then reply back to
the client by including the JSON web token in the reply message.
So, when the client receives the reply message from the server side,
then the client will have to capture this JSON web token,
and then save the JSON web token into the local storage on the client side.
Thereafter, the client should include this token in every outgoing request.
So, how is this accomplished on the client side?
First and foremost, of course,
you need to save the incoming JSON web token into the local storage,
and that is done in the authentication service that we will implement on the client side.
Now, for every outgoing request,
the client will include this token into the header,
the authorization header of the outgoing request.
Now, how is this accomplished?
So, this is where we're going to take the help of an HTTP interceptor,
that the HTTPclient in Angular supports.
So, with the HTTP interceptor,
the interceptor allows us to intercept
every outgoing request message or even
intercept every incoming reply message if you so choose to.
But in the Angular application,
we're going to be implementing the request interceptor,
which I will illustrate in the exercise later.
In the HTTP request interceptor,
when the request message is intercepted,
every outgoing request message will be intercepted and then the JSON web token
will be inserted into the authorization header of the request message.
Then thereafter, the request message would be passed on to the server side.
So, thereby every outgoing request after the user is authenticated on the server side,
every outgoing request from the client side will carry
the JSON web token in the authorization header of the outgoing request.
Now, once the client logs out,
the JSON web token will be destroyed on the client side.
So, thereafter, outgoing requests will not contain the JSON web token anymore,
because the JSON web token doesn't exist on the client side.
So, thereby, the user loses the authentication.
So, that is how we will be handling the login and logout process on the client side,
by communicating with the server,
and then obtain the JSON web token,
and then including the JSON web token in every outgoing request.
Now, with this understanding of how the client and the server will interact,
let's now proceed to the next two exercises.
First, we will update the server side with a few additions,
so that it can integrate well with our client site.
Thereafter, we will update the client side or rather I will give you
a full-fledged client application that I have
taken from the earlier Angular course and then I'll updated it,
which also provides us with the ability to use HTTP interceptors
on both the outgoing requests and the incoming reply messages.
So, we will deal with both these in the next two exercises,
and at the end of it, you will understand how to
integrate your client and the server side.