notifications Notificaciones

Marcar todas como leídas

Ver más

lightbulb_outline

Crear login con firebase y kotlin android

timer 10 Min.

remove_red_eye 4068

calendar_today 29/10/19

1.- Prime nos vamos a https://console.firebase.google.com 2.- Damos click en añadir proyecto Texto alternativo

3.- Agregamos el nombre del proyecto y damos click en continuar y seleccionamos el pais Texto alternativo

Texto alternativo

4.- Damos click en crear proyecto

Texto alternativo

5.- Click en añade Firebase a tu aplicación de android.

Texto alternativo

6.- Colocamos el nombre del paquete para encontrarlo nos vamos a nuestro proyecto en el archivo MainActivity en la parte de arriba ejemplo:

package com.codigofacilito.mg.loginkotlin /*Este es el nombre del paquete copiamos y pegamos*/
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
}
}

7.- En apodo de la aplicación agregamos login 8.- Damos click en registrar la aplicación

Texto alternativo

9.- Descargamos el archivo google-services.json

Texto alternativo

ya que termino de descargar copiamos el archivo y nos vamos a nuestro proyecto en la parte de arriba de la estructura de nuestro proyecto la vamos a cambiar de android a project seleccionamos la carpeta app pegamos el archivo y damos click en ok, cambiamos la vista project a Android nuevamente.

Texto alternativo

10.- Regresamos a firebase console y damos clic en continuar 11.- Esta línea de código

classpath 'com.google.gms:google-services:4.3.2'

nos vamos a Gradle Scripts y pegamos la línea en el archivo build.gradle project en dependencies

dependencies {
        classpath 'com.android.tools.build:gradle:3.4.1'
        classpath 'com.google.gms:google-services:4.3.2'//Línea de código
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }

12.-la segunda línea

apply plugin: 'com.google.gms.google-services'

Nos vamos nuevamente a Gradle Scripts y pegamos la línea en el archivo build.gradle Module en dependencies debajo de dependencias también vamos agregar estas dos líneas para poder usar las clases de firebase en la autenticación y en la base de datos estas las vamos agregar en dependencies

implementation 'com.google.firebase:firebase-auth:18.0.0'
implementation 'com.google.firebase:firebase-database:18.0.0'

Las tres líneas deben de quedar de la siguiente manera


dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.core:core-ktx:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'com.google.android.material:material:1.0.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    //Librerias para usar las clases de firebase
    implementation 'com.google.firebase:firebase-auth:18.0.0'
    implementation 'com.google.firebase:firebase-database:18.0.0'

}
//usar los servicios de google services
apply plugin: 'com.google.gms.google-services'

13.- Damos click Sync Now que se encuentra en la esquina superior derecha.

14.- Regresamos a firebase console y damos click en finalizar.

15.- En la izquierda nos aparecerá el menú seleccionamos autenticación y después damos click en CONFIGURAR EL MÉTODO DE INICIO DE SESIÓN

Texto alternativo

16.- Seleccionamos correo electrónico y contraseña habilitamos y damos click en guardar.

Texto alternativo

Texto alternativo

17.- Seleccionamos database del menú y damos click en empezar

Texto alternativo

18.- Nos vamos a nuestro proyecto.

En nuestro proyecto primero vamos ahorrarnos unas lineas de codigos creando un estilo nos vamos a res/values/styles.xml abrimos el archivo y vamos agregar el siguiente:

<style name="viewCustom">
   <item name="android:layout_width">match_parent</item>
   <item name="android:layout_height">wrap_content</item>
   <item name="android:layout_margin">8dp</item>
</style>

Creando este estilo no nos llenaremos de líneas de código repitiendo el ancho, largo y margen si quieren agregar otros atributos en común sería perfecto ahorrarán más líneas.

Ahora vamos a abrir el siguiente archivo nos vamos a res/values/Strings.xml dentro de este agregaremos el siguiente código:

<string name="email">Correo</string>
<string name="password">Contraseña</string>
<string name="forgotPassword">Olvidaste tu contraseña?</string>
<string name="firstName">Nombre</string>
<string name="lastName">Apellido</string>
<string name="login">Iniciar sesión</string>
<string name="createAct">Crear cuenta</string>

En name agregamos el identificador del String y dentro de las etiquetas el texto que se visualizará al llamar el string con el id.

