Cómo crear la autenticación de Firebase en Android Studio. | Por Siddiquah Anjum | febrero de 2022
Este blog le dará un recorrido 101 sobre cómo crear un trabajo completo Aplicación de autenticación de Firebase en el estudio de Android. Expliqué cada proceso y adjunté capturas de pantalla y un enlace de github al proyecto. Con este blog, supongo que ya tiene algunos conocimientos básicos de desarrollo de Android y firebase.Asombroso Comencemos a codificar.
Mi configuración actual es que mi versión del editor es Android Studio Arctic Fox | 2020.3.1 Parche 3 Todavía necesitamos base de fuego https://firebase.google.com/ Además de eso, el lenguaje que usamos para codificar es JAVA (versión openjdk «17.0.1» 2021-10-19)mi sistema operativo también es MacOs. Asegúrate de estar usando la misma versión o superior. El proyecto también podría funcionar con versiones anteriores, pero como no lo he probado, no estoy seguro. Pero si tiene la misma versión, todo está bien y puede comenzar a codificar. ¡todo lo mejor! ! !
Abra su estudio de Android y cree un nuevo proyecto vacío.Puede darle cualquier nombre, pero este proyecto se llamará Formulario de inicio de sesión FirebasePuede leer esta guía para aprender a crear un nuevo proyecto. https://developer.android.com/training/basics/firstapp/creating-project
Ahora que tiene un proyecto vacío con el que trabajar, conectémoslo a firebase.
A continuación, haga clic en Herramientas -> Firebase -> Autenticación -> Autenticación de correo electrónico y contraseña.
Ahora haga clic en dos botones, primero haga clic en Conectarse a Firebase botón, conecta su proyecto a firebase, obviamente si no ha agregado su aplicación a firebase de antemano, android studio lo hace por usted en este paso.Luego haga clic en siguiente Agrega Firebase Authentication a tu aplicación y agregará las dependencias en el archivo build.gradle. Una vez hecho esto, ambos botones tendrán una marca de verificación y un color verde. Hasta aquí todo bien, ¿no?
Para obtener instrucciones claras sobre cómo hacer esto, también puede leer esta documentación https://firebase.google.com/docs/android/setup
Para nuestra aplicación, necesitaremos 4 pantallas. Vaya a res -> diseño. Cree 3 nuevas actividades denominadas LoginActivity, SignupActivity y HomeActivity. Porque ya tienes MainActivity. Al final, deberías tener un total de 4 actividades.
Pantalla de inicio: ubicación del logotipo, botones de inicio de sesión y registro,
Pantalla de inicio de sesión: desde aquí el usuario puede iniciar sesión en la aplicación,
Pantalla de Registro: Desde aquí el usuario puede registrarse a la aplicación y finalmente
Pantalla de inicio: esta página solo aparecerá después de un inicio de sesión exitoso.
Una vez hecho esto, se puede diseñar cada pantalla en su archivo XML.
Adjunto capturas de pantalla del diseño que usé junto con los archivos y el código para este blog.
actividades principales
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E6E6E6"
tools:context=".MainActivity">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="145dp"
android:gravity="center"
android:layout_marginTop="20dp"
android:layout_marginEnd="145dp"
android:text="صديقة"
android:textColor="#9297A9"
android:textSize="40sp"
android:textStyle="bold" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/logo"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="145dp"
android:layout_marginTop="-5dp"
android:layout_marginEnd="145dp"
android:gravity="center"
android:text="A N J U M"
android:textColor="#9297A9"
android:textSize="14dp" />
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="@+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/relativeLayout">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:gravity="center"
android:text="Hello There! Come on in 😀 🌱"
android:textColor="#A3A98B"
android:textSize="16sp" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/wel"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="20dp"
android:layout_marginEnd="150dp"
android:background="@drawable/login_btn"
android:gravity="center"
android:text="Log In ➝"
android:textColor="#ffffff"
android:textSize="12sp" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/LoginBtn"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="150dp"
android:layout_marginTop="30dp"
android:background="@drawable/signup_btn"
android:gravity="center"
android:text="Sign Up ＋"
android:textColor="#ffffff"
android:textSize="12sp" />
android:layout_width="wrap_content"
android:layout_height="250dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="@drawable/front_page" />
Ahora, después de diseñar la actividad principal, comencemos a diseñar la actividad de inicio de sesión y registro.
actividad de inicio de sesión
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#FFFFA6"
android:layout_height="match_parent"
tools:context=".LoginActivity">
android:layout_width="500dp"
android:layout_height="500dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/i" />
android:layout_width="220dp"
android:layout_height="313dp"
android:src="@drawable/v"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView2"
app:layout_constraintVertical_bias="1.0" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:layout_marginTop="28dp"
android:text="Login"
android:textColor="#977E9E"
android:textSize="40dp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:layout_marginTop="4dp"
android:text="Welcome back"
android:textColor="#E8BDA5"
android:textSize="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/log" />
android:layout_width="250dp"
android:layout_height="250dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.501"
app:srcCompat="@drawable/card"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:text="* Please enter your Email id and Password"
android:textColor="#E78279"
android:textSize="10dp"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintHorizontal_bias="0.378"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toTopOf="@+id/imageView2" />
android:layout_width="200dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress"
android:textColor="#818181"
android:layout_marginTop="10dp"
android:textSize="15dp"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toBottomOf="@+id/enter" />
android:layout_width="200dp"
android:layout_height="wrap_content"
android:hint="********"
android:textSize="15dp"
android:ems="10"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toBottomOf="@+id/editTextTextEmailAddress" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword" />
Regístrese para un evento
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SignupActivity">
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/signup_bg" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginTop="28dp"
android:text="Signup"
android:textColor="#9E9DB2"
android:textSize="40dp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:text="Welcome"
android:textColor="#81B0D5"
android:textSize="30dp"
app:layout_constraintBottom_toTopOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/log"
app:layout_constraintVertical_bias="0.0" />
android:layout_width="238dp"
android:layout_height="214dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView2"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="@drawable/f" />
android:layout_width="286dp"
android:layout_height="320dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.42"
app:srcCompat="@drawable/card" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="34dp"
android:text="* Please enter your Details"
android:textColor="#E78279"
android:textSize="10dp"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintHorizontal_bias="0.192"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toTopOf="@+id/imageView2" />
android:layout_width="220dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
android:textColor="#818181"
android:textSize="14dp"
android:layout_marginTop="5dp"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toBottomOf="@+id/enter" />
android:layout_width="220dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Email"
android:layout_marginTop="10dp"
android:inputType="textEmailAddress"
android:textColor="#818181"
android:textSize="14dp"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toBottomOf="@+id/editTextTextPersonName" />
android:layout_width="220dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Contact No"
android:textColor="#818181"
android:layout_marginTop="10dp"
android:textSize="14dp"
android:inputType="phone"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toBottomOf="@+id/editTextTextEmailAddress" />
android:layout_width="220dp"
android:layout_height="wrap_content"
android:textColor="#818181"
android:textSize="14dp"
android:hint="******"
android:layout_marginTop="10dp"
android:ems="10"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toBottomOf="@+id/editTextPhone" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="@+id/imageView2"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword2"
app:layout_constraintVertical_bias="0.0" />
actividades familiares
Ha sido genial estar conmigo hasta ahora.. Date una plamadita en la espalda.Espero que todo esté claro, si no, siempre puedes contactarme en [email protected]
Esta parte es muy simple. Todo lo que tenemos que hacer es agregar un clic en los botones de inicio de sesión y registro.
Primero, vamos a crear dos variables.
Button LoginBtn, SignupBtn;
A continuación, obtendremos estos identificadores de variables en el archivo xml.
LoginBtn = findViewById(R.id.LoginBtn);
SignupBtn = findViewById(R.id.SignUpBtn);
Después de esto, lo único que tenemos que hacer es cambiar de la actividad principal a la actividad de inicio de sesión/registro usando la intención.
LoginBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {Intent intent = new Intent(MainActivity.this, LoginActivity.class);
startActivity(intent);
}
});
Este código, permite que el usuario haga clic Iniciar sesión botón. Cuando el usuario hace clic en este botón, la pantalla cambia de la actividad principal a la actividad de inicio de sesión. Esto está destinado a funcionar.una intención es realizar acciones en la pantallaSe utiliza principalmente para iniciar actividades, enviar receptores de difusión, iniciar servicios y enviar mensajes entre dos actividades.
Haremos lo mismo Inscribirse botón. Primero crearemos un OnClickListener y luego crearemos una intención dentro de él para alternar la pantalla.
SignupBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, SignupActivity.class);
startActivity(intent);
}
});
Código completo de actividad principal
Informe del proyecto: https://github.com/siddiquah/LoginSignup-inFirebase
Póngase en contacto conmigo: [email protected]
