Configuración de inicio de sesión de Google

Introducción

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

• Cuenta de Google

Configuración general

Nota

Este paso es obligatorio independientemente del plataforma que decidas utilizar.

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

1. Por favor, ve a https://console.cloud.google.com
2. Haga clic en el selector de proyecto
3. Si no tienes un proyecto ya creado, por favor crea 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. Haz clic en la barra de búsqueda

      

   2. Busca OAuth consent screen y 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 ti Y haz clic en create

      Haz clic en create

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

   1. Comencemos con la sección App Information

      
      • Por favor, escribe tu App Name

        Cuidado

        ESTO SERÁ MOSTRADO A LOS USUARIOS

      • Ingrese el user support email

        Nota

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

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

         

         Nota

         Esto no es obligatorio y saltaré este paso

      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 se publicará, pero te recomiendo fuertemente llenar esta sección.

         Tú Tienes QUE __CAPGO_KEEP_0__

      4. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ Proporcione el correo electrónico del desarrollador

         

      5. Haga clic en save and continue

         
6. Configure los alcances

   1. Haga clic en add or remove scopes

      

   2. Seleccione los siguientes alcances y haga clic update

      

   3. Haga clic en save and continue

      
7. Agregue 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. Presente su aplicación para verificación

   Nota

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

Diferencias entre acceso en línea y acceso fuera de línea

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

	Acceso en línea	Acceso fuera de línea
Requiere un backend	❌	✅
Token de acceso largo plazo	❌	✅
Configuración fácil	✅	❌

Nota

Modo de línea de oficina 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 de larga duración habilitan esta funcionalidad permitiendo que el servidor llame a las API de Google en nombre del usuario en cualquier momento.

Advertencia

El modo de línea de oficina REQUIERE un servidor de backend. Al utilizar el modo de línea de oficina, 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 de línea de oficina no proporciona datos útiles a su aplicación de interfaz de usuario.

Advertencia

SocialLogin.refresh({ provider: 'google' }) funciona no funciona con google.mode: 'offline'. En modo de línea de oficina, el plugin solo te da serverAuthCodey su backend debe intercambiar ese code por tokens de acceso y refresco, luego refresque esos tokens en el backend.

Si todavía no sabes cuál debes elegir, por favor considera los siguientes escenarios:

1. Quieres que el usuario se registre, inmediatamente después vas a emitirle un JWT personalizado. Tu aplicación NO llamará a las API de Google

   En este caso, elige acceso en línea.

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

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. Tu aplicación verificará periódicamente el calendario del usuario, incluso cuando no esté utilizando activamente la aplicación

   En este caso, elige acceso sin conexión

Un ejemplo de backend para acceso en línea

In 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:

• TypeScript

• Hono

• La solicitud de fetch de Javascript API

Puede encontrar el code para este ejemplo aquí

Como puede ver:

La idea es bastante simple. Envía una solicitud simple a GET y esto 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 alguna otra información sobre el token del usuario https://www.googleapis.com/oauth2/v3/tokeninfo Este ejemplo será muy simple y se basará en las siguientes tecnologías:

Desde allí, podrías emitir al usuario con su propio JWT o emitir alguna clase de cookie de sesión. Las posibilidades son infinitas, para la implementación de autenticación final.

Si deseas llamar a Google API’, te recomendaría fuertemente echar un vistazo a El juego de playground de OAuth 2.0 de Google. Desde allí puedes ver fácilmente qué APIs puedes llamar.

Usando acceso offline con tu propio backend

Para usar el acceso offline necesitarás lo siguiente:

• Un servidor HTTP

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

• Hono

• Validador de Hono Zod

• Zod

• Hono JWT

• LowDb (una base de datos simple)

La 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());
  }
}

Observa qué está faltando aquí: no hay SocialLogin.refresh() llamada en la aplicación. Eso es intencional. En modo offline de Google, el refresco ocurre después de que su servidor intercambia serverAuthCode y almacena el token de refresco de manera segura.

Sigue adelante desde la 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 con Usando @capgo/capacitor-login-social para la capacidad nativa en Usando @capgo/capacitor-login-social @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social @capgo/capacitor-clave-llave para el detalle de implementación en @capgo/capacitor-clave-llave @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores.