Google Configuración de inicio de sesión

Introducción

En esta guía, aprenderá cómo configurar el inicio de sesión Google con el inicio de sesión social Capgo. Necesitará lo siguiente para configurar Google Iniciar sesión:

• Una cuenta Google

Configuración general

Note

Este paso es necesario independientemente de la plataforma que decida utilizar.

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

1. Vaya a console.cloud.google.com
2. Haga clic en el selector de proyectos.
3. Si aún no tienes un proyecto, crea un proyecto nuevo.
   1. Haga clic en Nuevo proyecto
   2. Asigne un nombre a su proyecto y haga clic en Create.
   3. Asegúrese de estar en el proyecto correcto
4. Comience a configurar el OAuth consent screen

   1. Haga clic en la barra de búsqueda

      

   2. Busque OAuth consent screen y haga clic en él.

      

   3. Configurar la pantalla de consentimiento

      Asumiré que estás desarrollando una aplicación abierta al público, por lo que usaré el tipo de usuario external. Seleccione el tipo de usuario que más le convenga Y haga clic en create

      Haga clic en create

      
5. Completa la información sobre tu aplicación.

   1. Comencemos con la “Información de la aplicación”.

      
      • Por favor escriba su Nombre de la aplicación :::precaución ESTO SERÁ MOSTRADO A LOS USUARIOS :::
      • Ingrese el correo electrónico de soporte al usuario

        Puede obtener más información sobre el correo electrónico de soporte aquí

      2. PUEDES agregar el logotipo de la aplicación.

         

         Esto no es obligatorio y me saltaré este paso.

      3. DEBE configurar el Dominio de la aplicación

         

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

      4. TIENES QUE proporcionar el correo electrónico del desarrollador.

         

      5. Haga clic en guardar y continuar

         
6. Configurar los ámbitos

   1. Haga clic en “agregar o eliminar ámbitos”.

      

   2. Seleccione los siguientes ámbitos y haga clic en update

      

   3. Haga clic en guardar y continuar

      
7. Agregue un usuario de prueba
   1. Haga clic en agregar usuarios
   2. Ingrese su correo electrónico de Google, presione Enter y haga clic en add
   3. Haga clic en guardar y continuar
8. Haga clic en volver al panel
9. Envíe su aplicación para verificación

   Note

   Recomiendo encarecidamente enviar la aplicación para verificación. Esto está fuera del alcance de este tutorial. Puede obtener más información aquí. No es necesario para pruebas locales, pero sí para producción.

Diferencias entre acceso online y acceso offline

Existen varias formas de usar Google Login con Capacitor. Esta tabla resume las diferencias entre ambas:

	Acceso online	Acceso offline
Requiere backend	❌	✅
Token de acceso duradero	❌	✅
Configuración sencilla	✅	❌

Note

El modo offline significa que tu backend puede acceder a las APIs de Google incluso cuando el usuario no está usando activamente tu app. Los tokens de larga duración hacen posible esta funcionalidad al permitir que el backend llame a las APIs de Google en nombre del usuario en cualquier momento.

Caution

El modo offline REQUIERE un servidor backend. Cuando usas el modo offline, el frontend recibe información mínima, principalmente un código de autenticación del servidor. Sin un backend que intercambie ese código por tokens e información del usuario, el modo offline no aporta datos útiles a tu aplicación frontend.

Si todavía no sabes cuál elegir, considera estos escenarios:

1. Quieres que el usuario inicie sesión y después emitirle 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 comprobará periódicamente el calendario del usuario, incluso cuando no esté usando activamente la app

   En este caso, elige acceso offline.

Un backend de ejemplo para acceso online

En esta parte del tutorial mostraré cómo validar al usuario en tu backend.

Este ejemplo será muy sencillo y estará basado en las siguientes tecnologías:

• TypeScript

• Hono

• JavaScript Fetch API

Puedes encontrar el código de este ejemplo aquí

Como puedes ver:

La idea es bastante simple. Envías una petición GET a https://www.googleapis.com/oauth2/v3/tokeninfo y eso te devuelve si el token es válido o no. Si lo es, también te da el correo electrónico del usuario y otra información sobre su token.

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

Si quieres llamar a las APIs de Google, te recomiendo revisar Google OAuth 2.0 Playground. Desde ahí puedes ver fácilmente qué APIs puedes llamar.

Usando el acceso offline con tu propio backend

Para utilizar el acceso online necesitarás lo siguiente:

• Un servidor HTTP

En este ejemplo, utilizaré las siguientes tecnologías para proporcionar acceso offline en mi aplicación:

• Hono

• Validador Zod de Hono

• Zod

• Hono JWT

• LowDb (una base de datos simple)

El código de este ejemplo se puede encontrar aquí

En cuanto al código 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());
  }
}