Generalidades

Cómo crear la autenticación de Firebase en Android Studio. | Por Siddiquah Anjum | febrero de 2022

Como crear la autenticacion de Firebase en Android Studio

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

1645224381 276 Como crear la autenticacion de Firebase en Android Studio
Su proyecto vacío ahora debería verse así.

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

1645224381 322 Como crear la autenticacion de Firebase en Android Studio
Después de agregar el proyecto y conectarlo a Firebase

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.

1645224381 492 Como crear la autenticacion de Firebase en Android Studio
Hay 4 actividades en total.

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

1645224381 796 Como crear la autenticacion de Firebase en Android Studio
1645224381 268 Como crear la autenticacion de Firebase en Android Studio
Diseño del evento principal. y una captura de pantalla del diseño.

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"
android:background="#E6E6E6"
tools:context=".MainActivity">


android:id="@+id/relativeLayout"
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:id="@+id/logo"
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:id="@+id/name"
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:id="@+id/relativeLayout2"
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:id="@+id/wel"
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:id="@+id/LoginBtn"
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:id="@+id/SignUpBtn"
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:id="@+id/imageView"
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

1645224381 268 Como crear la autenticacion de Firebase en Android Studio
1645224381 186 Como crear la autenticacion de Firebase en Android Studio
Diseño de la actividad de inicio de sesión. y una captura de pantalla del diseño.

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#FFFFA6"
android:layout_height="match_parent"
tools:context=".LoginActivity">


android:id="@+id/imageView3"
android:layout_width="500dp"
android:layout_height="500dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/i" />

android:id="@+id/imageView10"
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:id="@+id/log"
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:id="@+id/wel"
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:id="@+id/imageView2"
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:id="@+id/enter"
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:id="@+id/editTextTextEmailAddress"
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:id="@+id/editTextTextPassword"
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:id="@+id/button"
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

1645224382 451 Como crear la autenticacion de Firebase en Android Studio
1645224382 710 Como crear la autenticacion de Firebase en Android Studio
Diseño de evento de registro. y una captura de pantalla del diseño.

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=".SignupActivity">


android:id="@+id/imageView3"
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:id="@+id/log"
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:id="@+id/wel"
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:id="@+id/imageView6"
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:id="@+id/imageView2"
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:id="@+id/enter"
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:id="@+id/editTextTextPersonName"
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:id="@+id/editTextTextEmailAddress"
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:id="@+id/editTextPhone"
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:id="@+id/editTextTextPassword2"
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:id="@+id/button2"
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

1645224382 498 Como crear la autenticacion de Firebase en Android Studio
Actividad principal (archivo Xml + archivo Java)

Informe del proyecto: https://github.com/siddiquah/LoginSignup-inFirebase

Póngase en contacto conmigo: [email protected]

LEER  Introducción a Hilt en la serie MAD Skills | Autor: Manuel Vivo | Desarrollador de Android | Agosto de 2021

Publicaciones relacionadas

Deja una respuesta

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

Botón volver arriba