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 Social Login. Necesitará lo siguiente para configurar el inicio de sesión de Google:

• Una cuenta de Google

Configuración general

Nota

Este paso es necesario independientemente del plataforma que decida utilizar.

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

1. Por favor, vaya a console.cloud.google.com
2. Seleccione el selector de proyecto
3. Si no tiene un proyecto creado, por favor crear un nuevo proyecto.
   1. Haga clic en New project
   2. Denomine su proyecto y haga clic Create
   3. Asegúrese de estar en el proyecto correcto
4. Comience a configurar el OAuth consent screen

   1. Haz clic en la barra de búsqueda

      

   2. Buscar por 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 tipo de usuario. Por favor selecciona el tipo de usuario que mejor se adapte a tus necesidades Y haz clic external Haz clic en create

      Selección del tipo de usuario de pantalla de consentimiento de OAuth con opciones de Exterior e Interno create

      
5. Rellene la información sobre su aplicación

   1. Comencemos con la sección de información de la aplicación que muestra el nombre de la aplicación y el campo de correo electrónico de soporte del usuario App Information

      
      • Advertencia App Name

        ESTO SERÁ MUESTREADO AL USUARIO

        Introduzca el

      • Nota user support email

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

        aquí __CAPGO_KEEP_0__

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

         

         Esto no es obligatorio y saltaré esta etapa

         Usted

      3. DEBERÍA configurar el Configuración de dominio de la aplicación con campo de dominios autorizados App domain

         

         Nota

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

      4. Tú DEBES proporcionar la dirección de 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. Seleccione los siguientes ámbitos y haga clic update

      

   3. Haga clic save and continue

      
7. Agregar un usuario de prueba
   1. Haga clic en add users
   2. Introduzca su correo electrónico de Google, haga clic en introdúcete y haga clic add
   3. Haga clic save and continue
8. Haz clic back to dashboard
9. Envía tu aplicación para su verificación

   Notas

   Te recomiendo fuertemente enviar tu aplicación para su verificación. Esto está fuera del alcance de este tutorial. Puedes 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 en línea

Existen varias formas de utilizar el inicio de sesión de Google con Capacitor. Aquí hay una tabla que resume las diferencias entre los dos:

	Acceso en línea	Acceso en modo offline
Requiere un backend	❌	✅
Token de acceso de larga duración	❌	✅
Configuración fácil	✅	❌

Notas

Modo offline significa que su 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 backend llame a las API de Google en nombre del usuario en cualquier momento.

Advertencia

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

Cuidado

SocialLogin.refresh({ provider: 'google' }) funciona no con google.mode: 'offline'En modo offline, el complemento solo te da serverAuthCode, y tu backend debe intercambiar ese code por tokens de acceso y refresco, y luego refrescar 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. Su aplicación llamará a algunas APIs de Google desde el backend, pero solo cuando el usuario esté utilizando activamente la aplicación

   En este caso, elija el acceso en línea

4. Su aplicación verificará periódicamente el calendario del usuario, incluso cuando él 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 allí

Como puedes ver:

La idea es bastante sencilla. Envías 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 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 en

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 sin conexión con tu propio backend

Usando acceso sin conexión 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

• Hono Zod validator

• Zod

• Hono JWT

• LowDb (una base de datos simple)

El code para este ejemplo se puede encontrar aquí

As for the client code, it looks like this:

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é falta aquí: no hay ninguna SocialLogin.refresh() llamada en la aplicación. Eso es intencional. En modo offline de Google, la actualización ocurre después de que su servidor intercambia y almacena el token de actualización de manera segura. serverAuthCode Sigue adelante desde Configuración de inicio de sesión de Google

Sección titulada “Sigue adelante desde Configuración de inicio de sesión de Google”

Configuración de inicio de sesión de Google para planificar la autenticación y los flujos de cuenta, conecta con Usando @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, @capgo/capacitor-login social para los detalles de implementación en @capgo/capacitor-login social @capgo/capacitor-clave de acceso para los detalles de implementación en @capgo/capacitor-clave de acceso @capgo/capacitor-autenticación biométrica nativa para los detalles de implementación en @capgo/capacitor-autenticación biométrica nativa, y autenticación de dos factores para los detalles de implementación en autenticación de dos factores.