Ahora vamos abrir el siguiente archivo res/layout/activity_main.xml y creamos el siguiente diseño usando un LinearLayout con orientación vertical para que todos los elementos dentro de este se acomoden de esta manera:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <EditText
       android:id="@+id/etEmail"
       style="style/viewCustom"<!-- En esta parte llamamos el estilo que creamos anteriormente para ahorrarnos 3 líneas de código-->
       android:hint="@string/email" <!-- En esta parte llamamos el string con el name que le asignamos -->
       android:inputType="textEmailAddress" />

   <EditText
       android:id="@+id/etPassword"
       style="@style/viewCustom"<!-- En esta parte llamamos el estilo que creamos anteriormente para ahorrarnos 3 líneas de código-->
       android:hint="@string/password"<!-- En esta parte llamamos el string con el name que le asignamos -->
       android:inputType="textPassword" />
   <Button
       android:id="@+id/btnLogin"
       style="@style/viewCustom"<!-- En esta parte llamamos el estilo que creamos anteriormente para ahorrarnos 3 líneas de código-->
       android:background="@color/colorPrimary"
       android:text="@string/login"<!-- En esta parte llamamos el string con el name que le asignamos -->
       android:textColor="@android:color/white"
       android:textStyle="bold"
       android:onClick="login"/> <!-- agregamos un nombre a nuestro onclick para poder ejecutarlo más adelante  ->


   <Button
           android:id="@+id/create"
           style="@style/viewCustom"
           android:background="@color/colorPrimary"
           android:text="@string/create"
           android:textColor="@android:color/white"
           android:textStyle="bold"
           android:onClick="register"/><!-- Aquí creamos el método que llamaremos en la clase Main-->

   <TextView
       android:id="@+id/txtForgotPassword"
       style="@style/viewCustom"
       android:layout_below="@id/btnLogin"
       android:onClick="forgotPassword"
       android:gravity="center_horizontal"
       android:text="@string/forgotPassword"
       android:textSize="20sp" />
</LinearLayout>

Ya que tenemos nuestro diseño abrimos el archivo ** java/MainActivity** agregamos el siguiente código:

class MainActivity : AppCompatActivity() {
   private val TAG = "LoginActivity"
   //global variables
   private var email by Delegates.notNull<String>()
   private var password by Delegates.notNull<String>()
   private lateinit var etEmail: EditText
   private lateinit var etPassword: EditText
   private lateinit var mProgressBar: ProgressDialog

   //Creamos nuestra variable de autenticación firebase 
   private lateinit var mAuth: FirebaseAuth

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       initialise()
   }

/*Creamos un método para inicializar nuestros elementos del diseño y la autenticación de firebase*/
   private fun initialise() {
       etEmail = findViewById(R.id.etEmail)
       etPassword = findViewById(R.id.etPassword)
       mProgressBar = ProgressDialog(this)
       mAuth = FirebaseAuth.getInstance()
   }

//Ahora vamos a Iniciar sesión con firebase es muy sencillo 

   private fun loginUser() {
       //Obtenemos usuario y contraseña
       email = etEmail.text.toString()
       password = etPassword.text.toString()
       //Verificamos que los campos no este vacios
       if (!TextUtils.isEmpty(email) && !TextUtils.isEmpty(password)) {

           //Mostramos el progressdialog
           mProgressBar.setMessage("Registering User...")
           mProgressBar.show()

           //Iniciamos sesión con el método signIn y enviamos usuario y contraseña
           mAuth.signInWithEmailAndPassword(email, password)
                   .addOnCompleteListener(this) {

                       //Verificamos que la tarea se ejecutó correctamente
                       task ->
                       if (task.isSuccessful) {
                           // Si se inició correctamente la sesión vamos a la vista Home de la aplicación
                           goHome() // Creamos nuestro método en la parte de abajo 
                       } else {
                           // sino le avisamos el usuairo que orcurrio un problema
                           Toast.makeText(this, "Authentication failed.",
                                   Toast.LENGTH_SHORT).show()
                       }
                   }
       } else {
           Toast.makeText(this, "Enter all details", Toast.LENGTH_SHORT).show()
       }
   }


   private fun goHome() {
//Ocultamos el progress
       mProgressBar.hide()
//Nos vamos a Home 
       val intent = Intent(this, HomeActivity::class.java)
       intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)
       startActivity(intent)
   }

/* Tenemos que crear nuestros métodos con el mismo nombre que le agregamos a nuestros botones en el atributo onclick y forzosamente tenemos que recibir un parámetro view para que sea reconocido como click de nuestro button ya que en view podemos modificar los atributos*/ 

/*Primero creamos nuestro evento login dentro de este llamamos nuestro método loginUser al dar click en el botón se iniciara sesión */ 
   fun login(view: View) {
       loginUser()
   }

/*Si se olvido de la contraseña lo enviaremos en la siguiente actividad nos marcara error porque necesitamos crear la actividad*/

   fun forgotPassword(view: View) {
       startActivity(Intent(this,
               ForgotPasswordActivity::class.java))
   }

/*Si quiere registrarse lo enviaremos en la siguiente actividad nos marcara error porque necesitamos crear la actividad*/

   fun register(view: View) {
       startActivity(Intent(this, RegisterActivity::class.java))
   }
}

Vamos a crear un nuevo archivo damos click derecho en la carpeta JAVA seleccionamos NEW/ACTIVITY/EMPTY ACTIVITY colocamos el nombre de RegisterActivity y damos click en finish, ahora nos vamos a res/layout/activity_register.xml en este archivos vamos a usar un LinearLayout con orientación vertical y agregaremos los campos que se necesitan para crear una cuenta:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <EditText
       android:id="@+id/txtName"
       style="@style/viewCustom"<!-- En esta parte llamamos el estilo que creamos anteriormente para ahorrarnos 3 líneas de código-->
       android:hint="@string/firstName"
       android:inputType="textPersonName" />

   <EditText
       android:id="@+id/txtLastName"
       style="@style/viewCustom"<!-- En esta parte llamamos el estilo que creamos anteriormente para ahorrarnos 3 líneas de código-->
       android:hint="@string/lastName"
       android:inputType="textPersonName" />

   <EditText
       android:id="@+id/txtEmail"
       style="@style/viewCustom"
       android:hint="@string/email"<!-- En esta parte llamamos el estilo que creamos anteriormente para ahorrarnos 3 líneas de código-->
       android:inputType="textEmailAddress" />

   <EditText
       android:id="@+id/txtPassword"
       style="@style/viewCustom"<!-- En esta parte llamamos el estilo que creamos anteriormente para ahorrarnos 3 líneas de código-->
       android:hint="@string/password"
       android:inputType="textPassword" />

   <Button
       style="@style/viewCustom"<!-- En esta parte llamamos el estilo que creamos anteriormente para ahorrarnos 3 líneas de código-->
       android:onClick="register"
       android:background="@color/colorAccent"
       android:text="@string/createAct"
       android:textColor="@android:color/white"
       android:textStyle="bold" />
</LinearLayout>

Nos vamos a JAVA/RegisterActivity

 class RegisterActivity : AppCompatActivity() {
   private lateinit var txtName: EditText
   private lateinit var txtLastName: EditText
   private lateinit var txtEmail: EditText
   private lateinit var txtPassword: EditText
   private lateinit var  progressBar: ProgressDialog
   private lateinit var databaseReference: DatabaseReference
   private lateinit var database: FirebaseDatabase
   private lateinit var auth: FirebaseAuth

   //global variables
   private var firstName by Delegates.notNull<String>()
   private var lastName by Delegates.notNull<String>()
   private var email by Delegates.notNull<String>()
   private var password by Delegates.notNull<String>()

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_register)
       initialise()

   }

/*Creamos un método para inicializar nuestros elementos del diseño y la autenticación y la base de datos de firebase*/

   private fun initialise() {
       //llamamos nuestras vista
       txtName = findViewById(R.id.txtName)
       txtLastName = findViewById(R.id.txtLastName)
       txtEmail = findViewById(R.id.txtEmail)
       txtPassword = findViewById(R.id.txtPassword)
       //Creamos nuestro progressDialog
       progressBar = ProgressDialog(this)

/*Creamos una instancia para guardar los datos del usuario en nuestra base  de datos*/
       database = FirebaseDatabase.getInstance()
/*Creamos una instancia para crear nuestra autenticación y guardar el usuario*/
       auth = FirebaseAuth.getInstance()

/*reference nosotros leemos o escribimos en una ubicación específica la base de datos*/
       databaseReference = database.reference.child("Users")
   }

