Si tienes un sitio web o una aplicación web, posiblemente buscas la comodidad de tus usuarios. Una forma de hacer a tu aplicación más amigable es permitiendo que ingrese con su cuenta de Google, en lugar de pedirle que cree una cuenta más en tu aplicación, o al menos darle la opción de elegir.
En este artículo voy a explicarte de forma muy sencilla como hacer que tu aplicación permita a alguien crear una cuenta en tu sitio y autenticarse usando su cuenta de Google.
Requisitos para usar la autenticación de Google
Para poder hacer que tu sitio web utilice la autenticación de Google, debes tener un servidor con un certificado SSL, de otra forma no funcionará, Google solo permite hacerlo si tienes este certificado, porque de esta forma toda la información viaja encriptada.
Sabes si tienes un certificado SSL, si en el navegador puedes ver un candado junto al nombre del dominio.
También vas a necesitar una cuenta de Google.
Configurar un proyecto en tu cuenta de Google
Primero ingresa en la página de APIs de Google: https://console.developers.google.com/ y cuando estés ahí, haz clic sobre el enlace que se muestra en esta imagen y luego presiona el enlace Nuevo Proyecto
En la siguiente pantalla debemos darle un nombre al proyecto (no admite tildes) y presionamos el botón Crear.
Ahora debemos llenar los datos de la pantalla de consentimiento, primero debes asegurarte de seleccionar el proyecto que acabas de crear (en la parte superior), luego haces clic sobre el menú Pantalla de consentimiento.
En la parte derecha selecciones Externo y presionas el botón Crear.
Ahora en esta pantalla lo más importante es agregar el dominio en donde vas a usar la autenticación de Google. Luego presionas el botón Guardar.
Ahora necesitas crear unas credenciales, entonces seleccionas Credenciales, en la parte izquierda y luego presionas Crear Credenciales en la parte superior y seleccionas Id de cliente de Oauth
En la siguiente pantalla selecciona la opción Web y en la parte que dice URIs de redirección autorizados ingresa la dirección de las páginas que puede recibir la respuesta de Google cuando el usuario se autentique con éxito. Finalmente, presionas el botón Crear.
Ahora verás una pantalla con un Id de cliente y Secreto de cliente, debes anotar estos valores porque vamos a usarlos más adelante. Si los pierdes, no te preocupes, puedes volver a consultarlos desde el proyecto que creaste al inicio.
Con esto terminamos la configuración en tu cuenta de Google.
Crear la integración con PHP
Ahora vamos a escribir el código de PHP para que tu aplicación use la autenticación de Google. Vamos a necesitar la librería de api de Google y la forma más fácil de obtenerla es mediante composer
Crea una carpeta y desde una ventana de comandos ejecuta este comando:
composer require google/apiclient:"^2.0"
Ahora crea un archivo llamado config.php con este código:
<?php // CONFIGURACION DE GOOGLE $clientID = 'TU-ID-DE-CLIENTE'; $clientSecret = 'TU-SECRETO-DE-CLIENTE'; $redirectUri = 'URIs de redirección autorizados';
Debes de cambiar los valores de las variables por los datos que ingresaste en la parte anterior de este artículo.
Ahora crea un archivo llamado index.php y coloca este código:
<?php
require_once 'vendor/autoload.php';
require_once 'config.php';
$client = new Google_Client();
$client->setClientId($clientID);
$client->setClientSecret($clientSecret);
$client->setRedirectUri($redirectUri);
$client->addScope("email");
$client->addScope("profile");
echo "<a href='".$client->createAuthUrl()."'>Google Login</a>";En el código anterior creas un objeto de la clase Google_Client y al final generas un enlace para que el usuario haga clic y pueda ingresar con su cuenta de Google. También le decimos que necesitamos acceso a su email y su perfil (nombre)
Ahora vamos a crear la página que procesa los datos que Google nos regresa cuando el usuario se autentica exitosamente. El nombre de la página que crees debe ser el que definiste en la parte “URIs de redirección autorizados” del archivo de configuración. Aquí está el código:
<?php
require_once 'vendor/autoload.php';
require_once 'config.php';
$client = new Google_Client();
$client->setClientId($clientID);
$client->setClientSecret($clientSecret);
$client->setRedirectUri($redirectUri);
$client->addScope("email");
$client->addScope("profile");
if (isset($_GET['code'])) {
$token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
$client->setAccessToken($token['access_token']);
// get profile info
$google_oauth = new Google_Service_Oauth2($client);
$google_account_info = $google_oauth->userinfo->get();
$email = $google_account_info->email;
$name = $google_account_info->name;
// Estos datos son los que obtenemos....
echo $email .'<br>';
echo $name ;
} Cuando el usuario se autentica con su cuenta, Google lo redirige a esta página.
El código es similar al archivo anterior, pero aquí también recuperamos la información del usuario y la guardamos en las variables $email y $name.
Con esta información podemos crear un perfil básico del usuario en nuestra aplicación web. Puedes probar este código ingresando en esta dirección: https://test.codigonaranja.com/google-login/