Configuración de inicio de sesión de Google

Introducción

En esta guía, aprenderás a configurar el inicio de sesión con Google mediante Capgo Social Login. Necesitarás lo siguiente para configurar el inicio de sesión con Google:

• Una cuenta de Google

Configuración general

Este paso es necesario independientemente del plataforma que decidas utilizar.

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

Por favor, ve a

1. console.cloud.google.com Haz clic en el selector de proyecto
2. console.cloud.google.com
3. Si no tienes un proyecto ya creado, por favor crear un nuevo proyecto.
   1. Haga clic en New project
   2. Nombra tu proyecto y haz clic Create
   3. Asegúrate de que estás en el proyecto correcto
4. Comienza a configurar el OAuth consent screen

   1. Haga clic en la barra de búsqueda

      

   2. Buscar y OAuth consent screen haz clic en ella

      

   3. Configura la pantalla de consentimiento

      Nota

      Supongo que estás desarrollando una aplicación abierta al público, por lo que utilizaré el external tipo de usuario. Por favor selecciona el tipo de usuario que mejor se adapte a tus necesidades Y haz clic create

      Haz clic en create

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

   1. Comencemos con lo App Information

      
      • Por favor, escriba su App Name

        Advertencia

        ESTO SERÁ MOSTRADO A LOS USUARIOS

      • Introduzca el user support email

        Nota

        Puede aprender más sobre el correo electrónico de soporte aquí

      2. Usted PUEDE agregue el logo de la aplicación.

         

         Nota

         No es obligatorio y saltaré esta etapa

      3. Tú DEBES configurar la sección de configuración de dominio de la aplicación con el campo de dominios autorizados App domain

         

         No lo haré porque esto es solo una demostración simple que no lo hará

         __CAPGO_KEEP_0__ NO No se publicará, pero te recomiendo llenar esta sección.

      4. Tú TENES QUE proporcionar el correo electrónico del desarrollador

         

      5. Haz clic en save and continue

         
6. Configura los alcances

   1. Haz clic en add or remove scopes

      

   2. Selecciona los siguientes alcances y haz clic en update

      

   3. Haga clic save and continue

      
7. Agregar un usuario de prueba
   1. Haga clic en add users
   2. Ingrese su correo electrónico de Google, presione enter y haga clic add
   3. Haga clic save and continue
8. Haga clic back to dashboard
9. Envíe su aplicación para su verificación

   Nota

   Recomiendo encarecidamente que envíe su aplicación para su verificación. Esto está fuera del alcance de este tutorial. Puede aprender más aquí. Esto no es necesario para la prueba local, pero es necesario para la producción.

Diferencias entre acceso en línea y acceso sin conexión

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

	Acceso en línea	Acceso sin conexión
Requiere un backend	❌	✅
Token de acceso persistente	❌	✅
Configuración fácil	✅	❌

Nota

Modo offline El modo offline significa que su servidor de backend puede acceder a las API de Google incluso cuando el usuario no está utilizando activamente su aplicación (es decir, cuando el usuario está “sin conexión” desde la perspectiva de su aplicación). Los tokens de acceso persistentes habilitan esta funcionalidad permitiendo que el servidor de backend llame a las API de Google en nombre del usuario en cualquier momento.

Advertencia

El modo offline REQUIERE un servidor de backend. Al utilizar el modo offline, la interfaz de usuario recibe información mínima (principalmente solo una autenticación de servidor code). Sin un servidor para intercambiar este code por tokens y información del usuario, el modo offline no proporciona datos útiles a su aplicación de interfaz de usuario.

Advertencia

SocialLogin.refresh({ provider: 'google' }) no funciona con . En modo offline el plugin solo te da , y tu backend debe intercambiar ese __CAPGO_KEEP_0__ por tokens de acceso y refresco, luego refresca esos tokens en el backend. google.mode: 'offline'Si todavía no sabes cuál debes elegir, por favor considera los siguientes escenarios: serverAuthCode, and your backend must exchange that code for access and refresh tokens, then refresh those tokens on the backend.

En este caso, elige acceso en línea.

1. Tu aplicación llamará a algunas API de Google desde el cliente, pero nunca desde el backend

   En este caso, elige acceso en línea

2. Tu aplicación llamará a algunas API de Google desde el backend, pero solo cuando el usuario esté utilizando activamente la aplicación

   En este caso, elige acceso en línea

3. Tu aplicación llamará a algunas API de Google desde el backend, pero solo cuando el usuario esté utilizando activamente la aplicación

   En este caso, elige acceso en línea

4. Su aplicación verificará periódicamente el calendario del usuario, incluso cuando no esté utilizando activamente la aplicación

   En este caso, elija el acceso en línea

Un ejemplo de backend para el acceso en línea

En esta parte del tutorial, mostraré cómo validar al usuario en su backend

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

• Tiposcript

• Hono

• La función de fetch de Javascript API

Puede encontrar el code para este ejemplo aquí

Como puede ver:

La idea es bastante sencilla. Envías una solicitud simple a GET y esta te devuelve si el token es válido o no y si lo es, te da el correo electrónico del usuario. También te da algunas otras informaciones sobre el token del usuario https://www.googleapis.com/oauth2/v3/tokeninfo Google OAuth Playground mostrando información de respuesta de token con detalles del usuario

Si deseas llamar a Google __CAPGO_KEEP_0__’, te recomiendo fuertemente que mires a

If you do want to call Google API’s, I would strongly recommend looking at . Desde allí puedes ver fácilmente qué APIs puedes llamar.Usando acceso offline con tu propio backend

Sección titulada “Usando acceso offline con tu propio backend”

Usando acceso offline con tu propio backend

• Un servidor HTTP

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

• Hono

• Validador de Hono Zod

• Zod

• Hono JWT

• LowDb Una base de datos simple

El code para este ejemplo se puede encontrar aquí

En cuanto al cliente code, 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 aplicación. Eso es intencional. En modo de línea de tiempo de Google, la actualización ocurre después de que su servidor intercambia serverAuthCode y almacena el token de actualización de manera segura.

Sigue adelante desde Configuración de inicio de sesión de Google

Si estás utilizando Configuración de inicio de sesión de Google para planificar la autenticación y los flujos de cuenta, conecta Usando @capgo/capacitor-login-social para la capacidad nativa en Usando @capgo/capacitor-login-social, Usando @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social, @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 en dos factores para el detalle de implementación en Autenticación en dos factores.