Inicio de sesión y registro en Android usando Firebase en Kotlin

Firebase es una plataforma de desarrollo de aplicaciones móviles y web. Proporciona servicios que una aplicación web o una aplicación móvil pueden requerir. Firebase proporciona autenticación de correo electrónico y contraseña sin la sobrecarga de construir el backend para la autenticación de usuarios. En este artículo, aprenderemos la función de autenticación de Firebase. Utilizándolo, podemos crear una página de inicio de sesión y registro en nuestra aplicación.

Implementación paso a paso

Paso 1: Primero, necesitamos conectar nuestro proyecto con Firebase . Para eso, necesitamos ir a herramientas, la opción seleccionar base de fuego

.

Paso 2 : ahora que necesitamos la función de autenticación de Firebase, en la autenticación, tenemos diferentes opciones. Para este artículo, usaremos Autenticar usando un sistema de autenticación personalizado . Haremos clic en conectar. Y agregue el SDK de autenticación de firebase a su aplicación.

Paso 3: Ahora crearemos un diseño XML para la actividad de registro.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:padding="15dp"
        android:paddingTop="40dp"
        android:paddingBottom="40dp"
        app:layout_constraintBottom_toTopOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
 
        <EditText
            android:id="@+id/etSEmailAddress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="30dp"
            android:layout_marginRight="15dp"
            android:autofillHints="emailAddress"
            android:ems="10"
            android:hint="@string/email"
            android:inputType="textEmailAddress"
            android:minHeight="48dp"
            android:textColorHint="#757575" />
 
        <EditText
            android:id="@+id/etSPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:autofillHints="password"
            android:ems="10"
            android:hint="@string/password"
            android:inputType="textPassword"
            android:minHeight="48dp"
            android:textColorHint="#757575" />
 
        <EditText
            android:id="@+id/etSConfPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:autofillHints="password"
            android:ems="10"
            android:hint="@string/confirm_password"
            android:inputType="textPassword"
            android:minHeight="48dp"
            android:textColorHint="#757575"
            tools:ignore="TextContrastCheck" />
 
        <Button
            android:id="@+id/btnSSigned"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="15dp"
            android:background="@drawable/btn_primary"
            android:text="@string/signed" />
 
        <TextView
            android:id="@+id/tvRedirectLogin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="10dp"
            android:text="@string/already_have_an_account_login"
            android:textColor="#18206F"
            android:textSize="16sp" />
    </LinearLayout>
 
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 4 : ahora codificaremos para la actividad de registro

En la actividad de Registro, crearemos un objeto FirebaseAuth y al usarlo llamaremos a la función createUserWithEmailAndPassword(email, pass) . Y verifique usando la función addOnCompleteListener() , si la respuesta es exitosa, se mostrará un Toast .

Kotlin

package com.ayush.quizapp.activity.activity
 
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import android.widget.Toast
import com.ayush.quizapp.R
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.ktx.auth
import com.google.firebase.ktx.Firebase
 
class SignUpActivity : AppCompatActivity() {
    lateinit var etEmail: EditText
    lateinit var etConfPass: EditText
    private lateinit var etPass: EditText
    private lateinit var btnSignUp: Button
    lateinit var tvRedirectLogin: TextView
 
      // create Firebase authentication object
    private lateinit var auth: FirebaseAuth 
 
 
    override fun onCreate(savedInstanceState: Bundle?) {
 
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_sign_up)
         
          // View Bindings
        etEmail = findViewById(R.id.etSEmailAddress)
        etConfPass = findViewById(R.id.etSConfPassword)
        etPass = findViewById(R.id.etSPassword)
        btnSignUp = findViewById(R.id.btnSSigned)
        tvRedirectLogin = findViewById(R.id.tvRedirectLogin)
 
        // Initialising auth object
        auth = Firebase.auth  
 
        btnSignUp.setOnClickListener {
            signUpUser()
        }
         
        // switching from signUp Activity to Login Activity
        tvRedirectLogin.setOnClickListener {
            val intent = Intent(this, LoginActivity::class.java)
            startActivity(intent)
        }
 
    }
 
    private fun signUpUser() {
        val email = etEmail.text.toString()
        val pass = etPass.text.toString()
        val confirmPassword = etConfPass.text.toString()
         
        // check pass
        if (email.isBlank() || pass.isBlank() || confirmPassword.isBlank()) {
            Toast.makeText(this, "Email and Password can't be blank", Toast.LENGTH_SHORT).show()
            return
        }
 
        if (pass != confirmPassword) {
            Toast.makeText(this, "Password and Confirm Password do not match", Toast.LENGTH_SHORT)
                .show()
            return
        }
        // If all credential are correct
        // We call createUserWithEmailAndPassword
          // using auth object and pass the
          // email and pass in it.
        auth.createUserWithEmailAndPassword(email, pass).addOnCompleteListener(this) {
            if (it.isSuccessful) {
                Toast.makeText(this, "Successfully Singed Up", Toast.LENGTH_SHORT).show()
                finish()
            } else {
                Toast.makeText(this, "Singed Up Failed!", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

Paso 5:   Ahora diseñaremos la página Actividad de inicio de sesión. Aquí está el código XML

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.activity.LoginActivity">
 
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/imageView3"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
 
        <EditText
            android:id="@+id/etEmailAddress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="30dp"
            android:layout_marginRight="15dp"
            android:autofillHints="emailAddress"
            android:ems="10"
            android:hint="@string/email"
            android:inputType="textEmailAddress"
            android:minHeight="48dp"
            android:textColorHint="#757575" />
 
        <EditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:autofillHints="password"
            android:ems="10"
            android:hint="@string/password"
            android:inputType="textPassword"
            android:minHeight="48dp"
            android:textColorHint="#757575" />
 
        <Button
            android:id="@+id/btnLogin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="15dp"
            android:background="@drawable/btn_primary"
            android:text="@string/login" />
 
        <TextView
            android:id="@+id/tvRedirectSignUp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="15dp"
            android:gravity="center_horizontal"
            android:text="@string/don_t_have_an_account_sign_in"
            android:textColor="#18206F"
            android:textSize="16sp" />
 
    </LinearLayout>
 
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 6: ahora codificaremos la actividad de inicio de sesión

En la actividad de inicio de sesión, crearemos un objeto FirebaseAuth y, al usarlo, llamaremos a la función signInWithEmailAndPassword (email, pass) . Y verifique usando la función addOnCompleteListener() , si la respuesta es exitosa, se mostrará un brindis.

Kotlin

package com.ayush.quizapp.activity.activity
 
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import android.widget.Toast
import com.ayush.quizapp.R
import com.google.firebase.auth.FirebaseAuth
 
class LoginActivity : AppCompatActivity() {
 
    private lateinit var tvRedirectSignUp: TextView
    lateinit var etEmail: EditText
    private lateinit var etPass: EditText
    lateinit var btnLogin: Button
   
    // Creating firebaseAuth object
    lateinit var auth: FirebaseAuth
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)
         
          // View Binding
        tvRedirectSignUp = findViewById(R.id.tvRedirectSignUp)
        btnLogin = findViewById(R.id.btnLogin)
        etEmail = findViewById(R.id.etEmailAddress)
        etPass = findViewById(R.id.etPassword)
 
          // initialising Firebase auth object
        auth = FirebaseAuth.getInstance()
 
        btnLogin.setOnClickListener {
            login()
        }
 
        tvRedirectSignUp.setOnClickListener {
            val intent = Intent(this, SignUpActivity::class.java)
            startActivity(intent) 
            // using finish() to end the activity
            finish()
        }
    }
 
    private fun login() {
        val email = etEmail.text.toString()
        val pass = etPass.text.toString()
        // calling signInWithEmailAndPassword(email, pass)
          // function using Firebase auth object
        // On successful response Display a Toast
        auth.signInWithEmailAndPassword(email, pass).addOnCompleteListener(this) {
            if (it.isSuccessful) {
                Toast.makeText(this, "Successfully LoggedIn", Toast.LENGTH_SHORT).show()
            } else
                Toast.makeText(this, "Log In failed ", Toast.LENGTH_SHORT).show()
        }
    }
 
}

Producción:

Publicación traducida automáticamente

Artículo escrito por ayushpandey3july y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *