Configuración de inicio de sesión de Google

Introduction

In this guide, you will learn how to setup Google Login with Capgo Social Login. You will need the following in order to setup Google Login:

• Una cuenta de Google

Una cuenta de Google

Note

Este paso es obligatorio, independientemente del plataforma que decidas utilizar.

En esta sección, 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 creado aún, 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. Comience 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 él

      

   3. Configure la pantalla de consentimiento

      Nota

      Me asumiré que estás desarrollando una aplicación abierta al público, por lo que utilizaré el external tipo de usuario. Por favor, 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 el App Information

      
      • Por favor, ingresa tus App Name

        Caution

        Se mostrará a los usuarios

      • Nota user support email

        Nota

        You can learn more about the support email aquí

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

         

         Nota

         No es obligatorio y saltaré esta etapa

      3. Tú DEBERÍAS configura la App domain

         

         Nota

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

      4. Tú Tener que proporcionar la dirección de correo electrónico del desarrollador

         

      5. Haga 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 update

      

   3. Haz clic save and continue

      
7. Agregar un usuario de prueba
   1. Haz clic en add users
   2. Ingresa tu correo electrónico de Google, presiona enter y haz clic add
   3. Haz clic save and continue
8. Haz clic back to dashboard
9. Presenta tu aplicación para su verificación

   Nota

   Te recomiendo encarecidamente presentar 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 fuera de línea

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 fuera de línea
Requiere un backend	❌	✅
Token de acceso de larga duración	❌	✅
Easy setup	✅	❌

Nota

Modo fuera de línea 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á “fuera de línea” 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.

Cuidado

Modo offline REQUIERE un servidor de backend. Cuando se utiliza el modo de trabajo sin conexión, 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 de trabajo sin conexión no proporciona datos útiles a su aplicación de frontend.

Cuidado

SocialLogin.refresh({ provider: 'google' }) hace no funciona con google.mode: 'offline'En modo offline, el plugin solo te proporciona serverAuthCode, y su backend debe intercambiar ese code por tokens de acceso y actualización, y luego refrescar esos tokens en el backend.

Si todavía no sabes cuál elegir, considera los siguientes escenarios.

1. Quiere que el usuario inicie sesión, inmediatamente después de lo cual le emitirá un JWT personalizado. Su aplicación NO llamará a las API de Google

   In este caso, elija acceso en línea.

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

   In este caso, elija acceso en línea.

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

   In este caso, elija acceso en línea.

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

   In este caso, elija acceso en línea.

Un ejemplo de servidor para 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

• Inicio

• La función fetch de Javascript API

Puedes encontrar el code para este ejemplo Aquí

Como puedes ver:

La idea es bastante sencilla. Envías una solicitud simple a GET solicitud a https://www.googleapis.com/oauth2/v3/tokeninfo and this returns you whether the token is valid or not and if it it is, it gives you the email of the user. It also gives you some other info about the user token

From there, you could issue the user with your own JWT or issue some sort of session cookie. The possibilities are endless, for the final auth implementation.

Si deseas llamar a Google API’, te recomiendo buscar Jardín de juego de OAuth 2.0 de GoogleDesde allí, puede ver fácilmente qué APIs puede llamar.

Usando acceso sin conexión con su propio backend

Para utilizar el acceso sin conexión, necesitará lo siguiente:

• Un servidor HTTP

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

• Hono

• Hono Zod validador

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

Nota lo que falta aquí: no hay SocialLogin.refresh() Actualiza en la aplicación. Eso es intencional. En modo offline de Google, se refresca después de que tu backend intercambia. serverAuthCode y almacena el token de actualización de manera segura.

Keep going from Google Login Setup

Si estás 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-login-social para el detalle de implementación en @capgo/capacitor-login-social @capgo/capacitor-clave-secuencial para el detalle de implementación en @capgo/capacitor-clave-secuencial @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa, y Dos factor de autenticación para el detalle de implementación en Dos factor de autenticación.