Crear un sistema de login con Google+ (OAuth)

Con este articulo quiero dar el inicio a una serie de tutoriales sobre la API de varias redes sociales como Google+, Twitter, Youtube y todas las demás que se pueda en el proceso. Para crear un sistema de login en nuestra web con Google+ debemos conocer sobre OAuth, que por definirlo de una forma muy general y rápida es un protocolo creado para interactuar fácilmente con los datos de usuario de un sitio como lo puede ser Facebook, Google, Twitter y muchos más servicios reconocidos hacen uso de OAuth.

Lo primero que debemos hacer es registrar nuestro sitio:

Posteriormente en manejar dominios se debe verificar la propiedad del dominio siguiendo los pasos:


Luego se debe crear un ID cliente en Consola de APIs, crear un nuevo proyecto y en el menú seleccionar API Access.

Finalmente deberías ver el ID del cliente y otros datos necesarios para crear una aplicación. Allí mismo en el menú ve al apartado services y activa Google+ para poder trabajar con el. Manos al código, pero antes de eso debes descargar el paquete de librerías google-api-php-client. Después de descargado en la carpeta src ve al archivo config.php y busca:

// Datos obtenidos al crear el cliente
'oauth2_client_id' => 'CLIENTE_ID',
'oauth2_client_secret' => 'SECRET',
'oauth2_redirect_uri' => 'http://brianur.info',
//Datos obtenidos al verificar el dominio
'oauth_consumer_key'    => 'brianur.info',
'oauth_consumer_secret' => 'JA8HUXQGKHUWc2gIbpKZUYrO ',
<?php /* Obtener datos del usuario en Google+ para crear un sistema
de login. www.BrianUR.info */
//'Incluimos' las librerías necesarias require_once 'src/apiClient.php';
require_once 'src/contrib/apiPlusService.php';
session_start();
$client = new apiClient();
$client--->setApplicationName("BrianUR.info");
$client->setScopes(array('https://www.googleapis.com/auth/plus.me'));
$plus = new apiPlusService($client);
if (isset($_REQUEST['logout'])) {
unset($_SESSION['access_token']);
}

if (isset($_GET['code'])) {
$client->authenticate();
$_SESSION['access_token'] = $client->getAccessToken();
header('Location: http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF']);
}

if (isset($_SESSION['access_token'])) {
$client->setAccessToken($_SESSION['access_token']);
}

if ($client->getAccessToken()) {
$yo = $plus->people->get('me');
$_SESSION['access_token'] = $client->getAccessToken();
}
else
$authUrl = $client->createAuthUrl();

if (isset($yo)) {
$_SESSION['sesion'] = $yo;
$yo = $_SESSION['sesion'];
echo "</pre>
<img src="\&quot;&quot;" alt="" />
<pre>";
echo "<strong>Nombre:</strong> " . $yo['displayName'] . "";
echo "<strong>ID:</strong> " . $yo['id'] . "";
echo "<strong>Sexo:</strong> " . $yo['gender'] . "";
echo "<strong>Lema:</strong> " . $yo['tagline'] . "";
}
if (isset($authUrl))
echo "<a class="login" href="$authUrl">Acceder usando mi cuenta Google+</a>";
else
echo "<a class="logout" href="index.php?logout">Salir</a>";
?>

Al acceder a la aplicación debe aparecer un enlace para conectarse con Google+, luego pide permiso:

Por ultimo si todo ha salido bien debería verse los datos que pedimos, algo así:

  1 Comment

  1. Miguel Ángel   •  

    Buen post, simple y se centra en lo principal, solo añadiría instrucciones para poner el botón de conectar con google, gracias!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *