Everyone welcome back and Johnny be here with slopes dot com and this lesson we are going to work on
facebook logging.
So we're going to try and get through it all the way we might have to make this two videos.
Let's see how far we can get.
All right.
So let's go ahead and jump into safari here and I want to open up a new tab here and I'm going to search
for Face Book.
I was firebase authentication.
OK.
And I'm going to pick right here and we have the documentation for just like before we're going to follow
it loosely.
A lot of it is stuff that we have already done like putting in the cocoa pods and everything else.
So first thing we're going to do though is we're going to go we're going to start out on the Facebook
for developers site here.
All right.
And so if you have a Facebook account you can log in and go to your apps up here and we're going to
add a new app here.
All right.
Going to say display name.
We're just going to call this firebase social dev slopes.
All right.
Contact e-mail whatever you want and create app ID.
I'm going to try and put in this capture.
Here's each a DV case X and submit.
All right.
So now we are here need to select a product and we want a Facebook Lagann kept to set up and we are
going to use the QuickStart and Facebook logon to your app.
We want iOS and we have already we already have the Facebook SDK be a cocoa pods going to say next.
And that too is and kittiwakes could project which we have already done as well.
All right so here add your bundle identifier right so that we can do.
Let's go into our info up here and grab our Or I should say here on our target in our general tab and
let's grab our bundle identifier and just going to paste that right here and say save and then continue.
And then we need to enable single sign on for you.
All right.
So we check that it's all done save and next.
Right so then we know it looks like we need to add some stuff to our P list.
So I'm going to just copy this right here.
Or you can click on the copy code button right here and then back in tax code Germander and put up the
list and I can right click and say open as source code and then it doesn't really matter where you pasted.
I'm going to do it right here at the bottom going to paste that code that we just got from our Facebook
developer's site.
I'm going to jump back because it looks like we have a little bit more and see here going to grab this
as well.
Or click on the copy code and let's jump back in and paste that as well.
Going to see that.
And then click and say open as property list and make sure that that all works well.
All right looks good.
I'm going to say next and this is Connect the app delegate to post-process the results from actions
and that looks all right.
So we're going to need to add to all of this to our app delegate but you'll see that this year is in
objective c code.
So we're not going to copy that.
But I will show you what we need to add.
All right so let's jump into our delegate here.
And first thing we are going to need to import if the SDK core kit and here I'm going to start to kind
of separating our platforms just with some comments from inside Google.
And this is going to be Facebook and what we need to add here is s SD K application delegate that shared
instance that application.
And let's see here we want this one right here.
Did finish launching with options.
So for that application we just passed an application and for did finish lunching with options we pass
and launch options and then we are going to need to add a new method here.
This is just a delegate method.
It is open.
You are ill and we want yes this one right here.
And we actually should have added this for the Google platform as well.
So lets add Google first and say Let return Google is equal to g Id sign and shared instance that handle
your L and the u r l that we are handling is your own and the source application is options and then
square brackets and inside we're going to say you by application.
Open your options key dupped source application as a string and then for annotation we Pessin options
and square brackets UI application open you are all options.
Key dot notation.
And there we go.
And then we need one for Facebook.
So this is the return Facebook call this one's not quite as wordy.
This is just FP SDK application delegate that shared instance that application and we want this one
here the second one with options open and options.
And for the application we just Pessin app for open your L here we pass and the u r l and for options
we just pass an option.
And then on here we can return and we're going to return return Google or with pipes return.
Facebook there.
All right so kind of a big word E.S. But that's taken care of now.
So let's zoom back in to our guide here and we're going to say next and this is where we add the Facebook
loggin button.
And you know what I think the rest of this we're just going to handle on our own.
I mean see here I call yet.
So the rest of these steps we're just going to kind of go through on our own just go into our settings
and we can take a look here what we get.
So we got our app idea and our APS-C cret which we're going to need here in a bit to bundle here was
silent and turned on so that's good.
All right.
So I think we're pretty good here for now.
Let's zoom back in to X code again and let's go ahead and work on our view controller.
So there are a couple of ways to work with the Facebook log and buttons.
Kind of like with Google we have kind of a built in default button that we can use or we can go with
a custom button and I'm going to show you both ways.
All right so first we were going to use the built in button and so we're going to need to import F.P.
SDK loggin kit and we're going to implement a protocol here maybe STK log in and delegate and then it's
going to tell us that we need a couple of methods here.
Someone to say fix and those will that at least two methods here I'm going to cut them from up here
and then down here you see here also separated here a little bit.
So here we have the google stuff and then here we're going to put on Facebook and I'm going to paste
those two methods that we got.
And here I mean to say firebase.
All right so here we can see that we have a logon button with a complete completion handler.
So this is the method that is called Once we are logging in.
And then this is called when we log out and we're not actually going to do anything when we log out.
This is just where you could handle log out sequence if you needed to change any of the UI or anything
like that.
But before I forget there is one other thing that we need to do.
So here in our Parvaiz social info we need to add a new or else type here.
All right so.
Well actually what you'll see here is that Facebook has kind of taken over this you or else came remember
we added the Google one here before.
So we'll leave this Facebook URL scheme.
You'll notice that this is the app ID for our Facebook app.
If we open up here it ends in two 6 or 3 6 5 9 as we can see right here.
So we're going to add back our Google one so I'm going to I added a new URL scheme and I'm going to
open up our Google service and put up the list and reverse client id just going to copy that and back
to our.
You're all types here going to add that back.
There we go.
And then for good measure I'm going to add another one that will be used for our Twitter later on and
hopefully that doesn't replace one of these when that gets added.
All right.
So back to our view controller actually two main story board right now and we are going to go ahead
and add our Facebook buttons.
Same thing with Google stuff.
We're our first one is just going to be added as a whole.
I view
that in at its constraints.
So twenty eight and twenty and height of 40 and those constraints and let's change the background to
our light to great color and then change the class to be SD.
K. loggin button that would go.
And then for good measure.
Let's go ahead and add our custom button as well here and add some constraints.
That's going to be 20 from the left from the top and 20 from the right and height of 40.
Add those four constraints.
We're going to change the button text to say Facebook sign in and we're going to change the text color
to white and the background color to a dark blue.
And if you want that it is hecks color four to six seven be one you know going to close that and open
up our assistant editor with The View Controller and I'm going to go ahead and create an outlet for
this logon button here and we're going to call this face book logon button and it's an outlet and then
down here under our Facebook section I'm going to add an action for our second Facebook custom button
control and drag action.
And this is custom Facebook tapped.
OK.
And that is an action.
OK that looks good.
All right closing assistant editor back into our view controller we are going to need a variable here
for our Facebook logon manager came to see if there are variables and this is let log in.
Manager equal and S-B STK log in.
Manager.
So here in view did load what we need to do is we need to say Facebook logon button that delegate is
equal to itself.
All right so let's take a look at what we've done so far.
We have added a protocol which gives us these two methods here logging and logging button did log out.
We have our Facebook log in button which looks like have misspelled.
So we have Facebook and button and then we are sending the delegate equal to self.
So now this button is going to be working with these methods.
All right so let's go ahead and figure out what we want to have happen when we click on the logon button
but we get a error back a potential error.
So we're going to do a check on that.
So I'm going to say if let air is equal to error then we're just going to debug printed debug print
and we're going to say failed Facebook log in and then I'll just print out the error and we will return
to the function.
But if we were successful then we get this result here.
And from that we can get our credential which is how we link up and integrate the platform log in with
the firebase log in.
So let's get that credential we're going to say let credential equal Facebook off provider that credential
with an access token and that access token we can get from the result that token that token string.
And now that we have the credential all we got to do is call firebase log in and pass in the credential.
So go ahead and run this and see if I forgot anything.
All right we're going to click on our continue with Facebook button so this is the default if the SDK
logon button right here.
And here's our custom one.
So when I click on the default one here and it says it wants to use Facebook dot com the sign ends on
the same continuum.
And here we go.
All right.
So looks like it's working.
So far I have already been logged in before so I'm going to continue as John and you know what I think
that worked.
So let's go ahead and check out our firebase console.
Im going to refresh rate here and you know what we forgot to do we forget to enable the Facebook sign
and provider so when to click here and here is going to I'm going to say enable I was going to ask for
an ID and our app secret.
So let's come back to our Facebook developer site here and grab the can grab the app ID copy that and
paste that here and then I'm going to grab the app secrets from this show and for your security you
must re-enter your password.
All right.
So this is something that you don't want people to see.
You want to keep this secret secret is the name.
But since you know this is just a teaching app I'm going to be deleting this later anyways.
Don't really care if you guys see it.
So I'm just going to put in my password and say submit and then I'm going to copy our app secret and
jump back into firebase.
I want to put in our app secret and then we need to copy this right here and I'm going to say save.
And that's.
And then back in our Facebook app we need to come down to Facebook lot in and put in a cut and paste
that right here with the valid o'th redirect to you or I and then save those changes and save these
changes as well here.
And then let's try that one more time back in X code let's run this and see if it works.
Hope you'll notice that we are still logged in via Facebook.
So let's real quick log out of our social logon.
So here in our log out social.
Here in our Facebook what we need to do here is say log in manager at log out.
I'm going to run that again and let's try to log in first with Facebook something I say continue with
Facebook continue and continue plan.
OK so Bochum user.
All right so now let's let's check out our firebase users here and go to users and oh hey there we go.
All right so now we have a Facebook identity here.
So let's go and check out our log out here and open up our simulator again and if we log out all right
there we go.
So we're logging out and you can see that this is switched from log out to continue with Facebook.
So our Facebook log out is also working.
So if I click on it again then sure enough you have to go through the Facebook logon cycle again.
All right.
Awesome.
So we have Facebook luggin and firebase integration.
We're working now with the default FBA SDK log in button.
So how about this custom button here.
Well that's almost as easy as what we've got to do here because I'm Facebook tapped.
So we're going to use the logging manager would say logging manager dot log in and that we want this
one right here and with read permissions we are going to say email from you I view controller is self
and handler if you press enter then we can get a result and error in code and we're just going to do
a check on the air again to see if let errors equal to error.
Now we're going to debug print that we're going to say debug print and we're just going to say could
not log in Facebook and print out the error.
Else if the result is canceled.
So if the logon process was canceled then we can say Grant
face book to log in was canceled else then it was successful and we just need to get our credential
to say let credential messed up that list here that credential equal Facebook or provider that credential
with access token and that is BSD K access token that current that token stream then of course once
we have the credential or we have to do is call firebase log in and pass in the credential and going
to save that.
And let's try it out on our custom Facebook logon button looks like any to solve here since we are in
a closure and run.
All right.
Click on well as log out first and log out and then click on Facebook sign in and looks like it's going
through the same process takes us to our Facebook page continue as John and very good.
All right.
So there you have it the two ways of logging in with Facebook using the FBI STK log in and delegate
and having a STK logon button setting it to setting the delegate to self and using the two protocol
methods here.
And or you can do it with just having a STK logging manager.
And if you do it the second way with the customer you don't need this FBA SDK logging back and delegate.
And you don't need these two methods here.
Then you just need a log in manager and you can say that logging in with three permissions et cetera.
All right let's check out our Facebook users database here again real quick.
And this time you'll see that we have an identifier e-mail with our Facebook provider and that is because
we said here with the read permissions we set it to e-mail and we could fix that for the for the FP
STK log in.
But right here we could say Facebook log in and read permissions and we could set that right here as
well.
Email and then you'll notice remember that the first time that we did this was empty but doing what
we just did here.
Then you'll also be able to get to that identifier e-mail.
If you put this the first time.
All right so congratulations you now have both Google and Facebook who log in authentication working
for you.
All right so the final one Twitter we were going to cover in the next lesson so I will see you then.