Login Social con la SDK de Facebook con PHP-CodeIgniter 3

- Andrés Cruz

Login Social con la SDK de Facebook con PHP-CodeIgniter 3

Integrar el Login social con Facebook hoy en día en una aplicación web es una de las cosas más común hoy en día; el login social por ejemplo con Facebook ayuda a que la autenticación o login en nuestra web sea mucho más fácil (en caso de que necesitemos más datos del usuario simplemente se los solicitamos más adelante y podemos aplicar la lógica que queramos, bloquear el acceso hasta que los de, dejarlo como opcional, darle unos días, bloquear funciones en la app, etc) y directo por parte del usuario; en este tutorial vamos a hablar sobre el login social con Facebook y su SDK.

En una entrada anterior vimos como hacer un Login Social en Twitter con PHP-CodeIgniter y la Twitteroauth en el cual tratamos algunos puntos como porque tomarnos un tiempo para crear nuestra propia librería de autenticación social en PHP, temas como la portabilidad para distintos framework, el mantenimiento y actualización de los mismos, también indicamos cuales son los pasos a realizar para autenticarnos vía Twitter con PHP, obtener sus credenciales y establecernos en la sesión.

Ahora vamos a ver los mismos pasos vistos anteriormente pero empleando la API de Facebook, para eso primero debemos ir a la página oficial de Facebook: Primeros pasos con el SDK de Facebook para PHP, desde esta pagina, Facebook nos ofrece la documentacion oficial sobre como emplear su libreria para PHP, de donde descargarla y lograr el login con Facebook; procedemos a descarguemos la libreria PHP de Facebook.

Una vez descargada la SDK de desarrollo de Facebook la descomprimimos y la copiamos dentro de la carpeta library de nuestro proyecto CodeIgniter; el resto de los pasos los detallamos en una entrada anterior llamada:

Cómo instalar la SDK de Facebook para PHP en CodeIgniter

No olvides de crear la aplicación de Facebook, si no sabes como hacerlo puedes ir a la última sección de esta entrada o ve una entrada referida en: ¿Cómo crear una aplicación en la Graph API de Facebook?.

Ahora nos vamos a nuestro controlador que creamos en la entrada anterior que llamamos Social y al inicio de nuestra clase colocamos las variables globales establecidas con las credenciales generadas en la Graph API de Facebook de la clase:

Claves para emplear la Graph API de Facebook

    // facebook
    public $FB_APP_ID = 'XXX';
    public $FB_APP_SECRET = 'XXX';
    public $FB_LOGIN_URL = 'social/facebook';

Configuración de la Graph API de Facebook

En donde debes colocar las credenciales generadas en la Graph API de Facebook; luego de esto creamos una acción que nos permitirá generar las URL que nos permitirán la autenticación a través de la función getLoginUrl():

private function url_social() {

	//***** Facebook Client Configuration
	$facebook = new Facebook\Facebook(array(
		'app_id' => $this->FB_APP_ID,
		'app_secret' => $this->FB_APP_SECRET,
		'default_graph_version' => 'v2.5'));

	$helper = $facebook->getRedirectLoginHelper();
	// $permissions = ['email', 'user_likes']; // optional
	$data['authUrlFacebook'] = $helper->getLoginUrl(base_url() . $this->FB_LOGIN_URL . ''/* , $permissions */);

}

Código completo Graph API de Facebook

Ahora creamos una acción; mientras que para el callback o la acción que recibe la respuesta empleamos:

function facebook() {
	// Facebook Client Configuration
	//https://developers.facebook.com/docs/php/gettingstarted

	$facebook = new Facebook\Facebook(array(
		'app_id' => $this->FB_APP_ID,
		'app_secret' => $this->FB_APP_SECRET,
		'default_graph_version' => 'v2.5'));

	$helper = $facebook->getRedirectLoginHelper();
	try {
		$accessToken = $helper->getAccessToken();
		$facebook->setDefaultAccessToken($accessToken);
		$response = $facebook->get('/me');
		$responsePicture = $facebook->get('/me/picture?redirect=false&height=300'); //getting user picture
		$userPicture = $responsePicture->getGraphUser();
		$userProfile = $response->getGraphUser();

		$this->session->set_userdata(array(
			'nombre' => $userProfile["name"],
			'auth_level' => 1,
			'avatar' => $userPicture["url"],
			'social' => true
		));
	} 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;
	}

	redirect("/");
}

Es bastante simple la función; con getRedirectLoginHelper() obtenemos el token de acceso generado con Facebook y a partir de la misma podemos obtener los datos del usuario con $facebook->get('/me'), los cuales son realmente pocos, el nombre de la cuenta, un identificador y poco más; ahora solicitamos también el avatar con $facebook->get('/me/picture?redirect=false&height=300') y establecemos los datos en sesión, pero puedes realizar cualquier otra operación con los datos como guardarla en base de datos, etc.

¿Cómo crear una aplicación en la Graph API de Facebook?

En esta sección se explica como crear la aplicación en la Graph API de Facebook para eso nos vamos al sitio de desarrolladores de Facebook y creamos una aplicación, ya la creación paso a paso se ha explicado en una entrada anterior, aunque actualmente hay un asistente que te automatiza casi todo; una vez creada la aplicación veremos una pantalla como esta:

inicio sesión facebook

Como vemos ya Facebook creó una sección de productos predefinidos, en nuestro caso nos interesa el llamado "Inicio de sesión con Facebook" y por lo tanto le damos clic en "Empezar"; una vez realizada la acción anterior veremos una pantalla como la siguiente:

configuración oauth

En dicha pantalla debemos de colocar la URL del callback de nuestra aplicación; es decir la URL asociada a la acción que recibirá los datos de la autenticación; una vez proporcionada, le damos clic en el botón guardar y copiamos las credenciales de acceso en nuestra aplicación:

claves facebook
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.