1
00:00:04,950 --> 00:00:06,510
Everyone and welcome back.

2
00:00:06,510 --> 00:00:08,670
Jenny be here with soapstar.

3
00:00:08,850 --> 00:00:12,700
And this is our final lesson we are going to cover Twitter log.

4
00:00:12,720 --> 00:00:13,020
All right.

5
00:00:13,080 --> 00:00:16,650
So let's get to it and jump back into our browser here.

6
00:00:16,650 --> 00:00:26,260
We are currently in our firebase con. We open up a new tab hearing an say firebase off Twitter iOS.

7
00:00:26,480 --> 00:00:27,590
So much for that.

8
00:00:27,870 --> 00:00:31,100
And we should get this first link here.

9
00:00:31,740 --> 00:00:38,500
And we're going to come over here to where it says register your app as a developer application.

10
00:00:38,500 --> 00:00:38,920
All right.

11
00:00:38,940 --> 00:00:45,060
And we are going to create a new app here so I already got this one that I was working on for at testing's.

12
00:00:45,060 --> 00:00:54,060
I want to create a new app and we're going to say name I'm going to say firebase social slopes and just

13
00:00:54,060 --> 00:01:00,970
put in a description this is a demo for firebase authentication.

14
00:01:01,890 --> 00:01:02,570
Website.

15
00:01:02,790 --> 00:01:06,040
So you don't have to have a Web site like a real web site.

16
00:01:06,330 --> 00:01:13,620
You could put anything here in fact I think if we let me see here is here developers documentation for

17
00:01:13,620 --> 00:01:15,840
Twitter.

18
00:01:16,060 --> 00:01:18,860
They say Let me see here.

19
00:01:19,080 --> 00:01:27,310
So I'm not sure where it was but they said you could even put something like a h t t p place holder

20
00:01:27,540 --> 00:01:30,900
dot com you know put anything there.

21
00:01:30,970 --> 00:01:32,500
And then the callback you are.

22
00:01:32,620 --> 00:01:34,960
We're not going to put anything there quite yet.

23
00:01:34,980 --> 00:01:43,450
So when you say yes I've read and create your Twitter application already has been created.

24
00:01:43,650 --> 00:01:51,600
So now that we have our app here in our settings I guess it's keys and access tokens here we have our

25
00:01:51,990 --> 00:01:57,240
key and our secrets we want to copy our key and we're going to go back to our firebase console and we're

26
00:01:57,240 --> 00:02:00,990
going to activate our Twitter site and provide it here.

27
00:02:01,050 --> 00:02:10,020
I say enable and paste our key and then I'm going to go back to our app and grab our secret and paste

28
00:02:10,160 --> 00:02:12,100
that here for API secret.

29
00:02:12,110 --> 00:02:17,610
Now I'm going to copy our callback Eurail here is a copy callback you are going to see save.

30
00:02:17,940 --> 00:02:24,960
And then we are going to come into our settings and we want our callback you are all here going to paste

31
00:02:24,990 --> 00:02:25,760
that.

32
00:02:26,340 --> 00:02:29,120
And I'm going to say update settings.

33
00:02:29,520 --> 00:02:29,760
All right.

34
00:02:29,760 --> 00:02:30,690
Looking pretty good.

35
00:02:30,690 --> 00:02:34,530
Let's check out our documentation here again.

36
00:02:34,620 --> 00:02:36,860
So that's all done.

37
00:02:36,930 --> 00:02:42,600
Let's look at our Twitter developer documentation and one of the things that we're going to need here

38
00:02:42,600 --> 00:02:48,870
is in our prerequisites we need to add a Twitter kit to your health scheme to our app.

39
00:02:48,870 --> 00:02:55,260
So just like we have for our Facebook and Google that your whole scheme is Twitter kidda followed by

40
00:02:55,260 --> 00:03:02,210
our consumer key when it copy our consumer key again here right here.

41
00:03:02,940 --> 00:03:11,110
And then let's jump into X code come up here to our project and see here in our target and info your

42
00:03:11,280 --> 00:03:12,420
types here we go.

43
00:03:12,870 --> 00:03:19,820
And I'm going to say right here the see what was it going back to the documentation here.

44
00:03:19,990 --> 00:03:20,360
OK.

45
00:03:20,370 --> 00:03:25,930
Twitter kit all lower cap lower case and then a dash and then our consumer key.

46
00:03:25,940 --> 00:03:26,130
All right.

47
00:03:26,130 --> 00:03:33,750
So Twitter kit dash and then I'm going to paste our consumer key here.

48
00:03:33,750 --> 00:03:33,960
All right.

49
00:03:33,960 --> 00:03:35,410
That looks good.

50
00:03:35,640 --> 00:03:37,890
And let's see what else we have here.

51
00:03:37,920 --> 00:03:43,240
You know let's check out the rest of this see you or else scheme set up right so it looks like we need

52
00:03:43,240 --> 00:03:48,370
to add a couple of properties to our Ellis application queries scheme.

53
00:03:48,370 --> 00:03:50,280
We need Twitter and Twitter off.

54
00:03:50,300 --> 00:03:52,000
Let's go ahead and add those as well.

55
00:03:52,050 --> 00:04:00,010
So that's here in our photo op list and right here Ellis application query schemes we have these four

56
00:04:00,010 --> 00:04:02,320
currently so we can add one.

57
00:04:02,410 --> 00:04:07,200
And this was the what was it again Twitter and Twitter off.

58
00:04:07,290 --> 00:04:07,570
OK.

59
00:04:07,610 --> 00:04:11,530
So here we go Twitter

60
00:04:14,180 --> 00:04:20,750
and then add another one and this is Twitter off right.

61
00:04:20,800 --> 00:04:21,570
There you go.

62
00:04:21,880 --> 00:04:23,620
So I think that's pretty good.

63
00:04:23,680 --> 00:04:27,720
Let's go ahead and jump into our app delegate now and do some work here.

64
00:04:27,730 --> 00:04:35,610
First things first we need to import to Turcott and down here in or did finish lunching with options

65
00:04:36,020 --> 00:04:42,090
or we're going to need to do is we need to do the Twitter.com shared instance start start with consumer

66
00:04:42,090 --> 00:04:45,150
key and the consumer secret.

67
00:04:45,150 --> 00:04:52,080
So we are going to need to get the consumer key and consumer secret from the info dictionary key which

68
00:04:52,080 --> 00:04:55,140
we haven't actually added to our input up the list yet.

69
00:04:55,140 --> 00:04:57,250
So let's go ahead and do that.

70
00:04:57,270 --> 00:05:03,600
So to do that we're going to get into our full list and I'm going to add a couple of fields here.

71
00:05:03,600 --> 00:05:07,870
This is going to be called the consumer key.

72
00:05:08,230 --> 00:05:16,570
That's going to be a string I'm going to add another one and this is going to be consumer secret and

73
00:05:16,580 --> 00:05:27,000
then we're in a grab from our Twitter application here the consumer key piece that right here and then

74
00:05:27,030 --> 00:05:32,500
our consumer secret and going to paste that right here.

75
00:05:32,710 --> 00:05:38,610
I just want to save that and then back in our Abdellah get we can get our key and secrets and we say

76
00:05:38,610 --> 00:05:51,630
let me equal to bundle dot main dot object for info dictionary key and the key is let's see here consumer

77
00:05:52,590 --> 00:05:53,860
key.

78
00:05:53,910 --> 00:05:58,850
So where are you setting key equal to this value right here.

79
00:05:58,850 --> 00:05:59,120
All right.

80
00:05:59,130 --> 00:06:09,960
And then we need the secret as well as say secret equal and bundled that main dot object for dictionary

81
00:06:09,960 --> 00:06:10,600
key.

82
00:06:10,710 --> 00:06:15,270
And this is consumer secret.

83
00:06:15,570 --> 00:06:15,780
All right.

84
00:06:15,770 --> 00:06:17,760
And then those are of type.

85
00:06:17,760 --> 00:06:20,850
Any right now so we need to cast them to strings.

86
00:06:20,860 --> 00:06:27,940
We'll see if flat key is equal to key as a string.

87
00:06:28,480 --> 00:06:41,980
And if you let a secret equal to secret as a string then we're going to say Twitter dot shared instance

88
00:06:42,430 --> 00:06:50,890
that this start with consumer key and we Pessin key and consumer secret and we pass in secret.

89
00:06:50,890 --> 00:06:51,160
All right.

90
00:06:51,190 --> 00:06:54,250
Now Twitter is all started up and ready to go.

91
00:06:54,580 --> 00:07:00,340
And the last thing we need to do here in the app delegate is come down here to our return Google and

92
00:07:00,550 --> 00:07:02,710
return Facebook now we need a return Twitters.

93
00:07:02,760 --> 00:07:12,290
When I say let me turn Twitter equal and this is actually pretty close to the same as the FBI's STK

94
00:07:12,410 --> 00:07:14,500
when to copy this and paste it here.

95
00:07:14,600 --> 00:07:20,270
So instead of the SDK application delegate it is just Twitter.

96
00:07:20,300 --> 00:07:21,210
There you go.

97
00:07:21,770 --> 00:07:27,570
And here we are going to and the return of Twitter as well.

98
00:07:27,570 --> 00:07:28,430
All right very good.

99
00:07:28,490 --> 00:07:30,760
So far we have created our Twitter app.

100
00:07:30,830 --> 00:07:35,890
We have set up our info up list and we have our app and delegate all set up.

101
00:07:35,910 --> 00:07:42,470
So now the last thing to do is actually add our buttons and handle all of that logic into view controller

102
00:07:42,480 --> 00:07:43,410
DOS with file.

103
00:07:43,520 --> 00:07:44,700
So let's jump into it.

104
00:07:44,990 --> 00:07:51,530
So if we check out the documentation here for getting started see here.

105
00:07:53,100 --> 00:07:59,040
We want the log in with Twitter.

106
00:07:59,190 --> 00:08:05,070
You'll see here it says that the simplest way to authenticate a user is using the Twitter log in button.

107
00:08:05,130 --> 00:08:12,500
And so what they do they just instantiate encode a log in and then add it to the view.

108
00:08:12,750 --> 00:08:18,730
So we thought well we'll do that as well as our custom button like we've been doing through that here

109
00:08:18,730 --> 00:08:19,370
in view did.

110
00:08:19,450 --> 00:08:28,930
We are going to do the programmatic button first we're going to say let log in Twitter by an equal and

111
00:08:28,930 --> 00:08:32,540
then see here do we have we imported Twitter yet.

112
00:08:32,540 --> 00:08:36,830
No we've got to import Twitter say import Twitter.

113
00:08:37,490 --> 00:08:38,370
There we go.

114
00:08:38,370 --> 00:08:47,190
And now we can say t w t our log in and there we go up and then we're going to have a log in completion

115
00:08:47,190 --> 00:08:57,810
for it where we get the session and the error and we're just going to say if let error is equal to error

116
00:08:58,560 --> 00:08:59,400
then we'll Debug.

117
00:08:59,400 --> 00:09:00,120
Print.

118
00:09:00,800 --> 00:09:05,440
Well say could not log in Twitter.

119
00:09:05,910 --> 00:09:09,360
And then we'll print out the error.

120
00:09:09,360 --> 00:09:10,210
All righty.

121
00:09:10,230 --> 00:09:13,360
Next up we just got to get the credential.

122
00:09:13,370 --> 00:09:14,700
Like usual we're going to say.

123
00:09:14,790 --> 00:09:23,390
And that's from these sessions we're going to see if flet session is equal to session lit credential

124
00:09:24,140 --> 00:09:29,970
equal Twitter off provider dot cadential.

125
00:09:30,230 --> 00:09:38,240
And then we need to just pass in the tokens so session that Ophth token with the secret session that

126
00:09:38,450 --> 00:09:46,260
auth token secret and now we have our credentials we just pass that into firebase we see firebase log

127
00:09:46,260 --> 00:09:53,540
in and we pass in the credential and we need self since we are of course any closure.

128
00:09:53,540 --> 00:10:01,480
All right so now that we have a problematic regenerated button here we need to add it to a view.

129
00:10:01,600 --> 00:10:08,240
All right so what we could do is like they do and the documentation is they just add it to the view

130
00:10:08,240 --> 00:10:12,110
controller's view and smack dab in the center so it looks like this.

131
00:10:12,140 --> 00:10:15,630
Another thing that you could do you could do that or you could.

132
00:10:15,650 --> 00:10:23,290
One thing that we could do is we could just add another view here you I view and put that in here.

133
00:10:24,280 --> 00:10:32,630
And at our constraints like we've been doing 20 20 and 20 and setting the height to 40 them will go

134
00:10:32,630 --> 00:10:40,950
ahead and add our next button as well the custom Twitter log and button that we've been doing.

135
00:10:40,950 --> 00:10:51,840
And I'm going to set this to 20 8 from the top and 20 from the right and changing the height to 40 and

136
00:10:51,840 --> 00:11:01,190
add those four constraints and then I'm going to change the text of the button to log in Twitter.

137
00:11:01,510 --> 00:11:10,660
I you change the text color to white and I'm going to change the background color to a light blue.

138
00:11:11,070 --> 00:11:18,800
And if you want that color that is hecks three a and one F2 I randomly save this and open up.

139
00:11:18,800 --> 00:11:24,170
Are you controlling the assistant editor so that we can make some outlets and actions.

140
00:11:24,540 --> 00:11:35,330
So slutting our view here I'm going to say Twitter but you know it's an outlet when I say connect and

141
00:11:35,330 --> 00:11:46,070
then for our button here I'm going to create a new little section for Twitter here under the Facebook

142
00:11:46,130 --> 00:11:51,660
I'm going to say Twitter and I'm going to create an IB action for our button here.

