Antes que te vayas
Inscríbete en nuestro curso gratuito de Laravel
De seguro que muchas veces te has encontrado con esta ventana modal:
¿Te gustaría agregar Google One Tap a tu proyecto web?
Veamos cómo puedes conseguirlo siguiendo 3 simples pasos.
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:
GOOGLE_CLIENT_ID
(si no cuentas con estas credenciales, puedes luego revisar la sección final de este artículo).Por otro lado:
data-cancel_on_tap_outside
es opcional.true
.false
.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');
La idea es:
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:
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:
verifyIdToken
para validar el ID token que llega a través del campo credential
.$payload
en caso que el token sea válido.Importante: $payload['sub']
representa el google user id del usuario que hizo tap.
Si no dispones de credenciales para Google One Tap, puedes obtenerlas fácilmente con los pasos siguientes.
Es importante que crees un proyecto de Google Cloud.
A menos que ya cuentes con uno. Si es así, simplemente selecciónalo:
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:
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ónprogramacionymas.test.com
para desarrolloGracias 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:
Si deseas seguir los mismos pasos, pero explicados a través de un video, aquí lo tienes:
Cualquier duda que tengas es bienvenida 🙂
Comparte este post si te fue de ayuda 🙂.
Cualquier duda y/o sugerencia es bienvenida.
Regístrate
Inicia sesión para acceder a nuestros cursos y llevar un control de tu progreso.
Cursos recomendados
Veamos cómo implementar un login mediante redes sociales! Aprende y aplica esto sobre cualquier proyecto Laravel.
Ingresar al cursoCurso intensivo. Incluye el desarrollo de una API, su consumo, y autenticación vía JWT. También vemos Kotlin desde 0.
Ingresar al cursoActualiza tus proyectos desde cualquier versión hasta la última versión estable de Laravel.
Ingresar al cursoInscríbete en nuestro curso gratuito de Laravel