Evilnapsis

Programming, Hacking and More

Web Development

Login de Facebook con PHP

El login de Facebook sirve para acelerar el proceso para usar alguna aplicacion web, al usar el login de facebook es mas facil el registro de usuarios ya que los datos del usuario se toman automaticamente de su cuenta de facebbok.

Lo primero que debemos hacer es ir a la pagina de desarrolladores de facebook, crear o activar nuestra cuenta de desarrolladores https://developers.facebook.com/

En la cuenta de desarrolladores de facebook podremos crear aplicaciones de facebook que usaremos para el Inicio de Sesion de Facebook o Facebook login, ademas de crear las aplicaciones las podremos configurar y darle permisos.

Una vez dentro de la pagina desarrolladores de facebook debemos crear una Aplicacion, ponerle un nombre y asignarle permisos para el Inicio de Sesion, debemos completar todos los datos obligatorios.

Para que nuestra aplicacion funcione es necesario alojar la aplicacion en un servidor web y proporcionarle la URL en las configuraciones de Facebook.

Al finalizar de configurar nuestra aplicacion nos van a proporcionar el Facebook App Id y El Facebook App Secret seran las credenciales que usaremos para conectar nuestra aplicacion PHP con Facebook.

Instalar el Facebook Graph SDK

Ya para empezar a programar debemos descargar el SDK de Facebook, este nos servira para el Inicio de Sesion de Facebook y muchas cosas mas que veremos luego.

Para descargar el Facebook Graph SDK de manera facil vamos a usar composer.

composer require facebook/graph-sdk

Una vez descargado composer lo copiamos a la carpeta del proyecto donde vamos a trabajar y empezamos la codificacion.

Codigo de Login

El codigo de login lo dejo aqui completo con algunos comentarios.

<?php
// INICIALIZAR EL FACEBOOK SDK
// By Evilnapsis
require 'vendor/autoload.php';
session_start();
$fb = new Facebook\Facebook([
 'app_id' => '337488278539175', /// Id de la Aplicacion
 'app_secret' => '2e1f20349b5af945b9e431d5dcf4bfa8', // Codigo Secret
 'default_graph_version' => 'v2.5',
]);
$helper = $fb->getRedirectLoginHelper();
$permissions = ['email']; // Permisos
try {
if (isset($_SESSION['facebook_access_token'])) {
$accessToken = $_SESSION['facebook_access_token'];
} else {
  $accessToken = $helper->getAccessToken();
}
} catch(Facebook\Exceptions\facebookResponseException $e) {
// When Graph returns an error
echo 'Graph returned an error: ' . $e->getMessage();
  exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
// When validation fails or other local issues
echo 'Facebook SDK returned an error: ' . $e->getMessage();
  exit;
}
if (isset($accessToken)) {
if (isset($_SESSION['facebook_access_token'])) {
$fb->setDefaultAccessToken($_SESSION['facebook_access_token']);
} else {
// getting short-lived access token
$_SESSION['facebook_access_token'] = (string) $accessToken;
  // OAuth 2.0 client handler
$oAuth2Client = $fb->getOAuth2Client();
// Exchanges a short-lived access token for a long-lived one
$longLivedAccessToken = $oAuth2Client->getLongLivedAccessToken($_SESSION['facebook_access_token']);
$_SESSION['facebook_access_token'] = (string) $longLivedAccessToken;
// setting default access token to be used in script
$fb->setDefaultAccessToken($_SESSION['facebook_access_token']);
}
// Redirigir el usuario a la pagina de perfil
if (isset($_GET['code'])) {
header('Location: profile.php');
}
// Obtener informacion del usuario
try {
$profile_request = $fb->get('/me?fields=name,first_name,last_name,email');
$requestPicture = $fb->get('/me/picture?redirect=false&height=200'); // Obtener imagen del Usuario
$picture = $requestPicture->getGraphUser();
$profile = $profile_request->getGraphUser();
$fbid = $profile->getProperty('id');           // To Get Facebook ID
$fbfullname = $profile->getProperty('name');   // To Get Facebook full name
$fbemail = $profile->getProperty('email');    //  To Get Facebook email
$fbpic = "<img src='".$picture['url']."' class='img-rounded'/>";
# Guardar la informacion del usuario en variables de sesion
$_SESSION['fb_id'] = $fbid.'</br>';
$_SESSION['fb_name'] = $fbfullname.'</br>';
$_SESSION['fb_email'] = $fbemail.'</br>';
$_SESSION['fb_pic'] = $fbpic.'</br>';
} catch(Facebook\Exceptions\FacebookResponseException $e) {
// When Graph returns an error
echo 'Graph returned an error: ' . $e->getMessage();
session_destroy();
// Redirigir al usuario a la pagina de login
header("Location: ./");
exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
// When validation fails or other local issues
echo 'Facebook SDK returned an error: ' . $e->getMessage();
exit;
}
} else {
// Reemplazar la URL por la url de tu pagina web            
$loginUrl = $helper->getLoginUrl('https://evilnapsis.com/demo/facebooklogin1/index.php', $permissions);
echo '<a href="' . $loginUrl . '">Iniciar sesion con Facebook!</a>';
}
?>

Este codigo lo vamos a subir al servidor como index.php para este ejemplo subi el ejemplo en la url https://evilnapsis.com/demo/facebooklogin1/index.php por lo tanto esa URL le tengo que especificar en las configuraciones de developers.facebook para mi aplicacion, de otra manera nos va a dar error.

El siguiente archivo profile.php nos va a redirigir index.php cuando el login se realice exitosamente.

<?php
session_start();
?>
<head>
     <title>Login con Facebook</title>

  </head>
  <body>     
  <?php if($_SESSION['fb_id']) {?>
        <div class = "container">
              <h1>Hola <?php echo $_SESSION['fb_name']; ?></h1>
              <ul class = "nav nav-list">
                 <h4>Image</h4>
                 <li><?php echo $_SESSION['fb_pic']?></li>
                 <h4>Facebook ID</h4>
                 <li><?php echo  $_SESSION['fb_id']; ?></li>
                 <h4>Nombre</h4>
                 <li><?php echo $_SESSION['fb_name']; ?></li>
                 <h4>Email</h4>
                 <li><?php echo $_SESSION['fb_email']; ?></li>
              </ul>
          </div>
<?php } ?>
  </body>
</html>

Este archivo o pagina nos mostrara nuestros datos de usuario identificado, estos datos se guardaron en variables de sesion desde el archivo index.php

Ahora solo nos queda probar.

Cuando demos click en el boton Iniciar Sesion con Facebook.

Nos solicitara permisos y cuando le demos permisos se procesara el login en index.php y luego nos dirigira y nos mostrara la pagina de perfil profile.php.

Y listo ya tenemos nuestra aplicacion de Inicio de Sesion de Facebook o Login de Facebook trabajando.

Descargar

En el siguiente enlace les dejo todo el proyecto con el codigo de fuente para que lo usen y lo personalicen.

Link: https://www.dropbox.com/s/8go7x8x8qh3dfbv/facebooklogin1.zip?dl=0

Les invito a seguir nuestro blog, enviarnos sus comentarios desde el formulario de contacto y reportar los links caidos. De antemano gracias.

Agustin Ramos

Desarrollador de Software