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 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 console.cloud.google.com
2. Haz clic en el selector de proyecto
3. Si no tienes un proyecto ya creado, por favor crea un nuevo proyecto.
   1. Haz clic en New project
   2. Nombra tu proyecto y haz clic Create
   3. Asegúrate de estar 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é external Tipo de usuario. Seleccione el tipo de usuario que le convenga mejor Y haga clic create

      Haga clic en create

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

   1. Comencemos con la sección App Information

      
      • Por favor, escriba su App Name

        Cuidado

        ESTO SERÁ MOSTRADO A LOS USUARIOS

      • Ingrese el user support email

        Nota

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

      2. Tú DEBES poder agregar el logo de la aplicación.

         

         Nota

         Esto no es obligatorio y saltaré esta etapa

      3. Tú DEBES configure la App domain

         

         Nota

         No lo haré porque esto es solo una demostración simple que no __CAPGO_KEEP_0__ será publicada, pero recomiendo encarecidamente llenar esta sección.

      4. Tienes que proporcionar el correo electrónico del desarrollador sección de información de contacto del desarrollador con campo de correo electrónico

         

      5. configure la save and continue

         
6. Configurar los alcances

   1. Haga clic en add or remove scopes

      

   2. Seleccione los siguientes alcances 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, 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 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. A continuación, se muestra 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	✅	❌

Nota

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á "offline" 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

Modo offline REQUIERE un servidor de backend. Cuando se utiliza el modo offline, el frontend recibe información mínima (principalmente solo una autenticación de servidor code). Sin un backend para intercambiar esta code por tokens y información de usuario, el modo offline no proporciona datos útiles a tu aplicación de frontend.

Advertencia

SocialLogin.refresh({ provider: 'google' }) funciona no con google.mode: 'offline'. En modo offline, el plugin solo te da serverAuthCode, y tu servidor debe intercambiar ese code por tokens de acceso y refresco, y luego refrescar esos tokens en el servidor.

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

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

   En este caso, elija el acceso en línea.

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

   En este caso, elija el acceso en línea.

3. Su aplicación llamará a algunas API de Google desde el servidor, pero solo cuando el usuario esté utilizando la aplicación de manera activa.

   En este caso, elija el acceso en línea.

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

   En este caso, elija el acceso sin conexión.

Un ejemplo de servidor para el acceso en línea.

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

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

• Tiposcript

• Hono

• La función fetch de Javascript API

Puedes encontrar el code para este ejemplo aquí

Como puedes ver:

La idea es bastante simple. 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 alguna otra información 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 recomendaría fuertemente que mires a

API Jardín de Juego de OAuth 2.0 de Google. Desde allí, puedes ver fácilmente qué APIs puedes llamar.

Usando acceso en línea con tu propio backend

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)

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

Fíjese en qué está faltando 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.