Pular al contenido

Google Login en Android

GitHub

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

En esta parte, aprenderá 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 credenciales en Google Console
    4. Seleccionar OAuth client ID

      Opción de identificador de cliente OAuth en el menú de creación de credenciales
    5. Seleccione el tipo de aplicación Android Tipo de aplicación

      Selección de tipo de aplicación con opción de Android destacada
    6. Abra Android Studio

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

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

      archivo de build.gradle (Módulo: app) en la sección de Gradle Scripts
    9. Copie el android.defaultConfig.applicationIdEsto será su package name en la consola 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 carpeta de tu aplicación y ejecuta ./gradlew signInReport

    Terminal mostrando el comando gradlew signInReport
    1. Desplázate hacia la parte superior de este comando. Deberías ver lo siguiente. Copia el SHA1.
    Salida de la terminal mostrando la huella digital SHA1 del certificado
    1. Ahora, vuelve a la Consola de Google. Ingresa tu applicationId como el Package Name y tu SHA1 en el campo del certificado y haz clic create
    Formulario de creación de cliente Android con campos de nombre de paquete y SHA1 rellenados
  2. Crea un cliente web (esto es necesario para Android)

    1. Ve a la Create credentials página en Google Console

    2. Establecer el tipo de aplicación a Web

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

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

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

    1. Por favor, abre tu aplicación en Android Studio. Puedes ejecutar cap open android

    2. Buscar MainActivity.java

      1. Abrir el app carpeta

        Carpeta de la aplicación en el navegador de proyecto de Android Studio
      2. Buscar java

        Carpeta Java en la estructura del proyecto de Android Studio
      3. Encuentre su MainActivity.java y haga clic en ella

        archivo MainActivity.java en la estructura de paquete
    3. Modificar 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, importa SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';
    2. Llamar a initialize. Esto 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. Llamar SocialLogin.login. Crea un botón y ejecuta el siguiente code al hacer clic.

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

    1. Ir a Device manager y haga 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 Crear Dispositivo Virtual en Configuración de Dispositivo Virtual
    3. Selecciona cualquier dispositivo con un Play Store ícono

      Selección de hardware mostrando dispositivos con soporte de tienda de Play

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

    4. Haga clic next

      Botón Next en el asistente de creación de dispositivos
    5. Asegúrese de que la imagen del sistema sea del tipo Google Play. DEBE SER DEL TIPO ser del tipo Google Play

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

      Botón Next en la pantalla de selección de imagen del sistema
    7. Verifique su dispositivo. Puede nombrar a su emulador como prefiera

      Pantalla de verificación de configuración de dispositivo con botón Finish
    8. Acceda a Device Manager y arranque su simulador

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

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

    Pantalla de ajustes con opción de Google Play
    1. Haga clic Update y espere unos 60 segundos
    Pantalla de actualización de Google Play con botón de actualización
  6. Pruebe su aplicación

    Si hizo todo correctamente, debería ver el flujo de inicio de sesión de Google funcionando correctamente:

    Demo del flujo de inicio de sesión de Google en Android que muestra 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 del Console de Cloud Google. 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. Los errores de Logcat como GetCredentialCustomException: [28444] Developer console is not set up correctly proceden de esa pila

Filtrar Logcat con GoogleProvider o CapgoSocialLogin After un intento fallido de inicio de sesión. El plugin registra el nombre de tu paquete, el SHA-1 de firma y un valor oculto webClientId para que puedas compararlos con la consola de Google Cloud.

Necesitas dos tipos de identificadores de cliente OAuth 2.0 en el mismo proyecto de Google Cloud:

Tipo de clienteUsado paraDónde va
Aplicación webAuditorio de tokens de ID del servidor / ID de clientewebClientId en SocialLogin.initialize()
En Android, uno por clave de firmaVerifica que tu APK está autorizada para llamar a GoogleSolo el Console de Cloud Cloud está permitido. No pases este ID a webClientId

Un error común es usar el ID del cliente de Android como webClientIdEl Administrador de credenciales requiere el ID del cliente Web allí. El cliente de Android solo necesita el paquete correcto y el SHA-1 registrado en la consola.

Crea un cliente OAuth de Android para cada certificado que firmas los builds que pruebas:

  • Debug: desde ./gradlew signingReport para la variante de depuración.
  • Release: desde el APK o AAB que realmente instalas.
  • Integridad de la aplicación: desde el Console 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 Juegos incluso si tu SHA-1 de la clave de carga es ya registrado.

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

Si la pantalla de consentimiento de OAuth está en modo de prueba, agregue cada cuenta de Google que pruebe en la sección > Usuarios de prueba. No es necesario publicar la aplicación en Producción para email y profile permisos. Los enlaces de activos digitales (assetlinks.json) no son necesarios 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 control del desarrollador no está configurado correctamente

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

Esto sucede casi siempre cuando Google rechaza la combinación del certificado de firma de APK instalado, el nombre de paquete y webClientIdPase por este checklist:

  1. Confirmar webClientId es el ID de 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 Consola de Cloud de Google > 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 Juegos, también registra el SHA-1 de firma de la aplicación de la Tienda.
  6. Asegúrate de que los clientes Web y Android vivan en el mismo proyecto de la Consola de Cloud de Google.
  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 versión de depuración configurada incorrectamente todavía puede ser un error de coincidencia de SHA-1 o ID de cliente. Arregla la configuración de la consola arriba primero.

Extrae el SHA-1 de la versión que instalas

Sección titulada “Extraer SHA-1 del paquete que se instala”

Edición de depuración o de local:

Ventana de terminal
cd android && ./gradlew signingReport

APK de lanzamiento firmado:

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

Agregar ese SHA-1 a un cliente OAuth de Android con el mismo nombre de paquete, reinstalar el mismo APK firmado, y probar 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, cree credenciales con ese idToken y utilice el ID del cliente web como webClientId en initialize.

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

Si está utilizando Google Login en Android para planificar la autenticación y flujos de cuenta, conectarlo 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-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa, y Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores.