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