Configuración de Google Login

Introducción

En esta guía, aprenderás a configurar Google Login con Capgo Social Login. Para configurar Google Login, necesitarás lo siguiente:

• Una cuenta de Google

Configuración general

Nota

Este paso es obligatorio, independientemente de la plataforma que decidas usar.

En esta parte, configurarás la pantalla de inicio de sesión que muestra Google.

1. Por favor, ve a console.cloud.google.com
2. Haz clic en el selector de proyectos
3. Si aún no tienes un proyecto, por favor crea un nuevo proyecto.
   1. Haz clic en New project
   2. Nombra tu proyecto y haz clic en Create
   3. Asegúrate de estar en el proyecto correcto
4. Comienza a configurar el OAuth consent screen

   1. Haz clic en la barra de búsqueda

      

   2. Busca OAuth consent screen y haz clic en él

      

   3. Configura la pantalla de consentimiento

      Nota

      Asumiré que estás desarrollando una app abierta al público, así que usaré el external tipo de usuario. Selecciona el tipo de usuario que mejor te convenga Y haz clic en create

      Haz clic en create

      
5. Completa la información de tu app

   1. Empecemos con la App Information

      
      • Por favor, escribe tu App Name

        Precaución

        ESTO SE MOSTRARÁ A LOS USUARIOS

      • Introduce el user support email

        Nota

        Puedes obtener más información sobre el correo de soporte aquí

      2. Usted PUEDES añadir el logotipo de la app.

         

         Nota

         Esto no es obligatorio y me saltaré este paso

      3. Usted DEBERÍAS configurar la App domain

         

         Nota

         No lo haré porque esta es solo una demostración simple que NO se publicará, pero te recomiendo encarecidamente completar esta sección.

      4. Usted TENER QUE proporcionar el correo electrónico del desarrollador

         

      5. Haz clic en save and continue

         
6. Configurar los scopes

   1. Haz clic en add or remove scopes

      

   2. Selecciona los siguientes scopes y haz clic en update

      

   3. Haz clic save and continue

      
7. Agregar un usuario de prueba
   1. Haz clic en add users
   2. Ingresa tu correo de Google, presiona Enter y haz clic en add
   3. Haz clic save and continue
8. Haz clic back to dashboard
9. Envía tu app para verificación

   Nota

   Recomiendo encarecidamente enviar tu app para verificación. Esto queda fuera del alcance de este tutorial. Puedes aprender más aquí. No es necesario para pruebas locales, pero sí es obligatorio para producción.

Diferencias entre acceso online y offline

Hay varias formas de usar Google Login con Capacitor. Aquí tienes una tabla que resume las diferencias entre ambas:

	Acceso online	Acceso offline
Requiere un backend	❌	✅
Token de acceso de larga duración	❌	✅
Easy setup	✅	❌

Nota

Modo offline significa que tu backend puede acceder a las APIs de Google incluso cuando el usuario no está usando activamente tu app (es decir, cuando el usuario está «offline» desde la perspectiva de tu app). Los access tokens de larga duración habilitan esta funcionalidad al permitir que el backend llame a las APIs de Google en nombre del usuario en cualquier momento.

Precaución

El modo offline REQUIERE un servidor backend. Al usar el modo offline, el frontend recibe información mínima (principalmente solo un server auth code). Sin un backend que intercambie este code por tokens e información del usuario, el modo offline no proporciona datos útiles a tu aplicación frontend.

Precaución

SocialLogin.refresh({ provider: 'google' }) hace necesitas trabajar con google.mode: 'offline'. En modo offline, el plugin solo te proporciona serverAuthCode, y tu backend debe intercambiar ese code por tokens de acceso y refresco, y luego actualizar esos tokens en el backend.

Si aún no sabes cuál elegir, ten en cuenta los siguientes escenarios:

1. Quieres que el usuario inicie sesión y, inmediatamente después, le emitirás un JWT personalizado. Tu app NO llamará a las APIs de Google

   En este caso, elige acceso online.

2. Tu app llamará a algunas APIs de Google desde el cliente, pero nunca desde el backend

   En este caso, elige acceso online

3. Tu app llamará a algunas APIs de Google desde el backend, pero solo cuando el usuario esté usando activamente la app

   En este caso, elige acceso online

4. Tu app revisará periódicamente el calendario del usuario, incluso cuando no esté usando activamente la app

   En este caso, elige acceso sin conexión

Un backend de ejemplo para acceso online

En esta parte del tutorial, te muestro cómo validar al usuario en tu backend.

Este ejemplo será muy simple y se basará en las siguientes tecnologías:

• TypeScript

• Hono

• fetch de JavaScript API

Puedes encontrar el code de este ejemplo aquí

Como puedes ver:

La idea es bastante simple. Envías una simple GET solicitud a https://www.googleapis.com/oauth2/v3/tokeninfo y esta te devuelve si el token es válido o no, y si lo es, te da el email del usuario. También te proporciona otra información sobre el token del usuario

A partir de ahí, podrías emitir al usuario tu propio JWT o algún tipo de cookie de sesión. Las posibilidades son infinitas para la implementación final de autenticación.

Si quieres llamar a las API de Google, recomendaría encarecidamente que eches un vistazo a El OAuth 2.0 Playground de Google. Desde ahí puedes ver fácilmente qué APIs puedes llamar.

Uso de acceso offline con tu propio backend

Para usar el acceso offline necesitarás lo siguiente:

• Un servidor HTTP

En este ejemplo, usaré las siguientes tecnologías para proporcionar acceso sin conexión en mi app:

• Hono

• Validador Hono Zod

• Zod

• Hono JWT

• LowDb (una base de datos sencilla)

El code de este ejemplo se puede encontrar aquí

En cuanto al code del cliente, se ve así:

import { Capacitor } from '@capacitor/core';
import { GoogleLoginOfflineResponse, SocialLogin } from '@capgo/capacitor-social-login';
import { usePopoutStore } from '@/popoutStore'; // <-- specific to my app

const baseURL = "[redacted]";

async function fullLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: '[redacted]',
      iOSClientId: '[redacted]',
      iOSServerClientId: 'The same value as webClientId',
      mode: 'offline' // <-- important
    }
  })
  const response = await SocialLogin.login({
    provider: 'google',
    options: {
      forceRefreshToken: true // <-- important
    }
  })

  if (response.provider === 'google') {
    const result = response.result as GoogleLoginOfflineResponse
    const res = await fetch(`${baseURL}/auth/google_offline`, {
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        serverAuthCode: result.serverAuthCode,
        platform: Capacitor.getPlatform()
      }),
      method: "POST"
    })

    if (res.status !== 200) {
      popoutStore.popout("Full google login failed", "check console");
      return
    }

    const { jwt } = await res.json();
    const userinfo = await fetch(`${baseURL}/auth/get_google_user`, {
      headers: {
        Authorization: `Bearer ${jwt}`
      }
    })
    if (userinfo.status !== 200) {
      popoutStore.popout("Full google (userinfo) login failed", "check console");
      return
    }
    popoutStore.popout("userinfo res", await userinfo.text());
  }
}

Fíjate en lo que falta aquí: no hay SocialLogin.refresh() llamada en la app. Es intencional. En el modo offline de Google, el refresh ocurre después de que tu backend intercambia serverAuthCode y almacene el refresh token de forma segura.

Continuar desde la configuración de Google Login

Si estás usando Configuración de Google Login para planificar los flujos de autenticación y de cuenta, conéctalo con Uso de @capgo/capacitor-social-login para la capacidad nativa en el uso de @capgo/capacitor-social-login, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para el detalle de implementación en la autenticación de dos factores.