//Vamos a crear nuestro método para crear una nueva cuenta 
   private fun createNewAccount() {

       //Obtenemos los datos de nuestras cajas de texto
       firstName = txtName.text.toString()
       lastName = txtLastName.text.toString()
       email = txtEmail.text.toString()
       password = txtPassword.text.toString()

//Verificamos que los campos estén llenos
       if (!TextUtils.isEmpty(firstName) && !TextUtils.isEmpty(lastName)
               && !TextUtils.isEmpty(email) && !TextUtils.isEmpty(password)) {

/*Antes de iniciar nuestro registro bloqueamos la pantalla o también podemos usar una barra de proceso por lo que progressbar está obsoleto*/

           progressBar.setMessage("Usuario registrado...")
           progressBar.show()

//vamos a dar de alta el usuario con el correo y la contraseña
           auth.createUserWithEmailAndPassword(email, password)
                   .addOnCompleteListener(this) {

//Si está en este método quiere decir que todo salio bien en la autenticación

/*Una vez que se dio de alta la cuenta vamos a dar de alta la información en la base de datos*/

/*Vamos a obtener el id del usuario con que accedio con currentUser*/
                           val user:FirebaseUser = auth.currentUser!!
//enviamos email de verificación a la cuenta del usuario
                           verifyEmail(user);
/*Damos de alta la información del usuario enviamos el la referencia para guardarlo en la base de datos  de preferencia enviamos el id para que no se repita*/
val currentUserDb = databaseReference.child(user.uid)
//Agregamos el nombre y el apellido dentro de user/id/
                           currentUserDb.child("firstName").setValue(firstName)
                           currentUserDb.child("lastName").setValue(lastName)
//Por último nos vamos a la vista home 
                       updateUserInfoAndGoHome()

                   }.addOnFailureListener{
// si el registro falla se mostrara este mensaje
               Toast.makeText(this, "Error en la autenticación.",
                       Toast.LENGTH_SHORT).show()
           }

       } else {
           Toast.makeText(this, "Llene todos los campos", Toast.LENGTH_SHORT).show()
       }
   }

//llamamos el método de crear cuenta en la accion registrar 
   fun register(view: View){
       createNewAccount()
   }

   private fun updateUserInfoAndGoHome() {
       //Nos vamos a la actividad home 
       val intent = Intent(this, HomeActivity::class.java)
       intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)
       startActivity(intent)
//ocultamos el progress
       progressBar.hide()

   }

   private fun verifyEmail(user: FirebaseUser) {
       user.sendEmailVerification()
               .addOnCompleteListener(this) {
//Verificamos que la tarea se realizó correctamente
                   task ->
                   if (task.isSuccessful) {
                       Toast.makeText(this,
                               "Email " + user.getEmail(),
                               Toast.LENGTH_SHORT).show()
                   } else {
                       Toast.makeText(this,
                               "Error al verificar el correo ",
                               Toast.LENGTH_SHORT).show()
                   }
               }
   }
}

Vamos a crear un nuevo archivo damos click derecho en la carpeta JAVA seleccionamos NEW/ACTIVITY/EMPTY ACTIVITY colocamos el nombre de ForgotPasswordActivity y damos click en finish, ahora nos vamos a res/layout/activity_forgot_password.xml en este archivos vamos a usar un LinearLayout con orientación vertical y agregaremos un campo y un botón:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
android:orientation="vertical">
   <EditText
       android:id="@+id/etEmail"
       style="@style/viewCustom"
       android:hint="Email"
       android:inputType="textEmailAddress" />
   <Button
       android:id="@+id/btnSend"
       style="@style/viewCustom"
       android:background="@color/colorPrimary"
       android:text="Enviar contraseña"
       android:textColor="@android:color/white"
       android:textStyle="bold" />
</LinearLayout>

Nos vamos a JAVA/ForgotPasswordActivity en este vamos a recuperar la contraseña del usuario solo con su correo

class ForgotPasswordActivity : AppCompatActivity() {

   private var etEmail: EditText? = null
   private var btnSend: Button? = null
   //Firebase references
   private var mAuth: FirebaseAuth? = null
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_forgot_password)
       initialise()
   }
   private fun initialise() {
       etEmail = findViewById<View>(R.id.etEmail) as EditText
       btnSend = findViewById<View>(R.id.btnSend) as Button
       mAuth = FirebaseAuth.getInstance()
       btnSend!!.setOnClickListener { sendPasswordResetEmail() }
   }
   private fun sendPasswordResetEmail() {
       val email = etEmail?.text.toString()
       if (!TextUtils.isEmpty(email)) {
           mAuth!!
                   .sendPasswordResetEmail(email)
                   .addOnCompleteListener { task ->
                       if (task.isSuccessful) {
                           Toast.makeText(this, "Email Enviado", Toast.LENGTH_SHORT).show()
                           goMain()
                       } else {
Toast.makeText(this, "No se encontró el usuario con este correo", Toast.LENGTH_SHORT).show()
                       }
                   }
       } else {
           Toast.makeText(this, "Agregue el correo", Toast.LENGTH_SHORT).show()
       }
   }
   private fun goMain() {
       val intent = Intent(this, MainActivity::class.java)
       intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)
       startActivity(intent)
   }
}


Aqui esta el video donde se muestran los resultados del login Login en Android con Firebase usando Kotlin

Otros artículos del blog

Comunidad