Search code examples
phpherokufacebook-php-sdkfacebook-logincloud9-ide

Facebook connect (facebook-php-sdk) login button crashing on call-back.php

I have a PHP website that has a facebook-connect(facebook-php-sdk) which has a Facebook login-button on my index page. The login-button was showing and functional in my cloud9 development stage(desktop/mobile). I then pushed the app to Heroku and the login-button appeared but crash once they hit my login-callback.php.

After a bit of research I found that I needed to push my: FACEBOOK_APP_ID=xxxxxxxxxxxxxxx \ FACEBOOK_SECRET=xxxxxxxxxxxxxxx

Once I added those config-vars my login-button disappeared on mobile browsers and the desktop browsers still were crashing at login-callback.php page. I have been doing some digging for a few days and can't seem to find any info on this.

My website is https://nolarec.org or https://nolarec.herokuapp.com/

login-callback.php

<?php
session_start();
require_once __DIR__ . '/src/Facebook/autoload.php';

$fb = new Facebook\Facebook([
  'app_id' => 'xxxxxxxxxxxxxxx',
  'app_secret' => 'xxxxxxxxxxxxxxx',
  'default_graph_version' => 'v2.5'
]);

$helper = $fb->getJavaScriptHelper();

try {
  $accessToken = $helper->getAccessToken();
  } catch(Facebook\Exceptions\FacebookResponseException $e) {
    // When Graph returns an error
    echo 'Graph returned an error: ' . $e->getMessage();
} catch(Facebook\Exceptions\FacebookSDKException $e) {
    // When validation fails or other local issues
    echo 'Facebook SDK returned an error: ' . $e->getMessage();
}

if (isset($accessToken)) {
   $fb->setDefaultAccessToken($accessToken);

  try {

    $requestProfile = $fb->get("/me?fields=name,email");
    $profile = $requestProfile->getGraphNode()->asArray();
  } catch(Facebook\Exceptions\FacebookResponseException $e) {
    // When Graph returns an error
    echo 'Graph returned an error: ' . $e->getMessage();
  } catch(Facebook\Exceptions\FacebookSDKException $e) {
    // When validation fails or other local issues
    echo 'Facebook SDK returned an error: ' . $e->getMessage();
  }

  $_SESSION['name'] = $profile['name'];

  setcookie('name', $profile['name'], time() + (3600 *2), "/");
  header('location: ../');
  exit;
} else {
    echo "Unauthorized access!!!";
    exit;
}

fb.js

function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    // The response object is returned with a status field that lets the
    // app know the current login status of the person.
    // Full docs on the response object can be found in the documentation
    // for FB.getLoginStatus().
    if (response.status === 'connected') {
        // Logged into your app and Facebook.
        window.location.replace('./fbapp/login-callback.php');
    } else if (response.status === 'not_authorized') {
        // The person is logged into Facebook, but not your app.
    } else {
        // The person is not logged into Facebook, so we're not sure if
        // they are logged into this app or not.
    }
}

function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
}

window.fbAsyncInit = function() {
    FB.init({
    appId      : 'xxxxxxxxxxxxxx',
    cookie     : true,  // enable cookies to allow the server to access 
                        // the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.5' // use any version
});

};

// Load the SDK asynchronously
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Relevant piece of index.php

<?php 
      session_start();

      require_once('c9_config.php');

 ?>
 <!DOCTYPE html>
         <html>
              <head>
                <meta charset="utf-8">
                <title> Nola Rec Connect | New Orleans Recreational HUB</title>
                <link rel="stylesheet" type="text/css" href="css/normalize.css">
                <link href='https://fonts.googleapis.com/css?family=Alegreya+SC:700' rel='stylesheet' type='text/css'>
                <link href='https://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
                <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
                <link rel="stylesheet" type="text/css" href="css/main.css">
                <link rel="stylesheet" type="text/css" href="css/Responsive.css">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <script type="text/javascript" src="./fbapp/fb.js"></script>
              </head>
              <body>

                <header>
                    <a href="index.php" id="logo">
                    <h1>Nola Rec Connect </h1>
                    </a>
                    <nav>
                    <ul>
                    <a href="nav/calendar/calendar.php" >Calendar</a>
                    <a href="nav/about/about.php">About</a>
                    <a href="nav/contact/contact.php">Contact</a>
                    <a href="nav/map/map.php">Maps</a>
                    </ul>
                    </nav>
                </header>

                <h1><?php if (isset($_COOKIE['name'])) {echo $_COOKIE['name']; } ?></h1>
                <?php if (isset($_COOKIE['name'])) { } else { ?><div class="fb-login-button" data-scope="public_profile,email" onlogin="checkLoginState();"></div><?php } ?>

Any help would be highly appreciated.

Solution

  • Looks as if I needed do get the OAuth.io add-on within Heroku. Once I set OAuth.io up I put in my Facebook public & secret key and added my domain in the general tab.Then tested the connection in the "Integrated API's" tab. Not 100% sure if this fixed it but it works now.