1 00:00:00,180 --> 00:00:02,260 We've made solid progress. 2 00:00:02,260 --> 00:00:06,080 Now the moment you've been waiting for, testing our changes. 3 00:00:06,080 --> 00:00:10,090 Well, hold onto that thought for just another moment or two. 4 00:00:10,090 --> 00:00:11,700 Before we debug our web app, 5 00:00:11,700 --> 00:00:14,070 there's a couple of quick things that we need to take care of. 6 00:00:15,100 --> 00:00:19,230 If you have an existing FitnessFrog database, you'll need to delete it first 7 00:00:19,230 --> 00:00:23,000 before you attempt to run the application, otherwise you'll get an error. 8 00:00:24,110 --> 00:00:29,750 I'll quick into Quick Launch and type SQL. 9 00:00:29,750 --> 00:00:32,590 Then I'll select SQL Server Object Explorer. 10 00:00:34,040 --> 00:00:39,590 I'll click on the refresh button then expand MSSQLLocalDB and 11 00:00:39,590 --> 00:00:43,680 Databases, and here is my existing FitnessFrog database. 12 00:00:43,680 --> 00:00:49,160 I'll right click on it, select Delete, and check Close existing connections, and OK. 13 00:00:50,420 --> 00:00:51,760 And then my database is gone. 14 00:00:53,100 --> 00:00:55,960 I'll close this window, done with it for now, and 15 00:00:55,960 --> 00:00:58,260 we're ready to make our next change. 16 00:00:58,260 --> 00:01:01,960 Earlier, we disabled owin, now we need to enable it so 17 00:01:01,960 --> 00:01:04,580 our identity middleware component will be able to run. 18 00:01:05,700 --> 00:01:10,048 In the route of our project, go ahead and open the Web.config file. 19 00:01:12,207 --> 00:01:15,858 Scroll down a bit and look for the appSettings section, and 20 00:01:15,858 --> 00:01:20,570 in particular, the owin:AutomaticAppStartup setting. 21 00:01:20,570 --> 00:01:22,250 Currently, it's set to false. 22 00:01:22,250 --> 00:01:25,581 Let's change that to true and save and close the file. 23 00:01:27,690 --> 00:01:32,247 Now, let's debug the app and take a look at our finished user registration page. 24 00:01:34,962 --> 00:01:38,980 Here's our homepage, showing a list of the available entries. 25 00:01:38,980 --> 00:01:43,730 To get to the user registration page, we can simply click on the Register button. 26 00:01:43,730 --> 00:01:45,920 And here's our user registration page. 27 00:01:46,950 --> 00:01:49,220 Let's test our client-side validation. 28 00:01:49,220 --> 00:01:52,460 I'm not gonna provide any values, I'll just click the Register button. 29 00:01:54,210 --> 00:01:55,600 Well, that's encouraging. 30 00:01:55,600 --> 00:01:59,070 We're being asked to provide our email and password fields, so 31 00:01:59,070 --> 00:02:02,080 we know our required field validations are working. 32 00:02:02,080 --> 00:02:04,970 I'll provide an email address and for the password I'm going to type 33 00:02:04,970 --> 00:02:09,840 a single letter, the character P, and click Register. 34 00:02:09,840 --> 00:02:14,918 Now we're being told that our password must be at least 6 characters long, and 35 00:02:14,918 --> 00:02:19,600 that our password and confirmation password values don't match. 36 00:02:19,600 --> 00:02:24,060 Well, that makes total sense, we didn't even provide a confirm password value. 37 00:02:24,060 --> 00:02:25,770 So let's fix the problem. 38 00:02:25,770 --> 00:02:29,688 For my password, I'll type password, and for 39 00:02:29,688 --> 00:02:32,110 a confirm password, I'll type password again. 40 00:02:33,250 --> 00:02:35,910 Now we're getting all green check marks. 41 00:02:35,910 --> 00:02:39,480 But before I click Register, I'm gonna go back to Visual Studio. 42 00:02:40,610 --> 00:02:44,447 And in Solution Explorer, I'm going to expand Controllers and 43 00:02:44,447 --> 00:02:46,232 open up AccountController. 44 00:02:49,394 --> 00:02:53,166 I'm going to scroll down to the Register post action method and 45 00:02:53,166 --> 00:02:57,810 just inside of that method on line 38 here, I'm going to set a break point. 46 00:02:59,270 --> 00:03:02,535 Back in Chrome, I'll click Register to submit the form. 47 00:03:04,808 --> 00:03:06,770 Okay, here we are at our break point. 48 00:03:07,850 --> 00:03:09,810 Now let's step through the code. 49 00:03:09,810 --> 00:03:11,400 Our model state is valid. 50 00:03:11,400 --> 00:03:15,690 So we move into that block and we instantiate an instance of the User class. 51 00:03:17,260 --> 00:03:21,427 Now we're just about ready to call the _userManager.CreateAsync method, 52 00:03:21,427 --> 00:03:23,770 which will create our user in the database. 53 00:03:26,770 --> 00:03:28,333 The result was successful, so 54 00:03:28,333 --> 00:03:31,050 we can see that the succeeded property is set to true. 55 00:03:31,050 --> 00:03:34,350 And if we step to the next line of code, 56 00:03:34,350 --> 00:03:38,000 we're ready to call the signInManager's SignInAsync method. 57 00:03:39,950 --> 00:03:41,360 Now we're signed in and 58 00:03:41,360 --> 00:03:45,040 we're going to redirect the user back to the entry's index route. 59 00:03:46,050 --> 00:03:48,060 Press F5 to continue execution. 60 00:03:49,140 --> 00:03:51,260 Now we're back at our homepage. 61 00:03:51,260 --> 00:03:52,910 But what's changed? 62 00:03:52,910 --> 00:03:57,550 Notice that now we're seeing the add entry and sign out buttons. 63 00:03:57,550 --> 00:04:02,150 This is because identity after creating our account and signing this in, 64 00:04:02,150 --> 00:04:07,390 sent an authentication cookie back to the client as part of the response. 65 00:04:07,390 --> 00:04:11,080 This allowed the authentication cookie to be sent back to the server with the next 66 00:04:11,080 --> 00:04:15,750 request, the request here for the homepage. 67 00:04:15,750 --> 00:04:18,280 And remember, if we take a look at our layout page. 68 00:04:21,158 --> 00:04:25,876 Views > Shared > Layout. 69 00:04:25,876 --> 00:04:29,037 Here in our Layout page, we're checking to see if 70 00:04:29,037 --> 00:04:33,250 the Request.IsAuthenticated property is set to true. 71 00:04:33,250 --> 00:04:39,173 And if it is, we display or render the Add Entry and Sign Out buttons. 72 00:04:43,080 --> 00:04:47,570 Else, we display the Register and Sign In buttons. 73 00:04:49,800 --> 00:04:54,567 We can use Google Chrome's DevTools to actually take a look at the authentication 74 00:04:54,567 --> 00:04:55,544 cookie itself. 75 00:04:59,630 --> 00:05:03,566 Here in this tabbed interface, I'm gonna select Application and 76 00:05:03,566 --> 00:05:08,132 then over on the left we have a Cookies folder, and then we have cookie here for 77 00:05:08,132 --> 00:05:09,556 our localhost domain. 78 00:05:11,212 --> 00:05:14,835 Make that column a little wider and we can see the name of our cookie. 79 00:05:14,835 --> 00:05:17,960 AspNet.AplicationCookie, and 80 00:05:17,960 --> 00:05:21,430 to the right of that, we can see the value of the cookie. 81 00:05:21,430 --> 00:05:25,750 The value of the cookie is our encrypted identity information. 82 00:05:25,750 --> 00:05:29,530 If we delete the authentication cookie and 83 00:05:29,530 --> 00:05:32,460 then go back to the browser and refresh the page. 84 00:05:33,750 --> 00:05:38,650 Notice that the menu switches back to showing the Register and Sign In buttons. 85 00:05:38,650 --> 00:05:42,150 This is happening because we deleted our authentication cookie, so 86 00:05:42,150 --> 00:05:45,610 it's no longer available to send back to the server. 87 00:05:45,610 --> 00:05:49,190 That resulted in the Request.IsAuthenticated property 88 00:05:49,190 --> 00:05:50,530 being set to false. 89 00:05:50,530 --> 00:05:54,900 Which then, in our layout view, rendered the Register and Sign In buttons. 90 00:05:54,900 --> 00:05:59,260 Something else worth knowing, if we browse back to our user registration page. 91 00:05:59,260 --> 00:06:02,450 Currently, it's possible right now to register again 92 00:06:02,450 --> 00:06:06,120 using the same email address that we used last time. 93 00:06:06,120 --> 00:06:10,550 It's totally possible to be able to prevent this using server-side validation. 94 00:06:10,550 --> 00:06:13,510 If you'd like to see how to do that, check out the teacher's notes. 95 00:06:14,760 --> 00:06:19,200 This is great, now we have a way for our users to register with our web app, but 96 00:06:19,200 --> 00:06:22,750 we need to add a way for registered users to sign in. 97 00:06:22,750 --> 00:06:24,550 That's what we'll do in the next section.