Saltar al contenido

Inicio de sesión con Google en Android

GitHub

En esta guía, aprenderás a configurar el inicio de sesión de Google con Capgo Social Login para Android. Supongo que ya has leído la guía de configuración general.

En esta parte, aprenderás a configurar el inicio de sesión de Google en Android.

  1. Crear un identificador de cliente Android.

    1. Haga clic en la barra de búsqueda

      barra de búsqueda de Google Console
    2. Buscar por credentials y haga clic en el APIs and Services uno (número 2 en la captura de pantalla)

      Resultados de búsqueda mostrando la opción de credenciales con APIs y Servicios destacados
    3. Haga clic en el create credentials

      Crear botón de credenciales en el Console de Google
    4. Seleccionar OAuth client ID

      Opción de ID de cliente OAuth en el menú de creación de credenciales
    5. Seleccionar el Android tipo de aplicación

      Selección del tipo de aplicación con la opción de Android destacada
    6. Abrir Android Studio

    7. En la parte inferior de la navegación, encuentre la sección de Gradle Scripts

      Scripts de Gradle en el navegador de proyectos de Android Studio
    8. Encuentre build.gradle para el módulo app

      archivo build.gradle (Módulo: app) en la sección de Scripts de Gradle
    9. Copie el android.defaultConfig.applicationIdEste será tu package name en el console de Google

      Archivo Build.gradle mostrando la configuración de applicationId
    10. Ahora, abre la terminal. Asegúrate de que estás en el android de tu aplicación y ejecuta ./gradlew signInReport

    Terminal mostrando comando gradlew signInReport
    1. Desplázate hacia arriba de este comando. Deberías ver lo siguiente. Copie el SHA1.
    Salida del terminal mostrando huella de certificado SHA1
    1. Ahora, vuelve a la consola de Google. Ingresa tu applicationId como el Package Name y tu SHA1 en el campo de certificado y haz clic create
    Crear un cliente Android con el nombre de paquete y los campos SHA1 rellenos
  2. Crear un cliente web (esto es necesario para Android)

    1. Ir a la Create credentials página en el Console de Google

    2. Establecer el tipo de aplicación a Web

      Selección del tipo de aplicación con la opción Web destacada
    3. Hacer clic en Create

      Crear un cliente web con el botón Crear en la parte inferior
    4. Copiar el ID del cliente, lo utilizarás como el webClientId en tu JS/TS code

      Detalles del ID del cliente mostrando el ID del cliente web para copiar
  3. Modificar tu MainActivity

    1. Por favor, abra su aplicación en Android Studio. Puede ejecutar cap open android

    2. Encuentre MainActivity.java

      1. Abra el app carpeta

        Encuentre la carpeta de la aplicación en el navegador de proyectos de Android Studio
      2. Encuentre java

        Encuentre la carpeta Java en la estructura de proyecto de Android Studio
      3. Encuentre su MainActivity.java y haga clic en él

        archivo de archivo MainActivity.java en la estructura de paquete
    3. Modifique MainActivity.java. Por favor, agregue lo siguiente code

      import ee.forgr.capacitor.social.login.GoogleProvider;
      import ee.forgr.capacitor.social.login.SocialLoginPlugin;
      import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
      import com.getcapacitor.PluginHandle;
      import com.getcapacitor.Plugin;
      import android.content.Intent;
      import android.util.Log;
      import com.getcapacitor.BridgeActivity;
      // ModifiedMainActivityForSocialLoginPlugin is VERY VERY important !!!!!!
      public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {
      @Override
      public void onActivityResult(int requestCode, int resultCode, Intent data) {
      super.onActivityResult(requestCode, resultCode, data);
      if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
      PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
      if (pluginHandle == null) {
      Log.i("Google Activity Result", "SocialLogin login handle is null");
      return;
      }
      Plugin plugin = pluginHandle.getInstance();
      if (!(plugin instanceof SocialLoginPlugin)) {
      Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
      return;
      }
      ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
      }
      }
      // This function will never be called, leave it empty
      @Override
      public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
      }
    4. Guardar el archivo

  4. Utilice el inicio de sesión de Google en su aplicación

    1. Primero, importe SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';
    2. Llame a initialize. Debe llamarse solo una vez.

      // onMounted is Vue specific
      // webClientId is the client ID you got in the web client creation step not the android client ID.
      onMounted(() => {
      SocialLogin.initialize({
      google: {
      webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
      }
      })
      })
    3. Llame a SocialLogin.loginCrear un botón y ejecute el siguiente code al hacer clic.

      const res = await SocialLogin.login({
      provider: 'google',
      options: {}
      })
      // handle the response
      console.log(JSON.stringify(res))
  5. Configura el emulador para la prueba

    1. Ve a Device manager y haz clic en el botón de más

      Administrador de dispositivos en Android Studio con el botón de más destacado
    2. Crear un dispositivo virtual

      Botón de Crear Dispositivo Virtual en la configuración de dispositivo virtual
    3. Selecciona cualquier dispositivo con un Play Store icono

      Selección de hardware mostrando dispositivos con soporte para la Tienda de aplicaciones

      Como puedes ver, el pixel 8 soporta los Play Store servicios

    4. Hacer clic next

      Botón siguiente en el asistente de creación de dispositivos
    5. Asegúrate de que la imagen del sistema sea del tipo Google Play. DEBE SER de tipo Google Play

      Selección de imagen del sistema mostrando imágenes de tipo Google Play
    6. Hacer clic en siguiente

      Botón siguiente en la pantalla de selección de imagen del sistema
    7. Confirma tu dispositivo. Puedes nombrar tu emulador como prefieras

      Pantalla de verificación de configuración de dispositivo con botón Finalizar
    8. Ir a Device Manager y arranca tu simulador

      Administrador de dispositivos con dispositivo virtual listado y botón Reproducir
    9. Después de que arranque el simulador, ve a sus ajustes

      Emulador de Android mostrando aplicación de ajustes
    10. Ir a Google Play

    Pantalla de ajustes con opción de Google Play
    1. Haz clic Update y espera unos 60 segundos
    Pantalla de actualización de Google Play con el botón Actualizar
  6. Prueba tu aplicación

    Si has hecho todo correctamente, deberías ver el flujo de inicio de sesión de Google funcionando correctamente:

    Demostración del flujo de inicio de sesión de Google en Android mostrando el proceso de inicio de sesión y la autenticación exitosa

