Inicio de sesión con Google en Android
Copiar una solicitud de configuración con los pasos de instalación y la guía de markdown completa para este complemento.
Introducción
Sección titulada “Introducción”En esta guía, aprenderá a configurar el inicio de sesión de Google con Capgo Social Login para Android. Supongo que ya ha leído la guía de configuración general.
Usar inicio de sesión de Google en Android
Sección titulada “Usando inicio de sesión de Google en Android”En esta parte, aprenderás a configurar el inicio de sesión de Google en Android.
-
Crear un identificador de cliente Android.
-
Haga clic en la barra de búsqueda
-
Buscar
credentialsy haga clic en elAPIs and Servicesuno (número 2 en la captura de pantalla)
-
Haga clic en el
create credentials
-
Seleccionar
OAuth client ID
-
Seleccionar el
Androidtipo de aplicación
-
Abrir Android Studio
-
En la parte inferior de la navegación, encuentre la sección de
Gradle Scripts
-
Encuentre
build.gradlepara el móduloapp
-
Copia el
android.defaultConfig.applicationIdEste será tupackage nameen el console de Google
-
Ahora, abre la terminal. Asegúrate de que estás en el
androiddel directorio de tu aplicación y ejecuta./gradlew signInReport
- Desplázate hacia arriba en este comando. Deberías ver lo siguiente. Copia el
SHA1.
- Ahora, vuelve a la consola de Google. Ingresa tu
applicationIdcomo elPackage Namey tu SHA1 en el campo de certificado y haz cliccreate
-
-
Crear un cliente web (esto es necesario para Android)
-
Ir a la
Create credentialspágina en el Console de Google -
Establecer el tipo de aplicación a
Web
-
Hacer clic en
Create
-
Copiar el ID del cliente, lo utilizarás como el
webClientIden tu JS/TS code
-
-
Modificar tu
MainActivity-
Por favor, abra su aplicación en Android Studio. Puede ejecutar
cap open android -
Encuentre
MainActivity.java-
Abra el
appcarpeta
-
Encuentre
java
-
Encuentre su
MainActivity.javay haga clic en él
-
-
Modifique
MainActivity.java. Por favor, agregue lo siguiente codeimport 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 {@Overridepublic 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@Overridepublic void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}} -
Guardar el archivo
-
-
Utilice el inicio de sesión de Google en su aplicación
-
Primero, importe
SocialLoginimport { SocialLogin } from '@capgo/capacitor-social-login'; -
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',}})}) -
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 responseconsole.log(JSON.stringify(res))
-
-
Configura el emulador para la prueba
-
Ir a
Device managery haz clic en el botón de más
-
Crear un dispositivo virtual
-
Selecciona cualquier dispositivo con un
Play Storeicono
Como puedes ver, el
pixel 8soporta losPlay Storeservicios -
Haz clic
next
-
Seguro que el imagen del sistema es del tipo
Google Play. DEBE SER de tipoGoogle Play
-
Haz clic en siguiente
-
Confirme su dispositivo. Puede nombrar su emulador como prefiera
-
Entrar en
Device ManagerY arranque su simulador
-
Después de que arranque el simulador, vaya a sus ajustes
-
Entrar en
Google Play
- Haga clic
UpdateY espere unos 60 segundos
-
-
Prueba tu aplicación
Si has hecho todo correctamente, deberías ver el flujo de inicio de sesión de Google funcionando correctamente:
Sección titulada “Solución de problemas”
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
Administrador de credenciales, SHA-1 y FirebaseSección titulada “Administrador de credenciales, SHA-1 y Firebase”androidx.credentials En Android, este plugin utiliza el Administrador de credenciales de Google ( GoogleSignInClient y Inicia sesión con Google), no la versión legada del plugin ‘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 hay? webClientId ¿Qué alternativas hay?
¿Qué alternativas hay?
¿Qué alternativas hay?Configuración de Cloud de Google necesaria
| Sección titulada “Configuración de Cloud de Google necesaria” | Necesitas dos tipos de identificadores de cliente OAuth 2.0 en el mismo proyecto de Cloud de Google: | Tipo de cliente |
|---|---|---|
| Usado para lo siguiente: | Servidor / ID de token de audiencia | webClientId in SocialLogin.initialize() |
| Android, uno por clave de firma | Prueba 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 del cliente de Android como webClientId. El Administrador de credenciales requiere el ID del 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:
- De
./gradlew signingReportpara la variante de depuración. - De el APK o AAB que realmente instala.
- De 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 Play, 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 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 bajo Usuarios de prueba > Público. No se requiere publicar la aplicación en producción para email y profile los permisos. Los enlaces de activos digitales (assetlinks.json) no se requieren para iniciar sesión con Google a través del Administrador de credenciales.
Las modificaciones en Cloudflare pueden tardar hasta unas pocas horas en propagarse.
Error 28444: El panel de desarrolladores no está configurado correctamente
Título de la sección “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:
- Confirmar
webClientIdes el ID del cliente de la aplicación web y termina con.apps.googleusercontent.com. - Ejecuta la aplicación, reproduce el error y lee Logcat para
GoogleProvider,signingSha1=, ypackage=. - En Google Cloud Console > Credenciales, abre tu cliente OAuth de Android y verifica el nombre de paquete exacto y SHA-1.
- Si estás probando una versión de lanzamiento, registra el SHA-1 de esa versión, no solo el keystore de depuración.
- 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.
- Asegúrate de que los clientes web y Android estén en el mismo proyecto de Google Cloud.
- Si la pantalla de consentimiento está en Pruebas, confirma que el usuario de Google es un usuario de prueba.
- Espera y vuelve a intentarlo después de cambios en la consola.
USER_CANCELLED Después de seleccionar una cuenta en una configuración de depuración mal configurada, todavía puede haber un error de coincidencia de SHA-1 o ID de cliente. Corrige la configuración de la consola arriba.
Extrae el SHA-1 del paquete que instalas.
Título de la sección: Extrae el SHA-1 del paquete que instalas.Edición de depuración o local:
cd android && ./gradlew signingReportAPK de lanzamiento firmado:
keytool -printcert -jarfile android/app/release/app-release.apkAgrega ese SHA-1 a un cliente OAuth de Android con el nombre de paquete correspondiente, reinstala el mismo APK firmado y vuelve a intentarlo:
adb install android/app/release/app-release.apkLeer el 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, crea credenciales con ese idToken y utiliza el ID de 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-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 Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores.