- 00:00:01 welcome back to this series where we're
- 00:00:04 connecting letter well on the back end
- 00:00:06 with view chairs or angular on the front
- 00:00:09 end
- 00:00:10 throughout serious we already achieved a
- 00:00:12 lot we set up our back-end and we added
- 00:00:15 authentication to it and we also
- 00:00:18 finished our angular front-end allowing
- 00:00:21 a user to sign up and then sign in and
- 00:00:24 use that sign-in token the back-end
- 00:00:27 issues to authenticate with subsequent
- 00:00:30 requests hence being able to fetch
- 00:00:33 quotes and create new quotes now we
- 00:00:36 still have to do the same thing for view
- 00:00:38 chairs and in the last video of this
- 00:00:40 series we added the signup functionality
- 00:00:43 now it's time to allow the user to also
- 00:00:46 sign in otherwise a signup functionality
- 00:00:49 isn't that much use is it and then we
- 00:00:52 want to store the token the back and
- 00:00:54 issues to be able to send it with future
- 00:00:56 requests and get access to the protected
- 00:00:58 features of our backend therefore in
- 00:01:01 this video let's start with implementing
- 00:01:03 these sign and functionality now for
- 00:01:06 this I'm already back in my view chairs
- 00:01:08 project and I already got it running
- 00:01:10 here in the browser as mentioned we
- 00:01:12 already are able to sign up and we did
- 00:01:14 so in the last video so I already do
- 00:01:16 have a user on the backend and with that
- 00:01:20 I now want to add a new component to
- 00:01:22 this project sign-in components so a
- 00:01:26 sign-in dot view file now in this file I
- 00:01:29 want to add a sign-in form and therefore
- 00:01:32 I will go to the signup page do you sign
- 00:01:35 up view component and I will copy the
- 00:01:37 code from there though of course you
- 00:01:38 will adjust this now on the form
- 00:01:41 I don't need to username anymore for
- 00:01:44 just signing in I only want to have a
- 00:01:46 mail and password field I will leave it
- 00:01:48 like this though I will leave the
- 00:01:50 v-model binding and so on because I
- 00:01:52 still need to get this information this
- 00:01:54 data now with that in place I will go
- 00:01:58 down to my script file to go to my
- 00:02:01 script code down there I already import
- 00:02:04 access we will need this to Santa sign
- 00:02:07 and request and I will change the method
- 00:02:09 name here to sign in because that is
- 00:02:11 what we do this of course means that in
- 00:02:13 my template code in my
- 00:02:15 HTML code here on the click list sir I
- 00:02:18 will also target this sign-in method and
- 00:02:21 I will remove or rename this button to
- 00:02:24 say sign in instead of sign up now with
- 00:02:27 that in place let's go to our back-end
- 00:02:29 we created and let's have a look at our
- 00:02:31 routes and see what's route we need to
- 00:02:34 target it's down here this users sign in
- 00:02:37 route at the bottom here this is to
- 00:02:40 route allowing us to sign a user in
- 00:02:42 there for this to route you should
- 00:02:43 target with our view code so here I'm
- 00:02:47 right now targeting just slash user so
- 00:02:50 this should be slash user slash sign in
- 00:02:53 because again this is the route we were
- 00:02:55 targeting here now with this in place I
- 00:02:58 still need to send almost the same data
- 00:03:01 though there is no need for the name
- 00:03:03 anymore we don't need to name since in
- 00:03:05 the backend if we have a look at our app
- 00:03:07 HTTP controllers folder and then user
- 00:03:11 controller we see that for signing in we
- 00:03:14 only validate email and password of
- 00:03:16 course because we don't care about the
- 00:03:17 user name at this point now with this in
- 00:03:20 place I'm sending all the data we need
- 00:03:22 important make sure you are sending this
- 00:03:24 header here because you want to send
- 00:03:26 information that this is sent through an
- 00:03:29 ajax request and then well I can catch
- 00:03:33 both response and error
- 00:03:34 and see what happens so I'll save this
- 00:03:37 and go back to my page and I would be
- 00:03:40 nice to be able to go to the sign in
- 00:03:42 page so for this we need to register
- 00:03:45 near out and I will do it as new main
- 00:03:47 dot JS file where all the other routes
- 00:03:49 are registered and this new route should
- 00:03:52 have a path of slash sign and let's say
- 00:03:54 and of course I want to load my sign in
- 00:03:57 component which I therefore need to
- 00:04:00 import so I'll add this import at the
- 00:04:02 top pointing to the sign in dot view
- 00:04:05 file now with this route setup I can go
- 00:04:08 to my app dot view file where I do have
- 00:04:10 all my route links and I will add a pipe
- 00:04:12 symbol after the latest loud route and
- 00:04:14 add a new router link pointing to slash
- 00:04:18 sign in soju this newly created route we
- 00:04:21 just added and give it a caption off
- 00:04:23 sign in since well this is where this
- 00:04:25 will lead us now with this in place we
- 00:04:27 can
- 00:04:28 go to the sign in page and let's open up
- 00:04:30 the console to see if everything works
- 00:04:32 as it should and I will use the
- 00:04:34 credentials I created in the last video
- 00:04:37 of this series choose sign in' and this
- 00:04:40 looks pretty good
- 00:04:41 i get back an object with status text
- 00:04:43 okay and code 200 and then they either
- 00:04:47 field here I get my token so with this
- 00:04:50 we do have to token now we need to store
- 00:04:54 it to be able to send it with future
- 00:04:56 requests and let's also have a look into
- 00:04:58 this token now do you have such a look
- 00:05:01 into token I already explained logic we
- 00:05:04 can use in the angular video you can
- 00:05:07 basically either install a JavaScript
- 00:05:09 package decrypting or güell and
- 00:05:12 packaging this token for you since it's
- 00:05:14 base64 encoded or you write the code on
- 00:05:17 your own so I will do the latter
- 00:05:19 approach here and you sign in dot view
- 00:05:21 file here in D then lock where I handle
- 00:05:25 this response here I want to retrieve
- 00:05:28 the token so the first step is to get
- 00:05:30 the token here and I can simply get it
- 00:05:33 from my response and there from the data
- 00:05:36 object and there it's in the token field
- 00:05:39 remember this is where where we can find
- 00:05:43 it here object data token so this will
- 00:05:46 be the encrypted token now I want you
- 00:05:49 decrypted or kind of split it up so
- 00:05:52 let's create a helper variable base64
- 00:05:55 URL which is this token and then I will
- 00:05:59 split it by the dots because the token
- 00:06:02 continued contains free parts separated
- 00:06:04 with dots in this string so I will split
- 00:06:08 it up like this and I'm interested in
- 00:06:10 the second one therefore with the index
- 00:06:12 one this is which this is the part which
- 00:06:15 contains the payload of the token now
- 00:06:18 with that the last step is to get the
- 00:06:21 base64 value or get it decoded value you
- 00:06:25 could say so here I want to use my
- 00:06:31 base64 URL I retrieved here in the
- 00:06:34 second part and replace all my minuses
- 00:06:40 with plus signs
- 00:06:42 and replace all my underscores with
- 00:06:47 slashes now with this this is formatted
- 00:06:50 in a way that it is a base64 values and
- 00:06:53 now we can finally well decrypt it or
- 00:06:58 turn it into a normal string I could say
- 00:07:00 so to do this I can simply call the
- 00:07:05 window a top method that's a built-in
- 00:07:08 method javascript offers and here we
- 00:07:10 pass a base64 value and we will get back
- 00:07:13 a normal string so let's log to the
- 00:07:17 console to see if this works as it
- 00:07:19 should so I will clean this up and sign
- 00:07:24 up again and here we get our string
- 00:07:29 token decoded so this looks alright of
- 00:07:33 course it is Jason so let's parse the
- 00:07:36 tips not here though let's parse what we
- 00:07:39 get here to get a JavaScript object to
- 00:07:42 work with so this is the last step with
- 00:07:45 this in place let's quickly reoffending
- 00:07:48 kate and here's our javascript object
- 00:07:50 with the token information nice so with
- 00:07:53 that we got a decoded but that was
- 00:07:55 really just an exercise of practice here
- 00:07:57 to see what's inside it and to well
- 00:08:00 understand that you can decode it in the
- 00:08:02 browser we can't verify it here though
- 00:08:05 this can only be done on the server
- 00:08:06 because this is where we keep our secret
- 00:08:08 which was used for encoding the token
- 00:08:11 but if we want to have a look inside of
- 00:08:13 the token and use some information from
- 00:08:15 there this is how we would do it now
- 00:08:17 with this in place I want you stored the
- 00:08:22 token in the local storage so whilst it
- 00:08:26 is nice to have a look inside of the
- 00:08:27 token and I will still print it here the
- 00:08:30 more important part is to access the
- 00:08:32 local storage
- 00:08:33 javascript object we can use here and
- 00:08:37 set a new item set the token because you
- 00:08:40 want to store the token to send it with
- 00:08:42 future requests so here I will store it
- 00:08:45 as the second argument to this method
- 00:08:48 which is the value of that key were
- 00:08:50 creating here in the local storage and
- 00:08:52 this will simply be my token
- 00:08:55 the unencrypted not the unpackaged token
- 00:08:59 but instead the Aurora token we get back
- 00:09:01 from the server this one here so this
- 00:09:04 now gets stored in the local storage and
- 00:09:07 with that we can access it in the future
- 00:09:09 to send it to the backend whenever we
- 00:09:12 need to get access to them protect the
- 00:09:14 data there we will do this in the next
- 00:09:17 with you off this serious see you there
- 00:09:19 bye
