1
00:00:05,310 --> 00:00:06,470
Welcome back everyone.

2
00:00:06,750 --> 00:00:09,470
Let's begin by walking through a simple flask.

3
00:00:09,600 --> 00:00:14,580
Off and in this case we're going to be using Google open authorization with flask dance.

4
00:00:14,610 --> 00:00:19,680
We're going to do it just set up a very simple home page and the home page is going to also link to

5
00:00:19,680 --> 00:00:23,990
a welcome page however that welcome page is only going to be accessible.

6
00:00:24,120 --> 00:00:26,810
If you've already authenticated yourself with Google.

7
00:00:27,060 --> 00:00:28,750
So tell me how to set this whole thing up.

8
00:00:28,770 --> 00:00:31,020
We'll begin by jumping over toward sex ed..

9
00:00:31,050 --> 00:00:31,290
OK.

10
00:00:31,290 --> 00:00:33,280
Here I am at the Adam text editor.

11
00:00:33,300 --> 00:00:38,280
I already have a folder called flask examples and underneath that I have a template directory.

12
00:00:38,340 --> 00:00:43,150
What I'm going to do is underneath flask examples I'll create a new file called app pie.

13
00:00:43,200 --> 00:00:45,590
So this is just apple pie.

14
00:00:45,630 --> 00:00:48,590
And that's going to hold essentially all my code code.

15
00:00:48,600 --> 00:00:53,730
And then underneath templates what I want to do is set up two new template files will say one is home

16
00:00:53,780 --> 00:00:59,820
HMO and the other one will go ahead and be welcome each team L and welcome each team and it's only going

17
00:00:59,820 --> 00:01:04,540
to work if someone's actually logged in and authenticated through Google if it's not.

18
00:01:04,560 --> 00:01:07,650
We'll have that show some sort of internal server.

19
00:01:07,650 --> 00:01:10,020
So we'll say welcome to e-mail and home page T.M..

20
00:01:10,050 --> 00:01:11,230
We'll deal with those later on.

21
00:01:11,230 --> 00:01:15,410
But let's begin by setting up our apple pie file.

22
00:01:15,440 --> 00:01:19,370
Now quick note because we're actually using open authorization locally.

23
00:01:19,370 --> 00:01:23,980
We have to set up some environmental environment variables in order to make sure we don't get any errors.

24
00:01:24,170 --> 00:01:29,390
And this is mainly because OPAR ization is not really meant to be used locally in the way we're doing

25
00:01:29,390 --> 00:01:29,770
it.

26
00:01:29,840 --> 00:01:32,660
It's really meant to be used once you deploy your Web site.

27
00:01:32,690 --> 00:01:39,090
So because of that we need to set up two environment variables and we can do this actually programmatically

28
00:01:39,090 --> 00:01:42,070
of Python using the import os call.

29
00:01:42,070 --> 00:01:48,640
We'll see say import os and then OS environ to the sets up an environment variable.

30
00:01:48,650 --> 00:01:52,470
This is actually really similar to what we did at the command line when we set up our flask app environment

31
00:01:52,470 --> 00:01:53,030
variable.

32
00:01:53,160 --> 00:02:02,070
If you recall that we're going to say go offline underscore in secure underscore transport.

33
00:02:02,070 --> 00:02:03,980
Make sure you spell that right transport.

34
00:02:04,500 --> 00:02:08,110
And so equal to the string one notices the string there.

35
00:02:08,250 --> 00:02:11,540
And then one last one we going to set up as OS environ.

36
00:02:11,750 --> 00:02:23,430
I'll say oh off lib underscore relax underscore tokin underscore scope and also that equal to 1 as well.

37
00:02:23,450 --> 00:02:27,530
Again yes do this if you're running and testing things locally you won't have to set up these environment

38
00:02:27,530 --> 00:02:31,580
variables when you actually the ploy the Web site going to collapse this Left-Hand tab.

39
00:02:31,580 --> 00:02:36,410
Now that we have everything set up and let's actually begin afoot I would call kind of the true sense

40
00:02:36,410 --> 00:02:37,210
of flask dance.

41
00:02:37,210 --> 00:02:40,990
So again this has to do is just making sure things run locally.

42
00:02:41,000 --> 00:02:49,070
Any errors we're going to start off by saying from flask import import flask.

43
00:02:49,450 --> 00:03:00,280
Redirect your URL for render template and then we'll say from flask underscore dance doc contrib doc.

44
00:03:00,370 --> 00:03:02,180
And in this case we're going to be using Google.

