Login With Facebook PHP CodeIgniter : OAuth Login

OAuth is simply an open authentication that is used for providing access to the server data after authorizing a user via third party services.

In this tutorial, we are going to explain how you can implement Facebook login via open authentication to connect with your website using CodeIgniter.

You can achieve this login mechanism using Facebook  PHP SDK.

To start with, first Download the Facebook PHP SDK and save it in your CodeIgniter’s libraries folder.

Before running script, generate your Facebook app id and Facebook app secret key, for this follow up the below given steps:

You can also refer our live demo or download the Script file. Extract the downloaded files and run it on your Local server.

Steps for Getting Facebook App ID and Facebook App secret key :

If you are looking for Codeigniter login script with facebook and google built in ready script, then you can try this.

In Facebook open authentication, App Id and the  App secret key are required for authenticating a valid Facebook account.

For getting this you have to do the following steps :

Step 1 : Go to https://developers.facebook.com and sign in by an existing Facebook username or password.

Step 2 : After login click on to Apps tab.

Step 3 : When you will click on to Apps button one drop down list will appear that will contain your previous added Apps. Now click on Add a New App.

Step 4 : After clicking on it one popup window will appear here you have to select a platform for which type of app you are creating, platform may be ios, android, any Facebook app or for any website, here we are creating apps for website.

Step 5 : Here you have to write your application name based upon your choice and click on Create New Facebook App Id.

Step 6 : In this window, choose a category and then click on Create App ID button. Here, you will have two steps, in first steps you can create a test version of another app and in second step you have to choose a category for which type of apps you are creating.

Step 7 : For going to dashboard, click on Skip Quick start.

Step 8 : In Dashboard you will see your App ID and App Secret.Where App ID is visible and App Secret key is hidden, to see this click on show button, now that App ID and App Secret Key you have to add into your application code as shown below:

// Load facebook library and pass associative array which contains appId and secret key
$this->load->library('facebook', array('appId' => '<Your Facebook appId>', 'secret' => '<Generated Secret Key>'));

This App ID and App Secret  is only accessible by your own Facebook account, by default it is available for private, but for making public, click on settings link and follow step 9 & 10.

Step 9 : In setting ,write your app domain name,  your email id and then click on + Add Platform > Website to add Site URL. This will be used by the FB server on authentication to hand back control to your application.

Step 10 : Now go to Status & Review, set YES  for your app features available to public.

As now since you have generated your app Id and app secret key, now you are ready to integrate and connect to your Facebook login account.

CodeIgniter Facebook OAuth login Flow:

• On accessing a website page the Facebook login button is shown. The user will click the FB button to login into the codeIgniter application.
• After clicking on that button a Facebook URL will be invoked that will contain App Id and App Secret Key.
• Now Facebook will validate the application ID and then will redirect to its login page.
• User will enter the FB login credentials and submit the form.
• In Facebook when validation will be success it will respond back with access_token that will contain the user’s detail.
• Redirect URL page will forward to a page showing user data in the client browser.

We have created a CodeIgniter login example in that we have explain how you can connect your Facebook account via OAuth. You can create similar files as mentioned below and can copy the code. If you like you can even download the files.

Below is our complete code with short explanation :

Controllers : oauth_login.php

Copy the below code in your controller. When you load Facebook library in your controller’s constructor  writes your Facebook App Id and Facebook Secret Key.

<?php

class Oauth_Login extends CI_Controller {

public $user = "";

public function __construct() {
parent::__construct();

// Load facebook library and pass associative array which contains appId and secret key
$this->load->library('facebook', array('appId' => '<Your Facebook appId>', 'secret' => '<Generated Secret Key>'));

// Get user's login information
$this->user = $this->facebook->getUser();
}

// Store user information and send to profile page
public function index() {
if ($this->user) {
$data['user_profile'] = $this->facebook->api('/me/');

// Get logout url of facebook
$data['logout_url'] = $this->facebook->getLogoutUrl(array('next' => base_url() . 'index.php/oauth_login/logout'));

// Send data to profile page
$this->load->view('profile', $data);
} else {

// Store users facebook login url
$data['login_url'] = $this->facebook->getLoginUrl();
$this->load->view('login', $data);
}
}

// Logout from facebook
public function logout() {

// Destroy session
session_destroy();

// Redirect to baseurl
redirect(base_url());
}

}
?>

Views : login.php

Copy the below code in your view and save as login.php. This will be the first page to be shown which will contain Sign in with facebook option.

<html>
<head>
<title>CodeIgniter : Login Facebook via Oauth 2.0</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="main">
<div id="login">
<h2>CodeIgniter : Login Facebook via Oauth 2.0</h2>
<?php echo "<a href='$login_url'><img class='fb' src=".base_url()."images/fb.png"."></a>"; ?>
</div>
</div>
</body>
</html>

Views : profile.php

Copy the below code in your view and save as profile.php. As anyone will login with the facebook he/she will see this page that will contain logged in user details.

<html>
<head>
<title>CodeIgniter : Login Facebook via Oauth 2.0</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="main">
<div id="login">
<h2> <?php echo "<a href=".$user_profile['link']." target='_blank' ><img class='fb_profile' src="."https://graph.facebook.com/".$user_profile['id']."/picture".">"."</a>"."<p class='profile_name'>Welcome ! <em>".$user_profile['name']."</em></p>";
echo "<a class='logout' href='$logout_url'>Logout</a>";
?></h2>
<hr/>
<h3><u>Profile</u></h3>
<?php
echo "<p>First Name : ".$user_profile['first_name']."</p>";
echo "<p>Last Name : ".$user_profile['last_name']."</p>";
echo "<p>Gender : ".$user_profile['gender']."</p>";
echo "<p>Facebook URL : "."<a href=".$user_profile['link']." target='_blank'"."> https://www.facebook.com/".$user_profile['id']."</a></p>";
?>
</div>
</div>
</body>
</html>

CSS : style.css

Styling HTML Elements.

#main{
width:960px;
margin:50px auto;
font-family:raleway;
}
h2{
position: relative;
background-color: #26c489;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 30px;
color:white;
}
hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 30px;
}
#login{
width:462px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 34px;
margin-top: 0;
margin-left: -70px;;
background-color: #DBF6ED;
}
img.fb{
height: 50px;
padding-left: 90px;
}
img.fb_profile{
height: 50px;
padding-right: 20px;
margin-left: -410px;
}
p.profile_name{
font-size: 16px;
margin-top: -19px;
margin-left: -148px;
}
a.logout{
position: absolute;
font-size: 18px;
text-decoration: none;
top: 46px;
right: 45px;
}

Conclusion:

This was all about how we can implement Facebook open authentication with our website using CodeIgniter. Hope you like it, keep reading our other blogs