Saltar al contenido

Iniciar 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. 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

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

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

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

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

      Sección de scripts Gradle en el navegador del proyecto 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.applicationId. This will be your package name en el 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 arriba de este comando. Deberías ver lo siguiente. Copia el SHA1.
    Salida del terminal mostrando la huella de certificado SHA1
    1. Ahora, vuelve a la consola de Google. Introduce tu applicationId como el Package Name y tu SHA1 en el campo de 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. 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. Haga clic Create

      formulario de creación de cliente Web con el botón Crear en la parte inferior
    4. Copie el identificador del cliente, lo utilizará como el webClientId en su JS/TS code

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

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

    2. Find MainActivity.java

      1. Abrir el app carpeta

        App folder in Android Studio project navigator
      2. Buscar java

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

        archivo MainActivity.java en la estructura de paquete
    3. Modificar MainActivity.javaPor 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. Utiliza el inicio de sesión de Google en tu 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.loginCrea 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. Configura el emulador para la prueba

    1. Inicia sesión 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 ícono

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

      As puedes ver, el pixel 8 admite los Play Store servicios

    4. Haz clic next

      Next button in device creation wizard
    5. Asegúrese de que la imagen del sistema sea del tipo Google Play. Debes DEBE SER Google Play

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

      Siguiente botón en pantalla de selección de imagen del sistema
    7. Verifica tu dispositivo. Puedes llamar a tu emulador como prefieras.

      Pantalla de verificación de configuración del dispositivo con botón Finalizar
    8. Ir a Device Manager y arrancar 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. Hacer clic Update y esperar unos 60 segundos
    Pantalla de actualización de Google Play con 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:

    Demo de 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 Google Cloud. Los errores de inicio de sesión de Google en Android suelen ser causados por un nombre de paquete, una huella SHA-1 o un ID de cliente desacordado.

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 provienen de esa pila.

Filtrar Logcat con GoogleProvider o CapgoSocialLogin after a failed login. The plugin logs your package name, signing SHA-1, and a masked 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 para¿Dónde va?
Aplicación webServidor / audiencia de token de identidadwebClientId en SocialLogin.initialize()
Android, una por clave de firmaPrueba que su APK está autorizada para llamar a GoogleSolo en el Console de Cloud Google. No pase este ID a webClientId

Un error común es utilizar el ID del cliente de Android como webClientId. El 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 el console.

Crear un cliente OAuth de Android para cada certificado que firma los builds que pruebas:

  • Debug: desde ./gradlew signingReport para la variante de depuración.
  • Release: desde el APK o AAB que realmente instala.
  • Play App Signing: 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 aplicaciones incluso si su 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 de Android OAuth, incluyendo cualquier .debug sufijo.

Si la pantalla de consentimiento de OAuth está en modo de prueba, agregue cada cuenta de Google que pruebe bajo Usuarios de prueba > Público. No se requiere publicar la aplicación en Producción para email y profile escopos. 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 Cloud de Google pueden tardar hasta unas pocas horas en propagarse.

Esta prácticamente siempre significa que Google rechazó la combinación del certificado de firma de APK instalado, nombre de paquete y webClientIdTrabaje a través de esta lista de verificación:

  1. Confirmar webClientId is el ID del cliente de la aplicación Web y termina con .apps.googleusercontent.com.
  2. Ejecute la aplicación, reproduzca el error y lea Logcat para GoogleProvider, signingSha1=, y package=.
  3. En Google Cloud Console > Credenciales, abra su cliente OAuth de Android y verifique el nombre de paquete exacto y la SHA-1.
  4. Si está probando una versión de lanzamiento, registre la 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 registre la SHA-1 de firma de la aplicación de Play.
  6. Asegúrese 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, confirme que el usuario de Google es de prueba.
  8. Wait and retry after console changes.

USER_CANCELLED Después de seleccionar una cuenta en una compilación de depuración mal configurada, aún puede haber un desacuerdo en la firma SHA-1 o el ID del cliente. Corrija la configuración del consola antes.

Extraiga la SHA-1 de la compilación que instale

Sección titulada “Extraiga la SHA-1 de la compilación que instale”

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ñada ese SHA-1 a un cliente OAuth Android con el mismo nombre de paquete, vuelva a instalar la misma APK firmada y vuelva a probar.

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

Lectura del resultado de inicio de sesión

Sección titulada “Leer el resultado de inicio de sesión”

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 Iniciar sesión con Google en Android 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-de-pasaje para el detalle de implementación en @capgo/capacitor-clave-de-pasaje @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa, y Dos factores de autenticación para el detalle de implementación en Dos factores de autenticación.