45
00:03:02,210 --> 00:03:09,250
So say Doc contrib dot Google import and we're going to make a Google blueprints and then we'll also

46
00:03:09,260 --> 00:03:12,080
import this Google kind of keyword function.

47
00:03:12,880 --> 00:03:13,300
OK.

48
00:03:13,520 --> 00:03:20,090
So we'll set up our flask application as usual safe flask pass the name and then in order to accept

49
00:03:20,180 --> 00:03:22,750
any forms we can always set up the secret key.

50
00:03:22,910 --> 00:03:24,460
We'll see at that config.

51
00:03:26,180 --> 00:03:32,020
Seeker underscore key and in this case we'll just set it to any string you want.

52
00:03:32,160 --> 00:03:38,910
I'll say my secret and then comes out of the main line which is actually setting up the blueprint.

53
00:03:39,070 --> 00:03:46,640
So this will say that the variable blueprint is equal to the call make Google blueprint and you can

54
00:03:46,640 --> 00:03:50,260
check out in the documentation the various parameters you can do here.

55
00:03:50,450 --> 00:03:52,820
Well we're going to do is we're going to do the following.

56
00:03:52,910 --> 00:03:57,620
I'm going to have a client I.D. I'll set that up as just an empty string for now because we actually

57
00:03:57,620 --> 00:03:59,430
need to set that up with Google.

58
00:03:59,510 --> 00:04:01,380
So we have client ID that's a blank string.

59
00:04:01,380 --> 00:04:03,930
Right now we also have client secrets.

60
00:04:03,980 --> 00:04:05,530
That's another story you're going to need to discover.

61
00:04:05,530 --> 00:04:07,320
But we'll leave it blank right now.

62
00:04:07,640 --> 00:04:13,640
And since we're running everything off line we'll say off line is equal to true by default.

63
00:04:13,670 --> 00:04:15,740
It's usually false but we're running things locally.

64
00:04:15,740 --> 00:04:17,750
So I'll say offline is equal to true.

65
00:04:17,780 --> 00:04:26,030
And then finally ups will also say that the scope of essentially the information we want back is a list

66
00:04:26,450 --> 00:04:31,070
with profile and email okay.

67
00:04:31,210 --> 00:04:34,460
And then we can do this a little bit so it looks a little nicer.

68
00:04:34,480 --> 00:04:36,720
So those are the parameters that we're going to be working with.

69
00:04:36,730 --> 00:04:40,660
Again you can check of the documentation there's a lot more parameters you can add in this blueprint

70
00:04:40,990 --> 00:04:45,340
to kind of fine tune it to your specific situation but in our case we're doing very simple things we

71
00:04:45,340 --> 00:04:49,010
use and there's going to show that hey here's this users e-mail.

72
00:04:49,240 --> 00:04:54,470
So again we have Client ID clients secret and then off line is true since we're running is locally Elisei

73
00:04:54,520 --> 00:05:02,760
scope so now that I've set up my blueprint what I'm going to do is register this blueprint so say at

74
00:05:03,000 --> 00:05:10,470
DOT register blueprint and hopefully this feels familiar from our scaling lectures to kind of larger

75
00:05:10,470 --> 00:05:15,780
scope that will just pass and that blueprint we created and then the world Prefect's we're going to

76
00:05:15,780 --> 00:05:22,250
give this we'll say your L prefix and set that equal to forward slash log in.

77
00:05:22,250 --> 00:05:25,420
So we're basically seeking logons to go straight to Google.

78
00:05:25,620 --> 00:05:27,960
So when someone clicks hey it's time to log in.

79
00:05:27,960 --> 00:05:32,580
Essentially a new window is going to open up or they'll be jumped to a new page where we have to sign

80
00:05:32,580 --> 00:05:36,050
in with your Google email and password.

81
00:05:36,060 --> 00:05:37,520
OK so we've reached her that blueprint.

82
00:05:37,530 --> 00:05:42,120
Now we're going to do it just set up our templates so start off with the home template.

83
00:05:42,890 --> 00:05:44,480
So that's the easiest one.

84
00:05:44,480 --> 00:05:46,610
And let's actually kind of get some more lines here.

85
00:05:46,610 --> 00:05:50,220
So this is the middle of screen zoom in a little bit.

86
00:05:50,310 --> 00:05:58,490
Say app that route will say the home page that's just going to be equal to index.

87
00:05:58,530 --> 00:06:03,280
And here we're just going to return render a template and we'll say render home.

88
00:06:03,500 --> 00:06:06,530
H.M. right now home that 20:00 is blank.

