Google Login en Android

Introducción

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

Usando el inicio de sesión de Google en Android

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

Cuidado

El certificado SHA1 de Android es doloroso y no lo deseo a nadie tener que configurarlo. Los siguientes pasos asumen el escenario más simple de una aplicación que no está publicada en Google Play Store y que solo se utiliza por el simulador local o el dispositivo de hardware de desarrollo.

Si has desplegado tu aplicación en Google Play Store, DEBES agregar un ID de cliente de Android adicional que contenga el SHA1 del console de Google Play para las liberaciones de producción. Puedes encontrar la huella SHA1 que Google Play utiliza para firmar tu paquete de liberación bajo Test and release > Setup > App Signing.

Finalmente, es importante mencionar que si te equivocas, el error NO será obvio. Puede ser muy difícil de depurar. Si te sientes con la configuración, por favor mira el Github problemas.

Además, puede consultar la sección de solución de problemas de Configuración de inicio de sesión de Google para Android para obtener más información.

Nota

Puede crear múltiples identificadores de cliente Android. Esto es necesario si tiene múltiples certificados SHA1.

1. Crear un identificador de cliente Android.

   1. Haga clic en la barra de búsqueda

      

   2. Buscar por credentials y haga clic en el APIs and Services One (número 2 en la captura de pantalla)

      

   3. Haga clic en el create credentials

      

   4. Seleccione OAuth client ID

      

   5. Seleccione el Android Tipo de aplicación

      

   6. Abra Android Studio

   7. En la parte inferior del navegador, encuentre la Gradle Scripts

      

   8. Encuentra build.gradle para el módulo app

      

   9. Copia el android.defaultConfig.applicationIdEsto será tu package name en el panel de control de Google

      

   10. Ahora, abre la terminal. Asegúrate de que estás en el android carpeta de tu aplicación y ejecuta ./gradlew signInReport

   
   11. Desplázate hacia la parte superior de este comando. Deberías ver lo siguiente. Copia el SHA1.
   
   12. Now, go back to the Google Console. Introduzca su applicationId como el Package Name y su SHA1 en el campo del certificado y haga clic create
   

2. Crear un cliente web (esto es necesario para Android)

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

   2. Establezca el tipo de aplicación en Web

      

   3. Haga clic Create

      

   4. Copie el ID del cliente, lo utilizará como el webClientId en tu JS/TS code

      

3. Modificar tu MainActivity

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

   2. Encuentra MainActivity.java

      1. Abrir el app carpeta

         

      2. Encuentra java

         

      3. Encuentra tu MainActivity.java y haz clic en ella

         

   3. Modificar MainActivity.java. Por favor, agregue el 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. 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. Llame a 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))

      Cuidado

      Si inicia Google con mode: 'offline', SocialLogin.login() devuelve serverAuthCode para tu flujo de intercambio de backend. No llames SocialLogin.refresh({ provider: 'google' }) en la aplicación en ese modo. Almacena el token de refresco de Google allí, y refresca en el backend. serverAuthCode Configure el emulador para pruebas

5. Ir a

   1. y haz clic en el botón de más Device manager Administrador de dispositivos en Android Studio con el botón de más destacado

      

   2. Crear un dispositivo virtual

      

   3. Selecciona cualquier dispositivo con un Play Store icono

      

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

   4. Hacer clic next

      

   5. Asegúrate de que la imagen del sistema sea del tipo Google Play. DEBE SER ser del tipo Google Play

      

   6. Haga clic en siguiente

      

   7. Pantalla de verificación de configuración de dispositivo. Puede nombrar su emulador como prefiera

      

   8. Ir a Device Manager y arrancar su simulador

      

   9. Después de que arranque el simulador, vaya a sus ajustes

      

   10. Ir a Google Play

   
   11. Haga clic Update y espere unos 60 segundos
   

6. Pruebe su aplicación

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

   

Solución de problemas

Si tiene algún problema, por favor revise los Github problemas.

Los problemas con el inicio de sesión de Google son SIEMPRE relacionado con el certificado SHA1.

Si no puede obtener el certificado de desarrollo SHA1, intente usar un keystore personalizado. Aquí Aquí hay un comentario que explica cómo agregar un keystore a su proyecto.

Sigue adelante desde Google Login en Android

Google Login en Android para planificar la autenticación y los flujos de cuenta, conecte Usando @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login @capgo/capacitor-passkey para los detalles de implementación en @capgo/capacitor-passkey @capgo/capacitor-native-biometric para los detalles de implementación en @capgo/capacitor-native-biometric, y Autenticación en dos factores para los detalles de implementación en Autenticación en dos factores.