I'm going to show you how to use this auth token
to authorize yourself with our API.
The way that this will work in a real
app is the client side app will make a
HTTP request to our login endpoint with
the username and password that it wants to
authenticate. So a user will enter their
email address and password the app will
then call the API login endpoint and
then our back-end will confirm that that
username and password is valid. If it is
valid then we'll generate a temporary
token and we'll return that token to the
user. The app is then responsible for
ensuring that that token is included in
all future HTTP requests. It does this by
adding the token to the HTTP headers for
all the future requests it makes. An HTTP
header is like a metadata that goes
along with the HTTP request.
So it's data about the request. In that
data there's something called an
authorization HTTP header. This
authorization HTTP header
will include our token. Then every time
the app makes a request to our API we
can check if it's provided a valid token
in the HTTP headers. If the token is
valid we can perform the request if it's
invalid then we can return a 401
unauthorized response. If the app
receives a 401 unauthorized response
then it can then redirect the user back
to the login page and then they can log
in again to generate a new token. I'm
going to show you how to simulate adding
the HTTP headers to our requests using a
Chrome extension called mod headers. You
should have installed mod headers at the
beginning of this course. If you didn't
then please go back to the earlier
lessons and install that now because
we're going to need it for the rest of
this course.
The way that mod headers works is once
it's installed into Chrome it gives you
this little blue icon here. If you click
on the blue icon it gives you this nice
window that we can use to add custom
HTTP headers to our request. Before we
add any HTTP headers I'm going to add
something called a filter. The filter is
going to ensure that the HTTP headers
only apply to this specific web page
that were testing. The reason I want to do
that is because I've had experiences in
the past where I've forgotten that mod
headers is still running and it's
broken other websites that I visited and
it took me a long time to figure out why
so then now I always add a filter to
make sure the HTTP headers are only
applied to the web page that I'm testing.
Click on the plus symbol here and then
click on filter to add a new filter.
We're going to add a filter that matches
any website that contains this 127.0.0.1
and then :8080 so I'm going to add
*// 127.0.0.1:8080/*
So the star is a wild-card so it will
match any text before and any text after
but it will match all the pages that
have //127.0.0.1:8080 in it
So now we've added that we can go and
add our authorization header. So in the
name of this header here let's type
authorization with a capital A. This is
the name of the header field that we're
adding. In the value of the field we're
going to start by typing Token and then
a space and then we're going to go
and paste the contents of our token so
add a space and then paste the contents
of our token. This is how you add the
HTTP header to all the HTTP requests
using mod headers.
That's all we need to do to add the
token so now we can go ahead and test
our authorization. Make sure that this
box is checked here so that
the header is enabled and then click
back on the webpage. I'll going back to
our API root and head over to the
profile page. So we're currently logged
in as the or we should have logged in as
the super user that we created at the
beginning which is this one here with ID 1,
so head over to /profile/1
to see the detail view and you
can see that we now have the option to
modify this user. So let's go ahead and
test that let's modify it to Mark Winterbottom 1
and make sure we enter the password
Awesome1 and click put. You can see
that it's updated the page. So how do we
log out how do we test once we've logged
out the API? Well if you click on the mod
header again and you uncheck this box
and go back and refresh the page, or
don't refresh it because then it's going
to post again. Just click on the address
bar here and hit enter to reload and you
can see that now the edit option has
disappeared that's because we're no
longer authorized with our API. Let's put
it back, so turn on the authorization
again and then again reload the page you
can see that it comes back. So let's go
back to our user profile list and see
what happens when we visit another users
profile that we're not logged in as. So
if we use this profile ID number 2 here and
hit enter you can see that we're not
able to modify profile number 2. That's
because our permissions class says
that we can only modify the user that we
logged in as. So if you go back to number
1 you'll see that we can modify this. Ok
so it looks like our authentication and
login API is working let's go ahead and
commit our
changes to Git. Minimize Chrome and load
up the git bash and navigate to the
profiles REST API location. Type:
git add . to add the files
and then type: git commit - am and give it a message
"Added login API." And hit enter to commit.
So that's how you test the login API
thank you for watching I hope you found
this useful and I'll see you in the next
lesson.