How to build Facebook login using CakePHP Facebook Login Plugin15 Feb 2012 Add Comments Intermediate Level
Facebook connect enables users to login to your application instantly with a Facebook Account. It saves user from checking email to verify his account, which will greatly enhance your application's user experience.
In this tutorial, we will show you how to implement Facebook login for you CakePHP application using a great plugin "CakePHP Facebook".
Table Of Content
- Download CakePHP Facebook Plugin from Github.
- Unpack downloaded folder, and copy it to directory "app/plugins/facebook"
- We are using CakePHP 1.3.2 in this tutorial.
- CakePHP Facebook Plugin is integrated with CakePHP Auth component, so we will assume you are using Auth component for your application.
- For simplicity, in this tutorial, we will only have one user controller, and after user logins, it will show a demo home page, and inside the home page, there is a logout button.
Copy and rename file "app/plugins/facebook/config/facebook.php.example" to "app/config/facebook.php". And then you will need to create a Facebook App, and supply its appId,apiKey, secret here. Please note this is required for Facebook login to work.
You may already have a database set up if you are trying to implement Facebook login in your existing project.
In this demo, we will have a simple users table as below. Take note if you are doing this in a existing database, you will need to add one more field "facebook_id" to the users table.
If you are strictly following this tutorial, please import sql below to your database to create a users table
Create users_controller.php under /app/controllers folder.
- Include "Connect" component from Facebook Plugin and "Auth" from core files.
- Include "Facebook" helper from Facebook Plugin.
- We want user to be redirected to index page after successfully login.
- We will have to use a special layout file for our views, which will be created next step.
- This will be the home page after users has login.
- Dummy login function for Auth component.
- Inside logout function, we explicitly call Session->destroy() to delete the whole session variable, this is due to a bug, which Facebook will always try to fetch its content via a session variable, so we will have to explicitly delete the whole session.
Create a layout file "app/views/layouts/facebook.ctp" and copy the content below to the file.
View pages are the most important part of setting up Facebook login, please pay attention in this section.
Create two view files "app/views/users/login.ctp" and "app/views/users/index.ctp"
Here is the magic happens, Facebook->login() will create a Facebook login button for us, and when user clicks on it, it will prompt user to login using Facebook account, and when that is done. Facebook Connect component will automatically create a user account for this user and let him login using Auth component.
This page is simple, but it is also the most important. Here we use Facebook helper to render a logout button.
Pay attention to the "redirect" parameter of the method.
Keep in mind, Facebook logout button will only log user out of Facebook, it is your responsibility to log them out of your application, thus you have to redirect user to logout method.
Now you should have a simple authentication application powered by Facebook. You should be able to login and logout of the application using you Facebook account. It does not do much, but it should have shown you how to use Facebook Connect for your application. Below are some screenshots of the tutorial:Login page
Hopefully this simple tutorial helped you with your development.
If you like our post, please follow us on Twitter and help spread the word. We need your support to continue.
If you have questions or find our mistakes in above tutorial, do leave a comment below to let us know.