Cómo implementar Google One Tap ⚡️ En 3 pasos
Tiempo de lectura: 2.89 minutos
De seguro que muchas veces te has encontrado con esta ventana modal:
- Con ésta puedes iniciar sesión con un sólo clic.
- Y se conoce como Google One Tap.
¿Te gustaría agregar Google One Tap a tu proyecto web?
Veamos cómo puedes conseguirlo siguiendo 3 simples pasos.
Paso 1: Agrega Google One Tap a tu vista
Debes agregar la siguiente etiqueta div
a tu página, junto al script de Google One Tap.
@guest
<div id="g_id_onload"
data-client_id="{{ env('GOOGLE_CLIENT_ID') }}"
data-login_uri="{{ route('login.google') }}"
data-cancel_on_tap_outside="false">
</div>
<script src="https://accounts.google.com/gsi/client" async defer></script>
@endguest
Ten en cuenta que el modal debe mostrarse sólo a usuarios que no han iniciado sesión.
No tiene sentido mostrar Google One Tap a usuarios que ya se encuentran autenticados, ¿verdad?
Si estás usando Laravel, puedes lograr ello con Las directivas Blade @guest
y @endguest
.
Para que este código funcione es importante:
- Definir una variable de entorno llamada
GOOGLE_CLIENT_ID
(si no cuentas con estas credenciales, puedes luego revisar la sección final de este artículo). - Definir una ruta POST para atender el request de Google One Tap.
Por otro lado:
- El atributo
data-cancel_on_tap_outside
es opcional. - Por defecto su valor es
true
. - Y significa que la ventana se cerrará al hacer tap fuera de ella.
- En este caso, no quiero que se cierre, por tanto le asigno el valor
false
.
Paso 2: Verifica los token en tu backend
La idea es verificar tanto el token CSRF generado para el usuario, así como su token ID, luego que el usuario hace tap.
Para esto debemos crear un controlador, y una ruta POST encargada atender la petición generada por Google One Tap.
Así puedes definir tu ruta, por ejemplo:
Route::post('/login/google', [GoogleSignInController::class, 'login'])->name('login.google');
Paso 3: Registro e inicio de sesión
La idea es:
- Crear un usuario nuevo si aún no existe, e inmediatamente iniciar sesión con este usuario.
- O bien, simplemente iniciar sesión con un usuario que ya se encuentra registrado.
Esto es muy sencillo de lograr.
Si estás usando Laravel, el código quedaría de la sigueinte manera:
public function login(Request $request)
{
if ($_COOKIE['g_csrf_token'] !== $request->input('g_csrf_token')) {
// Invalid CSRF token
return back();
}
$idToken = $request->input('credential');
$client = new Google_Client([
'client_id' => env('GOOGLE_CLIENT_ID')
]);
$payload = $client->verifyIdToken($idToken);
if (!$payload) {
// Invalid ID token
return back();
}
$user = User::firstOrCreate([
'email' => $payload['email']
], [
'name' => $payload['name'],
'password' => null,
'image' => $payload['picture'],
'google_user_id' => $payload['sub']
]);
// ...
auth()->login($user);
return back();
}
Nótese que:
- El token CSRF se valida comparando el valor almacenado en cookies con el valor enviado a través de la petición POST.
- El token ID se valida haciendo uso de la Google API Client Library.
Si estás usando PHP, puedes instalar la biblioteca oficial de Google a través de Composer:
composer require google/apiclient
Gracias a la biblioteca:
- Puedes usar el método
verifyIdToken
para validar el ID token que llega a través del campocredential
. - Obtenemos un arreglo
$payload
en caso que el token sea válido. - Éste payload contiene la información del usuario.
Importante: $payload['sub']
representa el google user id del usuario que hizo tap.
Cómo obtener tus credenciales
Si no dispones de credenciales para Google One Tap, puedes obtenerlas fácilmente con los pasos siguientes.
Crea un proyecto en Google Cloud
Es importante que crees un proyecto de Google Cloud.
A menos que ya cuentes con uno. Si es así, simplemente selecciónalo:
Crea un cliente de OAuth
Lo siguiente es crear un cliente de OAuth.
Para esto simplemente debes ir a Credentials
y hacer clic en Create credentials
:
Y seleccionar la opción OAuth client ID:
Entonces te aparecerá un formulario, sobre el cuál debes completar toda la información sobre tu proyecto web.
Tras ello, te aparecerá un mensaje con tus credenciales:
Proceso de verificación
Te recomiendo crear 2 clientes de OAuth.
Así podrás usar uno para tus pruebas de manera local, y otro para producción.
Esto es importante ya que cada cliente de OAuth tiene una lista de dominios admitidos.
Por ejemplo, yo he creado 2 clientes de OAuth, cada uno asociado a estos dominios:
-
programacionymas.com
para producción -
programacionymas.test.com
para desarrollo
Gracias a que están separados puedo verificar el primero, y continuar usando el segundo de manera local.
Para que Google One Tap esté disponible en tu sitio web de producción, Google te exige verificar la pantalla de consentimiento de OAuth.
Para esto simplemente debes completar los datos de tu sitio web, y enviar el formulario para su revisión.
Si todo es correcto, pronto verás el estado como verificado:
Videotutorial
Si deseas seguir los mismos pasos, pero explicados a través de un video, aquí lo tienes:
Cualquier duda que tengas es bienvenida 🙂