Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
With the basic setup in place, it's time to customize how our users sign up. We'll require an email address, require the email to be validated before they can sign in, and we'll customize a few templates to make things work exactly how we want.
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
You need to sign up for Treehouse in order to download course files.
Sign up