Requiring Emails and Customization

First I wanna setup the right links in the layout template. 0:00 This is the one that, if you remember are using this for 0:03 all of the layout in the site. 0:05 I need to import the social account template tag library. 0:08 So, import social account and then down here I want to change the login stuff. 0:13 So right now there is this login link and there is a signup link. 0:20 Now, I don't need both of those because we're going to have one workflow where 0:26 you click a button and you're logged in. 0:30 So I'm going to delete the sign up one and I'm gonna change this one, 0:32 instead of it being url login, it's going to be provider login url for github. 0:38 So this tag comes from the social account set of tags. 0:45 And I'm also gonna change it so instead of saying login it's gonna say your account. 0:48 All right. 0:55 I want to do the same thing in index.html. 0:56 Might have all these buttons for sign up here and 0:58 I want to change these to be provider_login_url 'github' or 1:01 at least I'll do the first one you can do all of them if you want. 1:06 Actually that would take too long, 1:09 so copy that, paste it there, 1:16 paste it there, paste it there, 1:21 and paste it there. 1:26 And I will also need to do the import up here of load social account. 1:30 Okay, now if I open up the home page, let me refresh this. 1:38 Now that should be load socialaccount, 1:47 not import socialaccount. 1:52 There we go. 1:58 So now I have the signup link, I have the your account link, and 1:59 I can see that they are going to the GitHub location. 2:01 If I click the link, this asked me if I want to authorize the application and 2:04 I'll say authorize, come right back, and I can see that I'm signed up. 2:10 So it worked, and now if I look at this I can see that it sent me an email. 2:14 So that's pretty cool. 2:19 Let's see if it did send an email. 2:20 So yep, here is this email, user Kenneth has given 2:24 yours is an email address to connect their account to confirm, go to this link. 2:28 All right, so if we're gonna send an email with a verification link, 2:32 I think that we should require that before they can get into their account, 2:36 they have to click that link. 2:39 So it's time to do a couple of settings changes. 2:41 So I'm gonna again go back to msg settings. 2:45 And again, down here at the bottom I'm gonna add a couple of things. 2:48 So the first thing I'm gonna add is the setting that is ACCOUNT_EMAIL_REQUIRED and 2:53 I am going to set that equal to true. 2:57 And what this requires is that they give us their email address when they sign up, 3:00 so that when we have the email address which we have to have in order to send 3:04 them an email, right? 3:07 So then I'm gonna set ACCOUNT_EMAIL_VERIFICATION 3:08 equal to true, and 3:13 that means that we require the email to be verified before their account is active. 3:14 And the last thing I want to add in here is ACCOUNT_LOGIN_ON_EMAIL_CONFIRMATION and 3:21 I am going to set that to true as well. 3:26 And normally django-allauth sends you the email you click the link saying 3:30 that it's you and then you're taken to a page that has you login. 3:35 I don't wanna have that second log in pages that seems silly. 3:39 So I'm just gonna log the them right away and that's what the setting does. 3:42 Okay, so we've added two more steps to the sign up flow. 3:46 They have to check their email for the confirmation link. 3:49 Then they had to verify that they really did click the link and 3:51 these views are already provided by django-allauth but 3:54 they used two templates that we need to create to match our style. 3:57 So the first thing I need to do is I need to create a new folder inside templates, 4:01 that's called account. 4:06 That's where the templates exist. 4:08 And then I will make a new file inside of account which is, email.confirm.html. 4:10 So I'm gonna copy and paste this code in, and 4:16 then we will talk about what is going on in here. 4:20 So, this is a pretty similar form to a lot of other forms that we used 4:24 in Django authentication. 4:28 The difference thing is we're loading account and 4:30 social account libraries up at the top. 4:32 Confirmation is, they get the email confirmation and then they click the link, 4:34 they click this link here and this link creates what's called a confirmation. 4:41 That confirmation links to the email stuff that was sent out, 4:46 which links to the email, and the user, and all this stuff. 4:50 So, this is going to show the email address, and 4:53 this is going to show the username. 4:57 And they're just making sure it's really them. 5:01 This is the form where they'll click, yes this is me. 5:03 They'll confirm it. 5:06 And if the confirmation doesn't get created because it's been too long, 5:07 it's expired. 5:11 Then we'll see a message that says, the confirmation is expired. 5:12 Go click this link to get a new confirmation email. 5:16 So pretty straightforward. 5:20 You've probably seen this on other sites. 5:21 The next one that we need to create is verification_sent.html. 5:24 So this one actually comes before the one that we just looked at. 5:31 This one is the one that is shown after they've clicked the signup button. 5:35 And then we're telling them hey we sent you an email, 5:38 you need to go check your email. 5:41 So, you can read this if you want, but there's nothing really different here. 5:42 It's all just HTML. 5:48 So, I wanna try the new sign up process. 5:50 Now the first thing I need to do though, 5:52 is I need to delete the accounts that are in here. 5:54 So I'm gonna come up here to users, and this is the new user. 5:59 So I'm gonna go ahead and delete that user. 6:04 And yep, I'm sure, go ahead and delete it. 6:08 All right, click log out, just in case, okay. 6:10 So I don't have my account, 6:15 I'm gonna click your account, which takes me to GitHub. 6:16 And now you can see that we have a new part here this added permissions, 6:19 the personal user data e-mail address, and 6:23 that's because of this setting right here, this e-mail required. 6:25 That tells django-allauth to tell GitHub we need their email address which asks for 6:30 the email address. 6:35 Because normally all we get is, 6:36 hey this account wants to use your account as login. 6:37 So this says hey we're gonna send them the e-mail address as well. 6:41 So we're gonna authorize that application, 6:45 and then this redirects back to this page where this is our verify your email, 6:47 and it says a link's been sent, you need to check that link and and come back. 6:52 So if we look here there's a new email. 6:56 And it's got a new URL, so I'm gonna copy this URL, copy, 6:59 Cmd+C, and then I'm gonna paste this in. 7:04 And now I get the confirm email page. 7:08 This is the page that we created that has the form that has, 7:12 hey is this email address a valid address for you? 7:16 So I'm gonna, yeah it is, and cool so 7:19 now I've confirmed my email address and I have successfully signed in as me. 7:22 Great. 7:27 So our log out is working, but I wanna use the django allauth log out. 7:29 So it's a little bit different. 7:34 So I'm gonna come back over here to layout.html and 7:36 I'm gonna find the logout button, which is right here. 7:40 And instead of accounts:logout, the one I wanna use as account_logout. 7:43 And this is one that's provided by django-allauth. 7:48 And it has an interesting side effect. 7:51 Let me show you what it does. 7:54 So if I click logout, oops sorry, 7:57 I have to do that when it's using the new URL not the old one. 8:00 All right so now, Let's refresh. 8:04 So I'm going to change this to account logout but that goes 8:31 to slash accounts slash log which is why when I click that I got the old one. 8:34 I can look at my URL's. 8:39 I have accounts up here, right. 8:42 So we can actually just turn both of these off, and now if 8:46 go look at my account and then I go to log out, this is the new page. 8:53 This is the page I was talking about as being weird. 8:59 It's different. 9:02 So django-allauth made a decision to require post requests for 9:03 logging someone out. 9:08 And, it seems wrong at first but I actually think this is pretty smart. 9:10 It prevents someone from putting your logout URL 9:14 into say an image tag's source attribute. 9:17 And then any user who loaded that image would be logged out, but 9:19 the template here needs some love and attention. 9:22 So I'm gonna create, yet one more account or one more account template, rather, 9:26 which is logout.html. 9:30 And again, I'm gonna paste in some code. 9:34 And this should not have anything in it that's surprising to you. 9:39 It just has a form that says, Log out. 9:43 So if they click the button. 9:47 They get this, and it will log them out. 9:51 So, this looks a lot better, and 9:53 if I click this button I should be logged out, and I am. 9:55 I get you have signed out. 9:59 So that's how to set up social authentication with a GitHub 10:01 inside of Django. 10:05 Using social authentication with the responsibility of securing your users 10:06 account information, at least the basics, onto a service that you don't control. 10:09 This has its own pluses and minuses of course. 10:14 If that service goes down or 10:16 out of business, your users won't be able to log in to your site and 10:17 of course if that site's accounts got hacked, yours technically would be too. 10:21 Thankfully at least with major services those two problems are fairly rare 10:25 which means your users can log in to your site and. 10:29 You can concentrate on new features and bug fixes for 10:31 your code you could also use django-allauth in-house services too. 10:33 If your site or a service on your network provides allauth capabilities, 10:38 you can build your own back-end for django-allauth and 10:42 use that to do your account verification, it's a really flexible library. 10:44