Set up Facebook sign-on

- [Instructor] All right, congratulations. You guys have made it through all of the hard part of setting up Laravel Socialite. Now it's time to get down and have some fun. In this video, we're actually going to be setting up Facebook sign on. That's right, we're actually setting it up. By the end of this video, you will be able to click, log in with Facebook and use Facebook to log in or create an account in your application. So that's actually happening in this video and throughout this video. We're gonna start off by creating a new app in Facebook. We'll talk about what that is in just a moment here. And we're gonna get the app ID and the app secret fields. Those are like API tokens. We're gonna put those into Laravel so that we can make our login work. And then we're gonna go ahead and start testing the Facebook login functionality. So that's the focus of this video, is those core elements. Now of course whenever you work with any service provider, whether it's Facebook, Twitter, Google, Pinterest, Instagram, whatever those social networks are that you wanna be logging in through, you always need to create an account or an app or they're usually called apps, on those social network sites. You need to tell that social network, hey I wanna send people over to you to log in through your application. That is a required element for each of these and you're gonna need to set that up for every account, every service provider that you wanna use. And so we're gonna start off by doing that for Facebook. Now the steps are roughly the same between all the different service providers, so I'll walk you through the Facebook one. It's largely the same if you decide to use a different provider, it's basically the same thing. Once we get done with that process, Facebook's gonna give us two important elements. They're gonna give us an app ID and app secret. Again, this is the same with any service provider, so as we work with some of these other ones, you'll see the same thing. We're gonna get a secret and an ID. Now these can be called slightly different things but Laravel calls them client ID and client secret, but that's the same thing as app ID and app secret. Don't worry about those differences. They're the same thing. All right, so let's start off, let's create a Facebook app. Let's tell Facebook that we want to sending users over to register for one click log in on their website. So in order to do that, we're gonna go to developers.facebook.com/apps. Okay, so just type this in your browser, developers.facebook.com/apps. I'll see you guys in the browser. Okay, so back over here inside the browser. What you're gonna do, is you're gonna go to developers.facebook.com/apps and when you get there, you may need to log in. You do have to have a Facebook account to continue. But once you get there, this is what you're going to see. Okay, so you may not have all of these boxes, the nice thing you see here. I have several apps that have already been created so that's why I've got several here. These might be empty. But either way, you're just gonna come up whether you have these or not, you're gonna come up to the big green button here and click add new app. Once we have here we're gonna give our application a name. We're gonna call this socialite, and the of course a contact email is required. We're gonna click create app ID, and then we do have to fill in a captcha just because of security. So go ahead and try to figure out your captcha and then click submit. And we should get to a page like this. Okay, so now these are all the different APIs that Facebook has. The large services like Google and Facebook will have tons of APIs and so you have to kinda sign up for each different API individually. So just keep that in mind. Some of the simpler ones don't have all these APIs. So we'll be using Facebook login. But before we click this, I wanna keep in mind here that you are working inside of a live application. So we've created now a live application. You can see we have an app ID up here which is one of the elements we need. And the problem with Facebook is Facebook has a lot of security measures in place for live applications. One of the most notable ones is that it requires you to have an https server, and it also will not work with local host. So we cannot use this live app we just created. Instead we're gonna need to make a sub account under this app that is called a test app. Okay, so come up here to socialite, click create test app, and we're gonna create a test application for Socialite that will allow us to do these things. And then when we're done, when you guys actually wanna go live, all you're gonna do is come over to your live app and swap out the different information that's in your live app from your test app. This is gonna work basically the same thing. So let's go ahead and set this up. I'm gonna call this Socialite test. Click create test app. Gotta fill in another captcha. Let's click submit, and now we're gonna get basically the exact same thing here. So you can see this looks exactly the same. And here we go. We have our app ID and we have our app secret. Let's go ahead, we're gonna fill these in in our application and then we're gonna come back and make a few other little setting changes that are gonna be required. So let's head back over to our project. I'm gonna over to Adam. And we are going to start filling in that client ID and that client secret that we just got. Now where do we put all this information? Well, as you would expect, it would go into a config file and it's gonna go into config services. Now this is where you can put information for all of your third party services. So you can see some are already pre set up here. We're gonna just create one for Facebook, and there's gonna be three elements that are required. You have client ID, and then you're going to have your client secret, and then you're going to have your redirect. Okay now these are the same three things no matter what service provider you're setting up, whether it's Facebook or Twitter or anything else, you're always gonna have these same three things. They're always gonna be client ID, client secret and redirect. Now in Facebook's case, Facebook has slightly different terminology, they call it app ID and app secret. But you still need to call it client ID and client secret in Laravel. So what we're gonna do here is we're going to tie this to our ENV file. So we're gonna make an ENV element. And we're gonna say Facebook ID, okay? Let's do the same thing down here. We're gonna say ENV, and we're gonna say Facebook secret, all right? And then we can do the same thing here if we wanted. We can do Facebook, redirect and we're good to go. So now we can just create these elements in our ENV file and then fill them in. Let's copy this. We're gonna create these elements in our ENV file and we'll be good to go. So we don't really need this services file anymore. Everything's just gonna be handled in the ENV. Down here at the bottom I'm just gonna create Facebook ID. Then we're gonna create Facebook secret, and then finally the redirect. Okay, so these are the three elements we have. Let's just go copy this over from the browser. Here's our app ID. Let's copy that, paste it into the Facebook ID. Then let's get our secret. We're gonna have to show that secret. Let's paste that one in now. And then our redirect. This is the actual redirect URL we wanna redirect to. Now we can find this by just going over to our routes file. We created this previously. You can see we created these two routes and this second one is the redirect URL that we're looking for. So it's login/provider/callback. That's the route that we're going to meet. Now I am noticing we made one mistake here. It looks like we did social account controller. These actually need to be auth/socialaccountcontroller. So let's just go and fix that real quick. Because this account controller's inside the auth folder. Okay, so now let's go through and we're gonna tell it to redirect to this URL, login/ and then we're gonna put Facebook, 'cause that's the provider, login/facebook/callback. So let's go ahead and do that inside of our ENV file. Let's come over here. We're gonna say http://localhost8000/login/facebook/callback okay, so just like that we're gonna do that. And then we'll be good to go. So now we have everything we need to get running in Facebook on the Laravel end. Now let's jump back over to the browser 'cause there's a few settings we do need to change. Let's come up in our project, remember we're still in our test application. Let's come over to settings, and we need to change a few things. So here you can change your name and stuff like that. We do need to have an app domain. Otherwise this will cause a problem. Now in our case, our app domain is just localhost. Now let's say when you wanna move this to live, let's say your website is example.com, you would just put example okay, or example.com. So that's going to be a domain that you want. So in our case we're just gonna do localhost. You can see there's some other elements here. When you go live with an application, when you wanna move your application into production, Facebook requires you to have a privacy policy and a terms of service on your website, and then you'll need to put the URLs for both of those in here. Luckily that's not required as part of a test app. That's why we're using a test app instead of a real one. But otherwise normally you would have to put these in here in order for it to work. You'll also have the option of uploading an icon or a logo for your website, and we'll see where this goes in just a second. Okay, now the next thing we need to do is add a platform. Let's click add platform and click website. And then we're going to put the URL for our website. So in our case, we're just going to do http://localhost8000 and let's go ahead and click save. Okay, so that should be everything that we need in order to get started. So let's head back over to our project, and we can close all of this because I think we're ready to go. The last thing we wanna do is just create some buttons so people can log in. So we're gonna go over to resources, views and then we're going to go to off, and then we have our log in and our register pages. Now really quick I just wanna mention something really fast. If you go into layouts and app file, I did add a few things between videos. I did add a link to the CDN for font awesome, and I also added a new CSS style sheet which you can see here goes to css/styles.css. This is in our layouts file, so it's available in all of the pages in our application. I added these two lines. And then up here under resources, or under public CSS, I've got a new CSS file. This CSS file just has some basic styling for some social buttons that we're going to use right now. Now if you have any questions in the description here, we will have a link where you can copy all of this CSS down, and you can create this CSS file yourself. Or you can just create the buttons yourself as well. So I'm gonna be using that CSS. I didn't wanna waste time in the video worrying about it and so I just wanna mention that to you. Now if you come over to Safari, to your web browser, this is the URL. If you follow that URL it's gonna take you to this page where you can download the zip, or you can just take a look at the code that I wrote. And here's the CSS file. You can just copy the whole file. You can see it's pretty basic CSS. And this is all that was added, okay? So here we've got the link to font awesome so we can get those logos for our Facebook and Twitter and stuff. And then we link to the CSS style sheet. And then this is the CSS style sheet that I wrote, okay? So you guys can go there and you can get all those pages. If you click view, there's the CSS style sheet. You can go ahead and get it. You can download it, do whatever you need to do. Okay, I just wanted to mention that. So now we're gonna come back over once you get your CSS good to go, we're going to add it to our login page. Now here at the bottom of this panel body here, what I wanna do is I want to create a div called panel footer. And then we are going to go ahead and add a button. So we're gonna create an anchor tag. We're gonna say href, and we're gonna set this equal to the URL of login/facebook. Now it's gonna match the route, that first route that we created, this one, login/facebook, okay? So that's the URL for the button we're creating. Then let's create a class. We're gonna say btn btn social and btn Facebook. And these last two elements are going to be, these are some of the CSS that I created in that sheet I just showed you. Now that we have that done, let's go through. We can add our anchor tag. We'll just create a font awesome, font awesome Facebook, and then last but not least, we are going to say login with Facebook. And that should be it. Now let's go take a look in the browser real quick. If we go over to our project and we click log in now, we should have a log in with Facebook button. Now real quick, let's jump back over. Let's do the same thing for register. I'm just gonna copy this whole footer. We're gonna go to register.blade.php and then come down here to the bottom and paste it in. So now if we have our footer, we have log in with Facebook. Now this is the register page, so I'm just gonna change this verbiage to say sign up with Facebook. But it's the exact same thing. It actually goes to the same place. And even if they already have an account, if they click sign up, it's still gonna log 'em in. So it doesn't really matter. That's just kind of for our user experience. So there we go. So now if we click register, we have a sign up with Facebook button as well. Now we can go ahead and play with it. Let's click sign up with Facebook. Okay so we probably haven't updated our server. So what happened here is we, in Adam here, we made changes to our ENV file but we never rebooted our server. So let's head back over to the terminal. Here's our server. Let's go ahead and close the server and let's reboot the server. That way those ENV, those changes we made to the ENV file will take affect. We were running off the old versions before. Okay, now let's come back over here, refresh and click sign up with Facebook again. All right, now Facebook can sometimes be finicky with localhost, and this can sometimes cause problems. So you can sometimes get this error where it says that you cannot load the URL. Now there's a lot of reasons that this happens. But just make sure that of course your app domain is set to localhost. Make sure that you have this set up and you don't have https. Make sure you're running inside of a test application. And then the other thing that usually fixes this for me is if you come down to Facebook log in, under products, I tend to turn on strict mode for direct URIs, and then put in your redirect URL here. So we'll do http://localhost8000/login/facebook/callback. Okay, so this is the URL that we've talked about before. Let's make sure we have that. Click save and then let's go ahead and try that again. So let's come back over here and now we're basically telling it, Facebook's got, it's obviously very worried about security. And so this is a way to kind of fix that. So let's click sign up with Facebook now. And now it should go through just fine. Now what you're seeing here is this is where we actually log in and register our application. So you can see Socialite test will receive your public profile and email address. This is asking for the permissions that we're granting it. Now notice here we had that friendly name. This is where that friendly name is important. It's going to show that friendly name to the user when they register the application. So make sure that friendly name is something the user will recognize. Also, if you remember where I talk about how you could upload a logo, this is where that logo will show up. So right now this is the default logo. You would want to upload your logo here. If you come back over here, under settings. So this display name, that's what gets displayed to the user. And then this app icon is also gonna get displayed to the user here. So that if you want to customize this, that's kinda how you would do that. All of this is controlled by Facebook outside of those settings. Then we're gonna come here and you're gonna say continue as your name. And that should now redirect us back to our own application and it says dashboard you are logged in. And you can see now it pulled my name from Facebook, and I now have an account on this, our own, our very own website. So let's just take a look really quick in SQL Pro. I'm gonna refresh here, and you can see we now have a token provider ID for me, and this Facebook is the provider. And so this is now a social account that was created. And if we go under users now, we have a new user, J Alexander Curtis. There's my email. Notice I don't have a password because I'm only logged in through Facebook. But I do have a remember me token, and we've created an account. So I now have an actual account was created for us. This user ID is three. The user account is three. So these are linked together and there is now an active account. And so now I have a way to log in. So now it should remember me if I decide to log out. I can log back in, log in with Facebook and it should log me back in as the same user. It says you have previously logged in to Socialite test with Facebook and so it shows my picture and then the Socialite logo which right now is the default one. If I click okay to continue, it'll bring me back and I've logged back into my application again. Okay, so now everything is working good. We have Facebook up and running. All right, so now that we have Facebook working and we kinda went through some of the trickier parts of working with different social sign on's, I wanna show you guys how you can work with another provider. We'll be setting up Twitter in the next video.