143
00:11:51,990 --> 00:11:53,650
And this is in action.

144
00:11:53,800 --> 00:12:04,380
When I say custom Twitter tapped and connect I'm very good going to calls or assistant editor go back

145
00:12:04,380 --> 00:12:11,640
into our view control it swift and right here after we create our button in code then we are going to

146
00:12:11,670 --> 00:12:17,540
add that button to our Twitter button view that we just created here.

147
00:12:17,560 --> 00:12:25,700
So when you say Twitter button you add some view and the view that we are adding is the log in Twitter

148
00:12:25,710 --> 00:12:29,550
button and then I'm going to align that to the center.

149
00:12:29,580 --> 00:12:39,340
So I want to say you love intuit or button dot center dot x is equal to the Twitter button view data

150
00:12:39,440 --> 00:12:44,460
center dot X so it can run there and just see how it looks.

151
00:12:45,640 --> 00:12:45,980
Right.

152
00:12:46,020 --> 00:12:47,460
Looks good.

153
00:12:47,700 --> 00:12:51,400
Go ahead and click on this and see what happens.

154
00:12:51,430 --> 00:12:52,140
Check it out.

155
00:12:52,140 --> 00:12:53,640
We are launching here.

156
00:12:53,640 --> 00:12:56,040
All right so username or e-mail.

157
00:12:56,160 --> 00:12:58,990
Go ahead and put in my email and password here.

158
00:12:59,130 --> 00:13:06,600
When you say authorized app and boom we are back and we are logged in.

159
00:13:06,620 --> 00:13:07,980
All right.

160
00:13:07,980 --> 00:13:13,660
So simple as that once you got your Twitter app set up once you have all of your info up close with

161
00:13:13,690 --> 00:13:17,630
your schemes and the consumer key consumer secret.

162
00:13:17,630 --> 00:13:23,990
Once you set up your app delegate and then all you need to do is create this log and Twitter button

163
00:13:24,560 --> 00:13:26,050
and boom.

164
00:13:26,120 --> 00:13:27,130
Pretty nice.

165
00:13:27,590 --> 00:13:32,600
So last thing I want to show you is we have our custom Twitter button down here.

166
00:13:32,620 --> 00:13:33,490
Let's see.

167
00:13:33,650 --> 00:13:43,750
Twitter tapped and pretty much all we do here is we just say Twitter and Dot shared instance dot loggin

168
00:13:44,240 --> 00:13:54,490
and we have a completion here so we're going to session and error and then we can actually just copy

169
00:13:54,510 --> 00:13:57,340
what we have in our other Twitter button here.

170
00:13:59,360 --> 00:14:02,770
And paste that right here.

171
00:14:03,050 --> 00:14:05,640
And let's run that again make sure that works.

172
00:14:05,690 --> 00:14:12,350
I'm going to log out and then log back in with this custom Twitter button and looks like it is working

173
00:14:12,350 --> 00:14:13,860
just as expected.

174
00:14:16,090 --> 00:14:17,920
All right perfect.

175
00:14:17,920 --> 00:14:19,670
All right so there we have it.

176
00:14:19,690 --> 00:14:29,410
We have covered in depth these three social logons Google Facebook and Twitter and now you are able

177
00:14:29,410 --> 00:14:32,070
to implement this in any of your apps.

178
00:14:32,080 --> 00:14:39,410
Now you'll notice that we didn't do anything else after we log in but that is very easily handled.

179
00:14:39,430 --> 00:14:44,040
For instance here in your let's see here in your office to change listener.

180
00:14:44,330 --> 00:14:50,890
Once we log in instead of just saying self user input off label and putting up a label here you could

181
00:14:50,890 --> 00:14:56,160
do something like perform Segway and then you could perform Segway to your next to me.

182
00:14:56,170 --> 00:15:00,190
Once we have logged in and then throughout the rest of your app you're locked in and you have access

183
00:15:00,190 --> 00:15:03,150
to your users information.

184
00:15:03,160 --> 00:15:04,300
So there we have it.

185
00:15:04,360 --> 00:15:09,790
I hope you guys learned a lot going through this course learning how to implement the firebase social

186
00:15:09,790 --> 00:15:10,900
logons.

187
00:15:10,900 --> 00:15:16,990
All right so my challenge to you is to implement social log in and one of your own apps and make it

188
00:15:16,990 --> 00:15:20,110
so that once you log in you actually continue with the rest of your app.

189
00:15:20,110 --> 00:15:24,040
You will segue to your your main PC and continue from there.

190
00:15:24,040 --> 00:15:24,630
All right.

191
00:15:24,760 --> 00:15:30,840
So I hope you guys had a lot of fun learning about social log in and keep it up and I'll see you around.