Cómo implementar Google One Tap ⚡️ En 3 pasos

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 campo credential.
• 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 🙂

# laravel # javascript # oauth # google cloud