Integra Google Login con Firebase

¡Hola amig@! Mi nombre es Kevin Morales y soy desarrollador mobile por más de 7 años. Hoy te voy a enseñar cómo implementar un inicio de sesión con Google en tu aplicación usando Firebase y como hacer que tus usuarios estén más felices por el tiempo que pueden ahorrar al momento de iniciar sesión.

Hoy las aplicaciones que tienen inicio de sesión con formulario, es decir, en el que se ingresa email y contraseña están quedando atrás, y te preguntarás por qué ocurre esto, pues nos enfocamos directamente en la experiencia de usuario, al momento de ingresar a una aplicación lo que el usuario quiere es rapidez, por ello es que existen herramientas que optimizan este flujo como es el Google Login.

Pero antes te hablaré sobre conceptos básicos de la herramienta que vamos a usar, Firebase, para poder optimizar este flujo y verás lo sencillo que es su implementación.

Firebase

Es una plataforma de desarrollo móvil y web de Google que proporciona una amplia variedad de servicios y herramientas para simplificar y potenciar el desarrollo de aplicaciones. Está diseñado para ofrecer una infraestructura escalable y flexible que abarca desde el desarrollo de la aplicación hasta la implementación, el análisis y las notificaciones en tiempo real.

Firebase incluye servicios como bases de datos en tiempo real, autenticación, almacenamiento en la nube, funciones en la nube, y muchas otras características, lo que permite a los desarrolladores construir aplicaciones de alta calidad y mejorar la experiencia del usuario.

Implementación

Una vez creado el proyecto en Firebase, agregaremos la aplicación Android. Descargaremos el archivo google-services.json y colócalo en tu aplicación, en concreto dentro de Proyecto ⇾ app como se muestra en la imagen.

Para activar el Authentication en la plataforma de Firebase, debemos ir al menú de la izquierda y buscar la opción de autenticación. Para fines de este ejemplo activaremos solo el proveedor de Google.

Te debería quedar el proveedor de esta forma, activo y una vez esto este listo procederemos a implementar código en nuestra aplicación llamada GoogleLoginFirebaseKotlin.

Agregamos la dependencia de google-services en nuestro proyecto.

plugins {
  // ...

  // Agregar id de google-services
  id("com.google.gms.google-services") version "4.4.1" apply false
}

Y dentro de plugins también agregaremos el id de google-services. En dependencias se agregará la librería de Firebase y de Authentication, cabe recalcar que Analytics está por defecto, pero lo podrías dejar para tener analíticas de tu aplicación.

plugins {
  id("com.android.application")
  // Agregamos el google plugin de google-services
  id("com.google.gms.google-services")
  ...
}

dependencies {
  // Importaremos Firebase BoM
  implementation(platform("com.google.firebase:firebase-bom:32.7.2"))

  // Agregaremos las dependencias de los productos de Firebase que deseas usar
  implementation("com.google.firebase:firebase-analytics:21.5.1")
  implementation("com.google.firebase:firebase-auth:22.3.1")
  implementation("com.google.android.gms:play-services-auth:21.0.0")
}

Cuando ya hemos agregado la librería de Authentication y configurado nuestra plataforma de Firebase procedemos a crear el botón de Google Login, la librería ya nos trae un botón con estas condiciones.

<com.google.android.gms.common.SignInButton
        android:id="@+id/google_sign_in_button_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Así se vería el botón realizado por Google, el cual nos ahorra tiempo al momento de diseñarlo.

Ahora agregamos una función en nuestra Activity, la cual configure la acción del botón.

private fun setUpActions() {
        binding.googleSignInButtonId.setOnClickListener {
            googleSignIn(this)
        }
    }

Configuramos el inicio de sesión en nuestra Activity en el cual creamos una función llamada googleSignIn().

El requestIdToken es necesario para autenticar con Firebase, y aquí getString(R.string.defaultwebclientid) se utiliza para obtener el valor del ID del cliente web predeterminado, que es necesario para la autenticación con Firebase y el inicio de sesión de Google.

private fun googleSignIn() {
        val googleConf = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
            .requestIdToken(getString(R.string.default_web_client_id))
            .requestEmail()
            .build()
        val googleClient = GoogleSignIn.getClient(this, googleConf)
        startActivityForResult(googleClient.signInIntent, 100)
        googleClient.signOut()
    }

Lo que debes hacer es agregar el valor de defaultwebclientid en tus recursos (usualmente en el archivo res/values/strings.xml) con el ID del cliente web que obtuviste al configurar tu proyecto en Firebase.

Por último, agregamos la siguiente función sobrescrita, podemos observar los datos del usuario, básicamente se conecta a los servicios de Firebase y obtiene la información del usuario, como por ejemplo nombre de usuario o email.

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (requestCode == 100) {
            val task = GoogleSignIn.getSignedInAccountFromIntent(data)
            try {
                val account = task.getResult(ApiException::class.java)
                if (account != null) {
                    val credential = GoogleAuthProvider.getCredential(account.idToken, null)
                    FirebaseAuth.getInstance().signInWithCredential(credential).addOnCompleteListener { result ->
                        if (result.isSuccessful) {
                            // Datos del usuario
                            return@addOnCompleteListener
                        }
                        // Error por autenticación
                    }
                }
            } catch (e: ApiException) {
                // Error
            }
        }
    }

Una vez implementado todo el código anterior, podremos correr nuestra aplicación y obtendremos una pantalla igual a la siguiente, la cual nos permite iniciar sesión con nuestra cuenta de Google y obtener datos de este usuario.

¡Qué excelente! En pocos minutos aprendiste como implementar un Google Login en tu aplicación Android. Es ideal para optimizar tiempo para tus usuarios en aplicaciones grandes.

Descarga el proyecto en el siguiente enlace de GitHub.

GoogleLoginFirebaseKotlin

Conclusión

En resumen, la integración de Google Login con Kotlin y Firebase es una opción sólida para cualquier desarrollador de aplicaciones Android que busque una autenticación fácil de implementar y administrar. Al seguir estos pasos, tu aplicación estará lista para ofrecer a los usuarios un método de inicio de sesión seguro y conveniente, contribuyendo así al éxito general de tu proyecto.

Recuerda

Aprende cada día y serás una nueva persona

¡Gracias por leer este artículo, estoy muy emocionado de seguir compartiendo mi conocimiento al mundo entero!