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:

• 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. Haz clic en el selector de proyecto
3. Si no tienes un proyecto ya creado, por favor crear un nuevo proyecto.
   1. Haz 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 por OAuth consent screen y haga clic en ella

      

   3. Configurar la pantalla de consentimiento

      Nota

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

      Haga clic en 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 campo de nombre de la aplicación y el correo electrónico de soporte del usuario App Information

      
      • Advertencia App Name

        ESTO SERÁ MOSTRADO A LOS USUARIOS

        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 PUEDE agregar el logo de la aplicación.

         

         Nota

         Esto no es obligatorio y saltaré esta etapa

      3. Usted DEBE configurar el App domain

         

         Nota

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

      4. proporcionar la dirección de correo electrónico del desarrollador Sección de información de contacto del desarrollador con campo de correo electrónico Haz clic en

         

      5. Configura los alcances save and continue

         
6. botón Guardar y Continuar en la parte inferior del formulario

   1. Configura los alcances 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. Ingrese su correo electrónico de Google, haga clic en ingresar y haga clic add
   3. Haga clic save and continue
8. Haga clic back to dashboard
9. Enviar 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 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 Offline
Requiere un backend	❌	✅
Token de acceso de larga duración	❌	✅
Configuración fácil	✅	❌

Nota

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

Cuidado

El modo Offline REQUIERE un servidor backend. Cuando se utiliza el modo offline, la interfaz de usuario recibe información mínima (principalmente solo una autenticación de servidor code). Sin un servidor backend 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.

Cuidado

SocialLogin.refresh({ provider: 'google' }) no funciona con En modo offline el plugin solo te da google.mode: 'offline'y tu servidor debe intercambiar ese __CAPGO_KEEP_0__ por tokens de acceso y refresco, luego refresca esos tokens en el servidor. serverAuthCode, and your backend must exchange that code for access and refresh tokens, then refresh those tokens on the backend.

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

1. En este caso, elige acceso en línea.

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

2. En este caso, elige acceso en línea

   Cuidado

3. Tu 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, elige el 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 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 llamada de fetch de Javascript API

Puedes encontrar el code para este ejemplo As puedes ver:

VS __CAPGO_KEEP_0__ mostrando autenticación de Google __CAPGO_KEEP_1__ que verifica tokens

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 GET Google OAuth Playground mostrando información de respuesta de token con detalles del usuario https://www.googleapis.com/oauth2/v3/tokeninfo Desde allí, podrías emitir al usuario con tu propio JWT o emitir alguna clase de cookie de sesión. Las posibilidades son infinitas, para la implementación de autenticación final.

Google’s OAuth 2.0 Playground

If you do want to call Google API’s, I would strongly recommend looking at Usando acceso offline con tu propio backendhere

As you can see:

Para usar el acceso en línea necesitarás lo siguiente:

• Un servidor HTTP

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

• Hono

• Hono validador Zod

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

Fíjese en lo que falta aquí: no hay SocialLogin.refresh() llamada en la aplicación. Eso es intencional. En modo de línea aérea de Google, el refresco ocurre después de que su servidor intercambia serverAuthCode y almacena el token de refresco de manera segura.

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

Si está utilizando Configuración de inicio de sesión de Google para planificar la autenticación y los flujos de cuenta, conecte con Usando @capgo/capacitor-login-social para la capacidad nativa en Usando @capgo/capacitor-login-social, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para los detalles de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para los detalles de implementación en @capgo/capacitor-native-biometric, y Autenticación en dos factores para los detalles de implementación en Autenticación en dos factores.