Botón Acceder con Google para la Web

Botón Acceder con Google para la Web

Acerca de este codelab

subjectÚltima actualización: abr 28, 2025
account_circleEscrito por Brian Daugherty

1. Descripción general

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

Un botón de Acceder con Google

  • 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 Acceder con Google

Requisitos

  1. Un editor de texto y lugar para alojar una página web. Los entornos que abordaremos en este codelab son los siguientes:
    • que se ejecute localmente en una terminal en tu máquina
    • con una plataforma como Glitch.
    Elige el entorno con el que te sientas más cómodo.
  2. Un proyecto de Google Cloud, Puedes usar el 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 Herramientas para desarrolladores de Chrome (o una herramienta equivalente)

¡Empecemos!

2. Crea tu página de acceso

Agrega esta muestra de código en 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 realiza varias acciones:

  • configura esta biblioteca de Google Identity Services con g_id_onload,
  • muestre un botón de Acceder con Google con g_id_signin
  • Agrega un controlador de función de devolución de llamada de JavaScript llamado handleCredentialResponse para recibir la credencial de acceso del usuario desde Google.
  • Una función decodeJWT para convertir la credencial de token web JSON (JWT) en un JSON sin formato

Algo puede parecer extraño con data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".

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

3. Publica tu página web

Hablaremos sobre dos entornos para entregar index.html al navegador:

  • ejecutar un servidor web de manera local en tu máquina
  • una plataforma remota como Glitch.

Elige la que te resulte más conveniente. 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/) ...

Un servidor web está detectando conexiones en el puerto 8000 y listo para entregar tu página de acceso. La URL es

http://localhost:8000

Usa una plataforma remota

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

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

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

Cargar la página

Espera un momento...

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

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

4. Configura un cliente web de OAuth

Configuremos OAuth para que las personas realmente 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 proyecto de Google Cloud nuevo.
  • Selecciona Aplicación web del 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 del Paso 3: Publica tu página web.

    Se aloja en tu máquina local.

    Origen local alojado en tu máquina

    Se aloja en una plataforma remota

    Usar 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.

Iniciemos sesión.

5. Acceder

Primero, abre la consola para desarrolladores de tu navegador. Los errores y la credencial de token del ID de JWT que muestre Google se registrarán aquí.

Presiona el botón Acceder con Google.

Lo que sucede a continuación puede variar un poco:

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

Después de seleccionar una cuenta y dar tu consentimiento de manera 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 de 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 sesión nueva 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 general también se registran en la consola.

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

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

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

y, luego, usar 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 claves y valores, como el correo electrónico, el nombre y la foto, deberían ser bastante fáciles de entender. Se usan otros valores para verificar el JWT antes de usarlo. En Obtener información del usuario a partir del token de ID, encontrarás más información sobre el significado de todos los campos.

7. Personaliza el botón

Si colocas un botón de acceso predeterminado en una página, esto 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, tal vez quieras cambiar el color, el tamaño o el texto para que combine con el tema de tu sitio.

Cambia el color del botón a azul y di Regístrate 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 Atributos de datos visuales para obtener la lista completa de opciones.

8. Recursos adicionales

¡Felicitaciones!

Agregaste un botón de Acceder 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 el aspecto del botón.

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

Preguntas frecuentes

bug_report Informar de un error