Los largos formularios de registro que son una gran molestia de rellenar y un verdadero dolor para validar ya son cosa del pasado. Hoy en día, los desarrolladores han resuelto este espinoso problema de UX utilizando el inicio de sesión de Facebook para sus aplicaciones.
Facebook ofrece una excelente alternativa al tradicional proceso de inicio de sesión basado en formularios que durante mucho tiempo ha formado parte de las aplicaciones PHP. La idea es muy sencilla; sólo tienes que poner un botón de Facebook en la página de registro. A continuación, guarda los datos del usuario después de iniciar sesión con éxito. En este artículo, te explicaré cómo puedes añadir el inicio de sesión de Facebook a las aplicaciones PHP y obtener los datos de los usuarios.
¿Cómo iniciar sesión con Facebook mediante/usando php? Sólo hay que seguir cuatro pasos para iniciar sesión con el SDK PHP de Facebook:
- Crea una aplicación de Facebook.
- Crea una aplicación en el servidor.
- Descarga el SDK de Facebook.
- ¿Cómo puedo inicializar el SDK de PHP en Facebook y obtener información del usuario?
Crear una aplicación en Facebook
Para implementar el sistema de inicio de sesión en Facebook para la aplicación, el primer paso es la creación de una aplicación a través de la cuenta de Facebook.
Inicia sesión en Facebook y ve a developer.Facebook.com.
Una vez allí, crea una aplicación.
Haz clic en el botón Añadir Nueva App y selecciona Sitio Web como plataforma.
Deja de perder el tiempo con los servidores
Cloudways se encarga de la gestión del servidor por ti para que puedas centrarte en crear grandes aplicaciones y mantener contentos a tus clientes.
Introduce el nombre de la aplicación, un identificador de correo electrónico y selecciona una categoría para la aplicación. Ahora haz clic en el botón Crear Id de aplicación . Esto creará una aplicación en Facebook.
Ahora ve a Configuración, donde se encuentran el App Secret y el App ID. Estos identificadores se utilizarán en la aplicación PHP. Recuerda añadir la URL del sitio web en Dominios de la App.
Abajo en la página, haz clic en la pestaña Añadir plataforma. Añade el sitio web como plataforma e introduce la URL del
sitio web de nuevo.
Esto finaliza la creación de la aplicación de Facebook. El siguiente paso es crear un servidor en un servidor rápido y mejor alojamiento para php rápido. Yo he optado por el servidor PHP stack de Cloudways.
Crear una aplicación en el servidor
Para crear un servidor PHP en Cloudways, regístrate y lanza un servidor PHP en él. Como referencia, puedes seguir nuestra guía sobre cómo alojar PHP en Cloudways.
Visita el servidor e inicia el terminal SSH. Inicia sesión en SSH utilizando las credenciales maestras.
Ve a la carpeta de la aplicación ejecutando el siguiente comando
$ cd applications/{your application folder}/private_html/
Descargar el SDK de Facebook
Composer es el método recomendado para instalar librerías en la plataforma y yo lo utilizaré para instalar el SDK de Facebook.El primer paso es la creación de un archivo composer. En el terminal SSH ejecuta el comando composer init y añádele la información necesaria. Se creará un archivo composer.json en la carpeta de la aplicación. Añade el siguiente código en composer.json.
{
"require" : {
"facebook/graph-sdk" : "~5.0"
}
}
Ahora ejecuta el comando composer install en SSH para finalizar la instalación del SDK de Facebook.
¿Cómo puedo inicializar el SDK de PHP en Facebook y obtener información del usuario?
Ahora es el momento de inicializar el SDK de Facebook y obtener el access_token de Facebook. Tras autenticar el token, se obtendrá la información del usuario y la vista será redirigida a la página de perfil que muestra la información del usuario.
Crea dos archivos en la carpeta de la aplicación: Index.php y Profile.php.
Añade el siguiente código al archivo index.php. Se añaden comentarios para explicar el código.
<?php
//initialize facebook sdk
require 'vendor/autoload.php';
session_start();
$fb = new Facebook\Facebook([
'app_id' => '1214799411888113',
'app_secret' => '286f08b36691768f859a70e788f4ceda',
'default_graph_version' => 'v2.5',
]);
$helper = $fb->getRedirectLoginHelper();
$permissions = ['email']; // optional
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']);
}
// redirect the user to the profile page if it has "code" GET variable
if (isset($_GET['code'])) {
header('Location: profile.php');
}
// getting basic info about user
try {
$profile_request = $fb->get('/me?fields=name,first_name,last_name,email');
$requestPicture = $fb->get('/me/picture?redirect=false&height=200'); //getting user picture
$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'/>";
# save the user nformation in session variable
$_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();
// redirecting user back to app login page
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 {
// replace your website URL same as added in the developers.Facebook.com/apps e.g. if you used http instead of https and you used
$loginUrl = $helper->getLoginUrl('https://phpstack-21306-56790-161818.cloudwaysapps.com', $permissions);
echo '<a href="' . $loginUrl . '">Log in with Facebook!</a>';
}
?>
Una vez hecho esto, ve a la URL de la aplicación en el navegador. Verás el botón de Facebook para iniciar sesión. Haz clic en él y la página te redirigirá a la página de inicio de sesión de Facebook. Inicia sesión en la cuenta de Facebook. Después de iniciar sesión correctamente, la página se redirigirá a la página de perfil.
Añade el siguiente código a profile.php para mostrar la información recuperada. A efectos de este tutorial, recuperaré el ID de usuario, la foto de perfil de Facebook, el nombre y el correo electrónico.
<?php
session_start();
?>
<head>
<title>Login with Facebook</title>
<link
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel = "stylesheet">
</head>
<body>
<?php if($_SESSION['fb_id']) {?>
<div class = "container">
<div class = "jumbotron">
<h1>Hello <?php echo $_SESSION['fb_name']; ?></h1>
<p>Welcome to Cloudways</p>
</div>
<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>Facebook fullname</h4>
<li><?php echo $_SESSION['fb_name']; ?></li>
<h4>Facebook Email</h4>
<li><?php echo $_SESSION['fb_email']; ?></li>
</ul>
</div>
<?php } ?>
</body>
</html>
Como puedes ver, la información se presenta en un formato muy sencillo.
Alojamiento PHP Gestionado Supercharged – Mejora la velocidad de tu aplicación PHP en un 300%.
Conclusión
En este tutorial, he demostrado cómo integrar el botón de inicio de sesión de Facebook en tus aplicaciones PHP. Esto eliminará las molestias de rellenar y analizar largos formularios de registro. Si necesitas hacer alguna pregunta sobre el código o deseas contribuir a la conversación, deja un comentario a continuación.
P: ¿Por qué utilizar el inicio de sesión de Facebook en sitios web PHP?
R: Utilizar el inicio de sesión de Facebook en tu sitio web PHP ayuda a tus visitantes a iniciar sesión directamente desde sus cuentas de Facebook. Les permite compartir artículos, añadir comentarios, etc. directamente desde sus perfiles de Facebook.
P: ¿Qué biblioteca utilizar para el inicio de sesión de Facebook en PHP?
R: Puedes utilizar el SDK de Facebook, que es una potente biblioteca PHP con funciones avanzadas para integrar el inicio de sesión de Facebook en sitios web PHP.
Start Growing with Cloudways Today.
Our Clients Love us because we never compromise on these
Shahzeb Ahmed
Un creativo de día (con una taza de té) y un creativo de noche. Ahmad Kamran es redactor de contenidos estacionales y Ejecutivo de Marketing Senior en Cloudways. Puedes encontrarle en su escritorio escribiendo, elaborando estrategias o jugando. Y en caso de que no puedas encontrarle aquí, estará en la montaña o junto a la orilla del río.
