Botón Acceder con Google para la Web

1. Descripción general

En este codelab, compilaremos una página web para el acceso de usuarios. Usarás la biblioteca de JavaScript de Google Identity Services para mostrar y personalizar el botón de Acceder con Google.

Un botón de Acceder con Google

Qué aprenderás

  • Cómo agregar un botón de Acceder con Google a una página web
  • Cómo configurar una aplicación web de OAuth 2.0
  • Cómo decodificar un token de ID
  • Cómo personalizar el botón de Acceder con Google

Requisitos

  1. Un editor de texto y un lugar para alojar una página web, entornos que abordaremos en este codelab:
    • Ejecutarlo de forma local en una terminal de tu máquina
    • usando una plataforma como Glitch
    Elige el entorno con el que te sientas más cómodo.
  2. Un proyecto de Google Cloud, Puedes usar tu proyecto existente o crear uno nuevo. Una cuenta y un proyecto de Google Cloud Platform son gratuitos.
  3. Conocimientos básicos de HTML, CSS, JavaScript y las Herramientas para desarrolladores de Chrome (o herramientas equivalentes)

¡Empecemos!

2. Crea tu página de acceso

Agrega este código de muestra a un archivo llamado index.html. Puedes hacerlo en tu máquina con tu editor de texto favorito o en una plataforma como Glitch.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://accounts.google.com/gsi/client" async></script>

    <script>
      function decodeJWT(token) {

        let base64Url = token.split(".")[1];
        let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        let jsonPayload = decodeURIComponent(
          atob(base64)
            .split("")
            .map(function (c) {
              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );
        return JSON.parse(jsonPayload);
      }

      function handleCredentialResponse(response) {

        console.log("Encoded JWT ID token: " + response.credential);

        const responsePayload = decodeJWT(response.credential);

        console.log("Decoded JWT ID token fields:");
        console.log("  Full Name: " + responsePayload.name);
        console.log("  Given Name: " + responsePayload.given_name);
        console.log("  Family Name: " + responsePayload.family_name);
        console.log("  Unique ID: " + responsePayload.sub);
        console.log("  Profile image URL: " + responsePayload.picture);
        console.log("  Email: " + responsePayload.email);
      }
    </script>
  </head>
  <body>
    <!-- g_id_onload contains Google Identity Services settings -->
    <div
      id="g_id_onload"
      data-auto_prompt="false"
      data-callback="handleCredentialResponse"
      data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
    ></div>
    <!-- g_id_signin places the button on a page and supports customization -->
    <div class="g_id_signin"></div>
  </body>
</html>

Este código es una combinación de HTML y JavaScript, y hace varias cosas:

  • configura la biblioteca de Google Identity Services con g_id_onload
  • Muestra un botón de Acceder con Google con g_id_signin.
  • agrega un controlador de funciones de devolución de llamada de JavaScript llamado handleCredentialResponse para recibir las credenciales de acceso del usuario de Google
  • una función decodeJWT para convertir la credencial del token web JSON (JWT) en JSON simple

Es posible que notes algo extraño en data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".

Por ahora, ignóralo. Volveremos a él en un momento.

3. Entrega tu página web

Analizaremos dos entornos para entregar index.html al navegador:

  • Ejecutar un servidor web de forma local en tu máquina
  • una plataforma remota como Glitch

Elige la que te resulte más cómoda. Después de la configuración, usaremos la URL para configurar un cliente web de OAuth.

De forma local desde tu máquina

Asegúrate de que Python3 esté instalado en tu sistema. La configuración difiere según el SO y la plataforma. Comienza con Configuración y uso de Python si necesitas instalar Python en tu máquina.

Inicia el servidor web de Python en el directorio que contiene index.html:

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Ahora, un servidor web está escuchando conexiones en el puerto 8000 y está listo para entregar tu página de acceso. La URL es

http://localhost:8000

Desde una plataforma de desarrollo web

Si elegiste editar y alojar tu página de acceso con Glitch (o un equivalente), deberías poder abrir index.html en un panel de vista previa o en una pestaña nueva del navegador.

Por lo general, la URL que usarás es el nombre del proyecto que ingresaste cuando configuraste tu proyecto de glitch.com. Por ejemplo, si tu proyecto de Glitch se llama gis-example, la URL es https://gis-example.glitch.me. Por supuesto, habrás elegido un nombre de proyecto diferente y no podrás reutilizar este. La URL es

https://<var>your-project-name</var>.glitch.me

Carga la página

Espera un momento…

Primero, debemos crear un cliente web de OAuth 2.0 y configurarlo.

Copia la URL o toma nota de ella, ya que la usarás en el siguiente paso.

4. Configura un cliente web de OAuth

Configuremos OAuth para que las personas puedan acceder.

  • Haz clic en este vínculo para crear un cliente web de OAuth 2.0. Si es necesario, un asistente te ayudará a crear y configurar un nuevo proyecto de Google Cloud.
  • Selecciona Aplicación web en el menú desplegable Tipo de aplicación.
  • Presiona el botón Agregar URI en Orígenes autorizados de JavaScript.
  • Ingresa la URL que aloja index.html desde Paso 3: Publica tu página web.

    Se aloja en tu máquina local

    Origen local alojado en tu máquina

    Alojado en una plataforma remota

    Usa una plataforma de hosting remota
  • Presiona Crear.
  • Copia el nuevo ID de cliente.

Otro elemento

Debemos volver y actualizar index.html para usar el nuevo ID de cliente. En tu editor, reemplaza PUT_YOUR_WEB_CLIENT_ID_HERE por tu nuevo ID de cliente. Un ID de cliente se parece al siguiente ejemplo: 1234567890-abc123def456.apps.googleusercontent.com.

¡Ingresemos!

5. Acceder

Primero, abre la consola para desarrolladores de tu navegador. Aquí se registrarán los errores y la credencial del token de ID de JWT que devolvió Google.

Presiona el botón Acceder con Google.

Lo que sucede después puede variar un poco:

  • Si accediste a más de una Cuenta de Google, se te pedirá que selecciones la que usarás para acceder a esta app web.
  • Si es la primera vez que accedes a esta app web, se mostrará una solicitud de consentimiento.

Después de seleccionar una cuenta y dar tu consentimiento de forma opcional, Google responde con un JWT. La función de devolución de llamada handleCredentialResponse que se ejecuta en el navegador recibe el JWT.

En este codelab, decodificamos e imprimimos el contenido del JWT. En una app web de producción, verificarás y usarás el JWT decodificado para hacer algo más significativo, como crear una cuenta nueva en tu plataforma de backend o establecer una nueva sesión para el usuario.

6. Inspecciona el token de ID de JWT

El JWT codificado se registra en la consola para desarrolladores. Después de decodificar el JWT, algunos campos de token de ID de uso común también se registran en la consola.

Puedes usar herramientas en línea, como jwt.io, para decodificar el JWT.

Como alternativa, también puedes usar jq en tu terminal para decodificar y ver el JWT (es posible que debas usar tu administrador de paquetes para instalar jq). Primero, pega la cadena JWT codificada entre comillas dobles:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

y, luego, usa este comando para decodificarlo.

$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
  "alg": "RS256",
  "kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
  "typ": "JWT"
}
{
  "iss": "https://accounts.google.com",
  "azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "sub": "2718281828459045",
  "email": "example@example.com",
  "email_verified": true,
  "nbf": 1744645148,
  "name": "Brian Daugherty",
  "picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
  "given_name": "Brian",
  "family_name": "Daugherty",
  "iat": 1744645448,
  "exp": 1744649048,
  "jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}

Algunas de las claves y los valores, como el correo electrónico, el nombre y la foto, deberían ser bastante fáciles de comprender. Otros valores se usan para verificar el JWT antes de que lo uses. En Cómo obtener información del usuario a partir del token de ID, se explica el significado de todos los campos.

7. Personaliza el botón

Colocar un botón de acceso predeterminado en una página se hace de la siguiente manera:

    <div class="g_id_signin"></div>

y verás este botón.

Un botón de Acceder con Google

Sin embargo, es posible que desees cambiar el color, el tamaño o el texto para que coincidan con el tema de tu sitio.

Cambiemos el color del botón a azul y hagamos que diga Registrarse con Google.

Abre index.html, busca el elemento g_id_signin y agrega los atributos data-theme="filled_blue" y data-text="signup_with":

    <div
      class="g_id_signin"
      data-theme="filled_blue"
      data-text="signup_with"
    ></div>

Después de guardar y volver a cargar la página, verás un botón azul con el texto nuevo.

Un botón de Registrarse con Google

Puedes personalizar aún más el botón. Consulta los atributos de datos visuales para obtener la lista completa de opciones y probar nuestro generador de código HTML.

8. Recursos adicionales

¡Felicitaciones!

Agregaste un botón de acceso con Google a una página web, configuraste un cliente web de OAuth 2.0, decodificaste un token de ID de JWT y aprendiste a personalizar la apariencia del botón.

Estos vínculos pueden ayudarte con los próximos pasos:

Preguntas frecuentes