These days a lot of websites use social media login. It is easy for users to simply click, click, click and sign up instead of filling up long forms, set a password and so on..

Implementing social sign-in is pretty easy if you have right API documentation. In fact finding the right version of API is more difficult than implementing especially in case of Facebook. Facebook developer’s site will make you go around in circles if you search how to implement social sign-in or any of their services. So I will share with you the procedure for it. You should be able to understand it being a developer ;)

We’ll start with integrating with Facebook.

Integrating Facebook Login

  1. First thing first, you need to have a facebook id.
  2. Then enroll for Faceboook Developers using your facebook id. Go to https://developers.facebook.com/
  3. After you finish enrolling for the developers, jump to https://developers.facebook.com/apps
  4. Click on Create New App button and fill all the required details. Hover over [?] if you need an explanation. Click Continue
  5. You’ll be redirected to the App information page.
  6. Disable Sandbox Mode
  7. Just select ‘Website with Facebook Login’ and enter the Site URL.

    Site URL is the URL of php file which is used to connect to facebook.
    Eg: http://yousite.com/social/fbconnect.php

    Here is the fbconnect.php script file which will connect with facebook for sign in process.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    
    <?php 
    /**
      * Source code for fbconnect.php
      */
     
       $app_id = "PUT_YOUR_APP_ID_HERE";            // Found at the Top of your App information page
       $app_secret = "PUT_YOUR_APP_SECRET_HERE";    // Found at the Top of your App information page
       $my_url = "PUT_THE_SITE_URL_HERE";           // Same Site URL as in point 7, also same as the path of this file where it resides in the server.
     
       session_start();
     
        $code = $_REQUEST["code"];
     
       if(empty($code)) {
         $_SESSION['state'] = md5(uniqid(rand(), TRUE)); // CSRF protection
         $dialog_url = "https://www.facebook.com/dialog/oauth?client_id=" 
           . $app_id . "&redirect_uri=" . urlencode($my_url) . "&state="
           . $_SESSION['state'] . "&scope=email";
     
         echo("<script> top.location.href='" . $dialog_url . "'</script>");
       }
     
        if($_SESSION['state'] && ($_SESSION['state'] === $_REQUEST['state'])) {
         $token_url = "https://graph.facebook.com/oauth/access_token?"
           . "client_id=" . $app_id . "&redirect_uri=" . urlencode($my_url)
           . "&client_secret=" . $app_secret . "&code=" . $code;
     
         $response = file_get_contents($token_url);
         $params = null;
         parse_str($response, $params);
     
         $_SESSION['access_token'] = $params['access_token'];
     
         $graph_url = "https://graph.facebook.com/me?access_token=" 
           . $params['access_token'];
     
         $user = json_decode(file_get_contents($graph_url));
         echo '<pre>';print_r($user);echo '</pre>';
       }
       else {
         echo("The state does not match. You may be a victim of CSRF.");
       }
     
     ?>
    <?php 
    /**
      * Source code for fbconnect.php
      */
    
       $app_id = "PUT_YOUR_APP_ID_HERE"; 			// Found at the Top of your App information page
       $app_secret = "PUT_YOUR_APP_SECRET_HERE"; 	// Found at the Top of your App information page
       $my_url = "PUT_THE_SITE_URL_HERE";			// Same Site URL as in point 7, also same as the path of this file where it resides in the server.
    
       session_start();
    
    	$code = $_REQUEST["code"];
    
       if(empty($code)) {
         $_SESSION['state'] = md5(uniqid(rand(), TRUE)); // CSRF protection
         $dialog_url = "https://www.facebook.com/dialog/oauth?client_id=" 
           . $app_id . "&redirect_uri=" . urlencode($my_url) . "&state="
           . $_SESSION['state'] . "&scope=email";
    
         echo("<script> top.location.href='" . $dialog_url . "'</script>");
       }
    
        if($_SESSION['state'] && ($_SESSION['state'] === $_REQUEST['state'])) {
         $token_url = "https://graph.facebook.com/oauth/access_token?"
           . "client_id=" . $app_id . "&redirect_uri=" . urlencode($my_url)
           . "&client_secret=" . $app_secret . "&code=" . $code;
    
         $response = file_get_contents($token_url);
         $params = null;
         parse_str($response, $params);
    
         $_SESSION['access_token'] = $params['access_token'];
    
         $graph_url = "https://graph.facebook.com/me?access_token=" 
           . $params['access_token'];
    
         $user = json_decode(file_get_contents($graph_url));
         echo '<pre>';print_r($user);echo '</pre>';
       }
       else {
         echo("The state does not match. You may be a victim of CSRF.");
       }
    
     ?>
  8. That’s all. Save the settings and upload the file in your server. (Remember Site URL = Path of fbconnect.php in the server)
  9. Run the Site URL http://yousite.com/social/fbconnect.php and you’ll see it will be redirected to facebook sign in process.

You will find that it returns only the basic details of the user trying to login or signup. The scope &scope=email gives only the email id access. More scope can be found at https://developers.facebook.com/docs/reference/login/#permissions

The data in $user can be saved in your database according to your requirements. So there you go, signing in with facebook is pretty simple.

We’ll talk about Integrating Social Login with Google Account in Part 2 and later on with Twitter.

Follow on Google+ LinkedIn Updated on February 22, 2013 at
Comments
  • Posted by Victor Valencia | 11 Apr 2014 | Reply

    Thanks implementing in my website :)

  • Posted by Victor Valencia | 11 Apr 2014 | Reply

    Can you make a Google+ social Login integration please.

Post your comment

All the fields must be filled out before posting.