Como hacer que en tu web se pueda ingresar con la cuenta de Google usando PHP


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.

Ejemplo de Login con 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.

Certificado SSL - Autenticación de Google

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

Proyecto en API - Login con Google

En la siguiente pantalla debemos darle un nombre al proyecto (no admite tildes) y presionamos el botón Crear.

Nombre del proyecto - Login con Google

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.

Pantalla de consentimiento - Ingrear con google

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.

Dominios autorizados - Login Google

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

Credenciales para login con cuenta de Google

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.

Id OAuth - Ingresa con cuenta de google

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.

Datos para hacer pantalla de Login con Google

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/

Versión en video de este articulo