¿Sabes que puedes utilizar los servicios de Google para implementar un formulario de registro de un click para tu web? Toda persona con una cuenta de Google, puede pulsar en un botón y al instante registrarse en tu aplicación con su correo electrónico, nombre y foto.
Este servicio se denomina federated login, y está desarrollado con el protocolo OAuth2. Este es un proceso complejo que implica varias solicitudes de intercambio de datos entre el servidor y Google, pero vamos a dejar todo esto a la librería PHP de Google, que gestionará casi todo lo relacionado con el lado del servidor.
Usar este login/registro puede simplificar las cosas para ti y tus usuarios. Éstos son algunos de sus beneficios:
- No hay necesidad de crear y validar formularios de registro y de login
- No hay necesidad de una función de "Olvidó su contraseña"
- Simplifica en gran medida el flujo de entrada/login. Obtienes datos como el correo electrónico, el nombre y una foto mediante un solo clic
- El correo electrónico ya está validado por Google, por lo que no tienes que enviar un mensaje de validación
- Seguridad reforzada por parte de Google
Por supuesto, esto sólo funcionará si la persona tiene una cuenta de Google, por lo que lo suyo sería mezclar este método con un sistema de registro normal y corriente. ¿Todo claro? ¡Pues empezamos!
Preparándolo todo
El primer paso es crear una nueva aplicación mediante la Google's API Console. Sigue estas instrucciones para más información. Después de completar el proceso, inserta las claves obtenidas en el setup.php.
Ejecuta el código de schema.sql (lo encontrarás todo aquí) en un phpMyAdmin o en cualquier gestor de base de datos. Este creará la tabla glogin_users en tu base de datos, la cual utilizaremos para almacenar la información de los usuarios que se registren mediante esta vía. Después de eso, no olvides insertar los datos de tu base de datos en el fichero setup.php.
El PHP
El formulario de login que estamos haciendo, utiliza el flujo de login del Google's Federated. Lo que esto significa es que los visitantes de tu sitio web siguen un enlace a una página de Google, donde dan su acceso a su cuentas, y vuelven a la página. A continuación, obtenemos un token de acceso, el cual utilizamos para solicitar información acerca de ellos. He aquí una descripción simplificada del flujo de login:
- Cuando el usuario hace clic en "Iniciar sesión con Google" en nuestra demo, son llevados a la página de autenticación de Google, en el que ven qué permisos se solicitan para con nuestra aplicación.
- Al hacer click en aceptar, son redirigidos a nuestro sitio, junto con un parámetro especial pasado en la URL. Nuestra aplicación utilizará este código para obtener un token de acceso;
- Con el token de acceso, la aplicación solicita información sobre el usuario, que se inserta en la base de datos.
- Para la lectura y la inserción en la base de datos, utilizamos la pequeña librería Idiorm, que se puedes encontrar en la carpeta library.
Nuestro código PHP se organiza de la siguiente manera:
- index.php, es el archivo principal de la aplicación
- setup.php, contiene la información sobre la conexión con la base de datos y las claves obtenidas de la API de Google;
- La carpeta library, que contiene la librería Idiorm, la librería PHP de Google, y una clase para convertir las marcas de tiempo en tiempo relativo.
Vamos a echar un vistazo al código que podemos encontrar en la parte superior de index.php:
index.php
require 'setup.php';
// Create a new Google API client
$client = new apiClient();
//$client->setApplicationName("Tutorialzine");
// Configure it
$client->setClientId($client_id);
$client->setClientSecret($client_secret);
$client->setDeveloperKey($api_key);
$client->setRedirectUri($redirect_url);
$client->setApprovalPrompt(false);
$oauth2 = new apiOauth2Service($client);
// The code parameter signifies that this is
// a redirect from google, bearing a temporary code
if (isset($_GET['code'])) {
// This method will obtain the actuall access token from Google,
// so we can request user info
$client->authenticate();
// Get the user data
$info = $oauth2->userinfo->get();
// Find this person in the database
$person = ORM::for_table('glogin_users')->where('email', $info['email'])->find_one();
if(!$person){
// No such person was found. Register!
$person = ORM::for_table('glogin_users')->create();
// Set the properties that are to be inserted in the db
$person->email = $info['email'];
$person->name = $info['name'];
if(isset($info['picture'])){
// If the user has set a public google account photo
$person->photo = $info['picture'];
}
else{
// otherwise use the default
$person->photo = 'assets/img/default_avatar.jpg';
}
// insert the record to the database
$person->save();
}
// Save the user id to the session
$_SESSION['user_id'] = $person->id();
// Redirect to the base demo URL
header("Location: $redirect_url");
exit;
}
// Handle logout
if (isset($_GET['logout'])) {
unset($_SESSION['user_id']);
}
$person = null;
if(isset($_SESSION['user_id'])){
// Fetch the person from the database
$person = ORM::for_table('glogin_users')->find_one($_SESSION['user_id']);
Lo que está sucediendo aquí, es que estamos chequeando el parámetro especial del $ _GET. Como he mencionado anteriormente, este parámetro se establece por Google cuando el usuario es redirigido después de autorizar la aplicación. En el bloque del if, estamos solicitando la información del usuario y la escritura en la base de datos. El id del usuario (valor de la clave id en la base de datos) se escribe en la sesión. Esto se conserva durante las peticiones y se utiliza como un indicador de que el usuario está conectado.
Cerca del final, definimos una variable $person. Esto alberga un objeto que es devuelto por la librería Idiorm con propiedades para cada columna de la tabla glogin_users. Puedes ver cómo se utiliza este objeto en la siguiente sección.
El HTML
El código HTML de este ejemplo ocupa la mitad inferior del fichero index.php. Debido a esto, tenemos acceso al objeto $person, que nos vendrá de perlas cuando queramos imprimir el nombre y la foto del usuario. La página en sí es un documento estándar HTML5:
index.php
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Google Powered Login Form</title> <!-- The stylesheets --> <link rel="stylesheet" href="assets/css/styles.css" /> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <h1>Login Form</h1> <div id="main"> <?php if($person):?> <div id="avatar" style="background-image:url(<?php echo $person->photo?>?sz=58)"></div> <p class="greeting">Welcome, <b><?php echo htmlspecialchars($person->name)?></b></p> <p class="register_info">You registered <b><?php echo new RelativeTime($person->registered)?></b></p> <a href="?logout" class="logoutButton">Logout</a> <?php else:?> <a href="<?php echo $client->createAuthUrl()?>" class="googleLoginButton">Sign in with Google</a> <?php endif;?> </div> </body> </html>
Comprobamos si la variable $person contiene un objeto o está vacía, y mostramos el nombre del usuario y la foto en tal caso.
Fuente: tutorialzine.com