Si tienes algún problema, compara primero la configuración de tu aplicación con los valores de la consola de Google Cloud. Los errores de inicio de sesión de Google en Android suelen estar causados por una coincidencia de nombre de paquete, SHA-1 o ID de cliente.

En Android, este plugin utiliza el Administrador de credenciales de Google (androidx.credentials y Inicia sesión con Google), no la versión legada GoogleSignInClient API. Errores de Logcat como GetCredentialCustomException: [28444] Developer console is not set up correctly vienen de esa pila.

Filtrar Logcat con GoogleProvider o CapgoSocialLogin ¿Qué alternativas tenemos? webClientId ¿Qué alternativas tenemos?

¿Qué alternativas tenemos?

¿Qué alternativas tenemos?

¿Qué alternativas tenemos?

¿Qué alternativas tenemos?¿Qué alternativas tenemos?¿Qué alternativas tenemos?
Configuración de Google Cloud necesariaServidor / ID de token de audienciawebClientId in SocialLogin.initialize()
Android, uno por clave de firmaPrueba que su APK está autorizada para llamar a Google solo en la consola de Google Cloud. No pase este ID a webClientId

Un error común es utilizar el ID de cliente de Android como webClientId. El Administrador de credenciales requiere el ID de cliente web allí. El cliente de Android solo necesita el nombre de paquete correcto y la SHA-1 registrados en la consola.

Cree un cliente OAuth de Android para cada certificado que firma los builds que prueba:

  • Debug: desde ./gradlew signingReport para la variante de depuración.
  • Release: desde el APK o AAB que realmente instala.
  • Play App Signing: desde la consola de Play > Integridad de la aplicación > Certificado de clave de firma de la aplicación. Esto es necesario para los builds de la tienda de aplicaciones incluso si su SHA-1 de clave de carga es ya registrado.

El applicationId en android/app/build.gradle debe coincidir exactamente con el nombre del paquete de cliente OAuth de Android, incluyendo cualquier .debug sufijo.

Si la pantalla de consentimiento de OAuth está en modo de prueba, agregue cada cuenta de Google que pruebe en Usuarios de prueba > Público. No se requiere publicar la aplicación en Producción para email y profile permisos. Los enlaces de activos digitales (assetlinks.json) no se requieren para Iniciar sesión con Google a través del Administrador de credenciales.

Los cambios en Cloudflare pueden tardar hasta unas pocas horas en propagarse.

Error 28444: El panel de desarrolladores no está configurado correctamente

Sección titulada “Error 28444: El panel de desarrolladores no está configurado correctamente”

Esto sucede casi siempre cuando Google rechaza la combinación del certificado de firma de APK instalado, el nombre del paquete y webClientId. Trabaja a través de esta lista de verificación:

  1. Confirmar webClientId es el ID del cliente de la aplicación web y termina con .apps.googleusercontent.com.
  2. Ejecuta la aplicación, reproduce el error y lee Logcat para GoogleProvider, signingSha1=, y package=.
  3. En Google Cloud Console > Credenciales, abre tu cliente OAuth de Android y verifica el nombre de paquete exacto y SHA-1.
  4. Si estás probando una versión de lanzamiento, registra el SHA-1 de esa versión, no solo el keystore de depuración.
  5. Si la aplicación se distribuye a través de la Tienda de Play, también registra el SHA-1 de firma de Play.
  6. Asegúrate de que los clientes web y Android estén en el mismo proyecto de Google Cloud.
  7. Si la pantalla de consentimiento está en Pruebas, confirma que el cuenta de Google es un usuario de prueba.
  8. Espera y vuelve a intentarlo después de cambios en la consola.

USER_CANCELLED Después de seleccionar una cuenta en una compilación de depuración configurada incorrectamente, todavía puede haber un error de coincidencia de SHA-1 o ID de cliente. Corrige la configuración de la consola antes.

Extrae la SHA-1 de la compilación que instalas.

Extraer SHA-1 de la compilación que instalas

Compilaciones de depuración o locales:

Ventana de terminal
cd android && ./gradlew signingReport

APK de lanzamiento firmado:

Ventana de terminal
keytool -printcert -jarfile android/app/release/app-release.apk

Añade esa SHA-1 a un cliente de OAuth de Android con el nombre de paquete correspondiente, reinstala el mismo APK firmado y prueba de nuevo:

Ventana de terminal
adb install android/app/release/app-release.apk

Los tokens están anidados bajo result:

const login = await SocialLogin.login({ provider: 'google' });
const idToken = login.result?.idToken;

Para Firebase Auth, crea credenciales con eso idToken y utiliza el ID del cliente web como webClientId en initialize.

Si no puedes obtener el certificado SHA-1 de desarrollo, prueba un keystore personalizado. Este comentario de problema explica cómo agregar un keystore a tu proyecto.

Sigue adelante desde Google Login en Android

Sección titulada “Continúa desde Google Login en Android”

Si estás utilizando Google Login en Android 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-privada para el detalle de implementación en @capgo/capacitor-clave-privada @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.