89
00:06:06,570 --> 00:06:08,520
So let's check it out and fill it in.

90
00:06:08,700 --> 00:06:10,420
Going to go to Home each T.M. here.

91
00:06:11,850 --> 00:06:13,970
And much smelts can be super simple.

92
00:06:14,070 --> 00:06:17,780
It's just going to say home page as a heading 1.

93
00:06:18,150 --> 00:06:23,030
And then what we're going to do as well is say have two links.

94
00:06:23,040 --> 00:06:31,080
One is an ref and this will point to your L4 and here will say The View welcome which we haven't actually

95
00:06:31,080 --> 00:06:37,050
built here but we will in just a second and we'll say welcome page here.

96
00:06:38,410 --> 00:06:45,240
They'll will create a break then we'll add in one more link and this one is going to be your l4.

97
00:06:45,640 --> 00:06:54,710
In this case it's going to connect to the log in and then will say log in here with Google.

98
00:06:54,880 --> 00:06:59,350
So essentially we're going to do is when the person visits the home page will have the option of visiting

99
00:06:59,410 --> 00:07:02,740
the welcome page which is another view that's going to connect to this welcome each time.

100
00:07:02,730 --> 00:07:04,510
All right now that's blank.

101
00:07:04,540 --> 00:07:07,360
And then the other option is going to be log in here of Google.

102
00:07:07,360 --> 00:07:12,120
So if they try to click welcome page here and they're not actually authenticated of Google yet then

103
00:07:12,300 --> 00:07:16,390
this is going to show some sort of error then they'll be able to come back to the home page and click

104
00:07:16,390 --> 00:07:17,640
log in here of Google.

105
00:07:17,710 --> 00:07:21,700
And then once they log on to Google they'll be taken back to the home page and then they can click this

106
00:07:21,700 --> 00:07:26,680
welcome page and they'll be able to see whatever we actually post and welcome each team L which will

107
00:07:26,690 --> 00:07:27,700
edit in just a second.

108
00:07:27,970 --> 00:07:30,480
But that's your basic home H.T. mail page.

109
00:07:30,490 --> 00:07:32,340
We'll come back to that pie.

110
00:07:32,530 --> 00:07:38,640
And since we've been talking about that welcome view let's kind of set it up but in order to set up

111
00:07:39,210 --> 00:07:41,690
the welcome view we'll have to set up our log in view.

112
00:07:41,790 --> 00:07:49,100
So I'll start off just by setting up the skeleton of welcome to all of the forward slash welcome and

113
00:07:49,110 --> 00:07:57,990
I will say the welcome and right now I'm just going to say return rendered template welcome.

114
00:07:58,070 --> 00:07:59,020
H T.M..

115
00:07:59,430 --> 00:08:03,690
So we're going to still fill in a lot more to welcome as well as pasand some parameters and the welcome

116
00:08:03,690 --> 00:08:04,400
each T.M..

117
00:08:04,680 --> 00:08:11,360
But in order for that to make sense I want to first set up my log in so here to say app thought routes

118
00:08:12,270 --> 00:08:19,020
and let's say forward slash log in forward slash Google and that is to make sure we don't get an error

119
00:08:19,320 --> 00:08:22,870
when we actually connect this to the Google blueprint.

120
00:08:24,820 --> 00:08:35,360
They'll all say the log in and will do the following check we'll say if not google doc authorized and

121
00:08:35,360 --> 00:08:38,140
where that comes from is essentially up here.

122
00:08:38,300 --> 00:08:44,210
When we imported Google from Flashdance thought contrib Google we can check if that person is Google

123
00:08:44,210 --> 00:08:45,440
authorized or not.

124
00:08:45,440 --> 00:08:52,080
So if they're not authorized then we're going to do is we're going to return and recall render a template.

125
00:08:52,820 --> 00:09:00,230
Your L4 and we're going to pass in google doc loggin and this is essentially an automated call from

126
00:09:00,230 --> 00:09:05,790
flask that's to take you to that little screen where it asks you to log in to Google credentials.

127
00:09:05,960 --> 00:09:10,240
So essentially Flast dance is doing a ton of heavy lifting through just two liners here.

128
00:09:10,250 --> 00:09:13,510
Google to authorize and this your all for Google dot logon.

129
00:09:13,700 --> 00:09:17,000
That's taking care of kind of all the dirty work for us.

130
00:09:17,180 --> 00:09:21,140
Now if it come to the logon page and they actually are already Google authorized meaning they already

131
00:09:21,140 --> 00:09:23,090
sign up with their credentials.

132
00:09:23,090 --> 00:09:25,800
We're going to do is grab a response.

133
00:09:25,810 --> 00:09:29,280
So say RISP is equal to google.

134
00:09:29,430 --> 00:09:36,000
Don't get in what we have to passen Here's a string o off too.

135
00:09:36,040 --> 00:09:41,520
So that's open authorization to version to slash user info.

136
00:09:41,710 --> 00:09:45,790
And you'll want to make sure to check the Flast dance documentation for whatever the latest version

137
00:09:45,790 --> 00:09:46,740
of the string is.

138
00:09:46,750 --> 00:09:54,060
So this is it guys may change in the future so once we grab that response we're just going to assert

139
00:09:54,840 --> 00:09:59,100
that the response was OK meaning it just wasn't blank or was empty.

140
00:09:59,130 --> 00:10:03,620
And then also say response dot text.

141
00:10:03,670 --> 00:10:08,450
So once we actually response that hey we actually got a response and there's something in there it spots.

142
00:10:08,590 --> 00:10:10,750
So that's what this line 32 is doing.

143
00:10:10,810 --> 00:10:14,920
Then we actually grab stuff from that response and it's essentially on file.

144
00:10:14,920 --> 00:10:18,680
So something we think rap is that person's email.

145
00:10:18,700 --> 00:10:23,500
So when someone actually registers and authenticates through Google they essentially say yes you can

146
00:10:23,500 --> 00:10:30,040
have access to my e-mail if you ever use google and download an app sometimes you'll say something like

147
00:10:30,400 --> 00:10:35,140
allow this app to have permissions to you know your contacts or your phone number or your e-mail et

148
00:10:35,140 --> 00:10:35,590
cetera.

149
00:10:35,620 --> 00:10:38,380
That's essentially what's happening here through our web application.

150
00:10:38,380 --> 00:10:43,900
When someone logs in and authenticate through this we'll be able to say yes I allow this flask Web sites

151
00:10:43,900 --> 00:10:45,710
have access to my e-mail.

152
00:10:45,730 --> 00:10:51,030
So we're going to do so here say e-mail response thought Jason.

153
00:10:51,280 --> 00:10:57,020
And after that since Jason essentially is like a dictionary we can grab that e-mail key.

154
00:10:57,070 --> 00:11:00,450
So this e-mails now the e-mail address of whoever logged in

155
00:11:03,270 --> 00:11:11,910
here are going to return rendered template and we'll say here welcome the h t m l and then we're going

156
00:11:11,910 --> 00:11:14,510
to pass and email is equal to email.

157
00:11:14,870 --> 00:11:15,450
OK.

158
00:11:15,510 --> 00:11:18,560
So notice here that this loggin is also going to render this welcome.

159
00:11:18,570 --> 00:11:19,430
H Tim L.

160
00:11:19,740 --> 00:11:24,990
So right after the log then essentially if they click here on the home page time to log in and they're

161
00:11:24,990 --> 00:11:27,300
already logged then it takes them to this.

162
00:11:27,300 --> 00:11:28,510
Welcome to T.M..

163
00:11:28,800 --> 00:11:34,650
However we're going to set up a separate welcome HVM L are basically a review for welcome so that the

164
00:11:34,650 --> 00:11:38,890
user is not logged in and they tried to just jump ahead by clicking here on welcome page.

165
00:11:39,040 --> 00:11:41,220
We'll kind of check as well.

166
00:11:41,220 --> 00:11:46,710
So this will actually then this will basically kind of prove to you that the person has the log in.

167
00:11:46,920 --> 00:11:51,130
So this should return an error an internal server error.

168
00:11:53,160 --> 00:11:55,780
If not locked in.

169
00:11:55,820 --> 00:11:59,630
Now whether or not you would set it up this way this is more for demonstration purposes just to kind

170
00:11:59,630 --> 00:12:04,040
of show you that yes in fact that Google open authorization is working.

171
00:12:04,070 --> 00:12:08,450
So I kind of think of this more as an example just to prove it to ourselves that it's working than something

172
00:12:08,450 --> 00:12:09,440
you would actually do.

173
00:12:09,470 --> 00:12:13,250
And if you notice a quick start guides they're not going to have things like this linking to the templates

174
00:12:13,280 --> 00:12:17,790
but this is more for me to really prove to you that you're not going to get access to this and in effect

175
00:12:17,830 --> 00:12:19,430
they'll return a server error.

176
00:12:19,760 --> 00:12:27,130
So we're going to copy the exact same code from down here describing the response pacing in here and

177
00:12:27,130 --> 00:12:30,000
then we'll passen e-mails he calls the.

178
00:12:31,530 --> 00:12:36,440
So again if someone tries to visit this welcome page and they're not wog then then essentially this

179
00:12:36,540 --> 00:12:41,610
is going to return an error because this is not going to be OK and they'll get some sort of internal

180
00:12:41,610 --> 00:12:47,030
server error and if they are logged in then everything's going to be okeydokey here and they'll be able

181
00:12:47,030 --> 00:12:47,800
to see it.

182
00:12:48,200 --> 00:12:49,010
OK.

183
00:12:49,010 --> 00:12:51,150
So we'll kind of show that when we actually run this page.

184
00:12:51,410 --> 00:12:54,110
But last thing we need to do is set up welcome each team.

185
00:12:54,350 --> 00:12:55,670
So let's come back to this.

186
00:12:55,670 --> 00:12:56,550
Welcome to email.

187
00:12:56,550 --> 00:12:57,820
That is now empty.

188
00:12:57,830 --> 00:13:00,980
Remember we were passing in this h this email variable.

189
00:13:01,190 --> 00:13:06,410
So this is going to be a really simple web site or web page just says welcome.

190
00:13:06,440 --> 00:13:16,350
Google user and then we'll say H-2 your email is and then we'll just pass on their e-mail because remember

191
00:13:16,350 --> 00:13:22,350
if we come back to Apple Pie we're passing in this e-mail variable from that response from Google that

192
00:13:22,380 --> 00:13:23,700
get user info.

193
00:13:24,000 --> 00:13:24,720
OK.

194
00:13:24,720 --> 00:13:29,210
So essentially we've done everything that we need to do on the flock's side.

195
00:13:29,250 --> 00:13:33,900
The next thing we need to do is actually grab and set up this client id as well as this client secret

196
00:13:33,900 --> 00:13:36,530
key which is going to be what we're doing in the next video.

197
00:13:36,670 --> 00:13:39,200
A quick review of everything we set up so far.

198
00:13:39,240 --> 00:13:43,260
We started off by setting the environment variables we need in order for this to run locally with no

199
00:13:43,290 --> 00:13:43,960
errors.

200
00:13:44,960 --> 00:13:47,420
Then we performed our imports.

201
00:13:47,420 --> 00:13:48,820
We set up this Google blueprint.

202
00:13:48,860 --> 00:13:54,290
And you can check out the Flast dance documentation page for all the details on these blueprints.

203
00:13:54,290 --> 00:13:59,090
They have different blueprints for essentially each different log and so there's a Facebook blueprint

204
00:13:59,280 --> 00:14:02,460
a slack blueprint et cetera and often change.

205
00:14:02,470 --> 00:14:05,490
So we want to be up to date with the latest from the documentation.

206
00:14:05,750 --> 00:14:08,460
We register that blueprint to log in.

207
00:14:08,600 --> 00:14:10,370
We set up our index page.

208
00:14:10,370 --> 00:14:14,850
We have this welcome page that is isn't going to work unless the person is actually logged in.

209
00:14:15,020 --> 00:14:19,520
So if we can't assert that there is actually a response from Google saying there are log then then this

210
00:14:19,520 --> 00:14:23,660
will return some sort of internal server error essentially showing you that someone can't just jump

211
00:14:23,660 --> 00:14:25,840
ahead and go to welcome.

212
00:14:26,030 --> 00:14:27,850
And more importantly we have log in.

213
00:14:27,920 --> 00:14:32,700
So we say if the Google's person is authorized go ahead and return this template for Googlebot log in

214
00:14:33,050 --> 00:14:37,340
which has been automatically already set up for us from flask thence and then we have the same sort

215
00:14:37,340 --> 00:14:40,420
of grabbing the response that if that is all OK.

216
00:14:40,460 --> 00:14:45,320
Mean they're already logged then that we should render the welcome team template which again is just

217
00:14:45,320 --> 00:14:49,010
this page right here that shows that person's e-mail.

218
00:14:49,390 --> 00:14:49,890
OK.

219
00:14:50,030 --> 00:14:55,270
So coming up next we're going to show you how you can set up this client id and client secret with Google.

220
00:14:55,310 --> 00:14:58,040
Keep in mind that these instructions may change in the future.

221
00:14:58,040 --> 00:15:02,850
So you want to check the Flast dance documentation to get the latest API code.

222
00:15:03,140 --> 00:15:04,520
All right we'll see in the next lecture.