¿Cómo agregar el registro de usuario con verificación de correo electrónico en Android?

Hemos visto que la mayoría de las aplicaciones verifican a su usuario a través de las direcciones de correo electrónico o los números de teléfono del usuario enviándoles un enlace de verificación o enviando una OTP a los números de teléfono móvil del usuario. En este artículo, veremos la implementación del registro de usuario en Android con su verificación de correo electrónico. Para esto, utilizaremos el servicio Back4App que nos brinda una función para que podamos enviar los enlaces de verificación de correo electrónico automatizados a nuestros usuarios para su verificación. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que mostraremos un formulario simple de registro e inicio de sesión de usuario. Después del registro del usuario, enviaremos un enlace de verificación a la dirección de correo electrónico de nuestro usuario para verificar la dirección de correo electrónico del usuario. A continuación se muestra el video en el que veremos lo que vamos a construir en este artículo. 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: conecta tu aplicación a Back4App

Consulte Cómo conectar la aplicación de Android con Back4App para esta tarea.

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--text view for heading-->
    <TextView
        android:id="@+id/idTVHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center_horizontal"
        android:padding="5dp"
        android:text="Welcome to Geeks for Geeks \n Register Form"
        android:textAlignment="center"
        android:textColor="@color/purple_700"
        android:textSize="18sp" />
 
    <!--edit text for user name-->
    <EditText
        android:id="@+id/idEdtUserName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idTVHeader"
        android:layout_marginStart="10dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="10dp"
        android:hint="Enter UserName"
        android:inputType="text" />
 
    <!--edit text for user email-->
    <EditText
        android:id="@+id/idEdtEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idEdtUserName"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="10dp"
        android:hint="Enter Email Address"
        android:inputType="textEmailAddress" />
     
    <!--edit text for user password-->
    <EditText
        android:id="@+id/idEdtPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idEdtEmail"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="10dp"
        android:hint="Enter Password"
        android:inputType="textPassword" />
 
    <!--button to register our new user-->
    <Button
        android:id="@+id/idBtnRegister"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idEdtPassword"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="10dp"
        android:text="Register User"
        android:textAllCaps="false" />
     
</RelativeLayout>

 
Paso 4: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle. 

import android.content.Intent;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
 
import androidx.appcompat.app.AppCompatActivity;
 
import com.parse.ParseException;
import com.parse.ParseUser;
import com.parse.SignUpCallback;
 
public class MainActivity extends AppCompatActivity {
     
    // creating variables for our edit text and buttons.
    private EditText userNameEdt, passwordEdt, userEmailEdt;
    private Button registerBtn;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // initializing our edit text  and buttons.
        userNameEdt = findViewById(R.id.idEdtUserName);
        passwordEdt = findViewById(R.id.idEdtPassword);
        userEmailEdt = findViewById(R.id.idEdtEmail);
        registerBtn = findViewById(R.id.idBtnRegister);
         
        // adding on click listener for our button
        registerBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                 
                // on below line we are getting data from our edit text.
                String userName = userNameEdt.getText().toString();
                String password = passwordEdt.getText().toString();
                String email = userEmailEdt.getText().toString();
                 
                // checking if the entered text is empty or not.
                if (TextUtils.isEmpty(userName) && TextUtils.isEmpty(password) && TextUtils.isEmpty(email)) {
                    Toast.makeText(MainActivity.this, "Please enter user name and password", Toast.LENGTH_SHORT).show();
                }
                 
                // calling a method to register a user.
                registerUser(userName, password, email);
            }
        });
    }
 
    private void registerUser(String userName, String password, String email) {
         
        // on below line we are creating
        // a new user using parse user.
        ParseUser user = new ParseUser();
         
        // Set the user's username, user email and password,
        // which can be obtained from edit text
        user.setUsername(userName);
        user.setEmail(email);
        user.setPassword(password);
         
        // calling a method to register the user.
        user.signUpInBackground(new SignUpCallback() {
            @Override
            public void done(ParseException e) {
                // on user registration checking
                // if the error is null or not.
                if (e == null) {
                    // if the error is null we are displaying a toast message and
                    // redirecting our user to login activity and passing the user name.
                    Toast.makeText(MainActivity.this, "User Registered successfully \n Please verify your email", Toast.LENGTH_SHORT).show();
                    Intent i = new Intent(MainActivity.this, LoginActivity.class);
                    i.putExtra("usereName", userName);
                    i.putExtra("password", password);
                    startActivity(i);
                } else {
                    // if we get any error then we are logging out
                    // our user and displaying an error message
                    ParseUser.logOut();
                    Toast.makeText(MainActivity.this, "Fail to Register User..", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

 
Paso 5: Creación de una nueva actividad para iniciar sesión en nuestra aplicación

Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > Actividad > Actividad vacía y luego nombre su actividad como LoginActivity . 

Paso 6: trabajar con el archivo activity_login.xml

Vaya a la aplicación > res > diseño > actividad_login.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo   activity_login.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LoginActivity">
 
    <!--text view for heading-->
    <TextView
        android:id="@+id/idTVHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center_horizontal"
        android:padding="5dp"
        android:text="Welcome to Geeks for Geeks \n Login Form"
        android:textAlignment="center"
        android:textColor="@color/purple_700"
        android:textSize="18sp" />
 
    <!--edit text for user name-->
    <EditText
        android:id="@+id/idEdtUserName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idTVHeader"
        android:layout_marginStart="10dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="10dp"
        android:hint="Enter UserName"
        android:inputType="textEmailAddress" />
 
    <!--edit text for user password-->
    <EditText
        android:id="@+id/idEdtPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idEdtUserName"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="10dp"
        android:hint="Enter Password"
        android:inputType="textPassword" />
 
    <!--button to register our new user-->
    <Button
        android:id="@+id/idBtnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idEdtPassword"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="10dp"
        android:text="Login"
        android:textAllCaps="false" />
     
</RelativeLayout>

 
Paso 7: trabajar con el archivo LoginActivity.java

Vaya al archivo LoginActivity.java y consulte el siguiente código. A continuación se muestra el código para el archivo LoginActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle. 

import android.content.Intent;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
 
import androidx.appcompat.app.AppCompatActivity;
 
import com.parse.ParseUser;
 
public class LoginActivity extends AppCompatActivity {
     
    // creating variables for our edit text and buttons.
    private EditText userNameEdt, passwordEdt;
    private Button loginBtn;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
         
        // initializing our edit text  and buttons.
        userNameEdt = findViewById(R.id.idEdtUserName);
        passwordEdt = findViewById(R.id.idEdtPassword);
        loginBtn = findViewById(R.id.idBtnLogin);
        userNameEdt.setText(getIntent().getStringExtra("usereName"));
        passwordEdt.setText(getIntent().getStringExtra("password"));
         
        // adding on click listener for our button.
        loginBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                 
                // on below line we are getting data from our edit text.
                String userName = userNameEdt.getText().toString();
                String password = passwordEdt.getText().toString();
                 
                // checking if the entered text is empty or not.
                if (TextUtils.isEmpty(userName) && TextUtils.isEmpty(password)) {
                    Toast.makeText(LoginActivity.this, "Please enter user name and password", Toast.LENGTH_SHORT).show();
                }
                 
                // calling a method to login our user.
                loginUser(userName, password);
            }
        });
    }
 
    private void loginUser(String userName, String password) {
        // calling a method to login a user.
        ParseUser.logInInBackground(userName, password, (parseUser, e) -> {
            // after login checking if the user is null or not.
            if (parseUser != null) {
                // if the user is not null then we will display a toast message
                // with user login and passing that user to new activity.
                Toast.makeText(this, "Login Successful ", Toast.LENGTH_SHORT).show();
                Intent i = new Intent(LoginActivity.this, HomeActivity.class);
                i.putExtra("username", userName);
                startActivity(i);
            } else {
                // display an toast message when user logout of the app.
                ParseUser.logOut();
                Toast.makeText(LoginActivity.this, e.getMessage(), Toast.LENGTH_LONG).show();
            }
        });
    }
}

 
Paso 8: crear una nueva actividad para mostrar la pantalla de inicio

Después del inicio de sesión del usuario, redirigiremos a nuestro usuario a la página de inicio de la aplicación. Entonces, para eso, crearemos una nueva actividad. Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > Actividad > Actividad vacía y luego nombre su actividad como HomeActivity . 

Paso 9: trabajar con el archivo activity_home.xml

Vaya a la aplicación > res > diseño > actividad_inicio.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo    activity_home.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeActivity">
     
    <!--text view for displaying heading-->
    <TextView
        android:id="@+id/idTVHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:text="Welcome back again to Geeks for Geeks"
        android:textAlignment="center"
        android:textColor="@color/purple_700"
        android:textSize="18sp" />
     
    <!--text view for displaying user name-->
    <TextView
        android:id="@+id/idTVUserName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idTVHeader"
        android:layout_centerInParent="true"
        android:layout_marginTop="20dp"
        android:gravity="center_horizontal"
        android:text="UserName"
        android:textAlignment="center"
        android:textColor="@color/purple_700"
        android:textSize="25sp" />
     
</RelativeLayout>

 
Paso 10: trabajar con el archivo HomeActivity.java

Vaya al archivo HomeActivity.java y consulte el siguiente código. A continuación se muestra el código para el archivo HomeActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle. 

import android.os.Bundle;
import android.widget.TextView;
 
import androidx.appcompat.app.AppCompatActivity;
 
public class HomeActivity extends AppCompatActivity {
 
    // creating a variable for our text view..
    private TextView userNameTV;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
 
        // initializing our variables
        userNameTV = findViewById(R.id.idTVUserName);
         
        // getting data from intent.
        String name = getIntent().getStringExtra("username");
         
        // setting data to our text view.
        userNameTV.setText(name);
    }
}

 
Ahora hemos completado el trabajo en nuestra aplicación y ahora avanzaremos hacia la verificación de correo electrónico en la consola Back4App. 

Paso 11: agregar una plantilla de correo electrónico que se le enviará a su usuario para la verificación por correo electrónico

Navegue hasta el panel de control de la aplicación en la consola de Back4App. Dentro de esta consola. Navegue a la opción Configuración del servidor en el cajón de navegación izquierdo y dentro de su pantalla. Haga clic en la opción Configuración en la parte de correos electrónicos de verificación. Puedes ver la siguiente captura de pantalla.  

Después de ir a esta opción, puede ver la plantilla de correo electrónico. Puede agregar o editar esta plantilla de correo electrónico según sus requisitos. Después de actualizar la plantilla de correo electrónico. Asegúrese de guardar su plantilla de correo electrónico.  

Después de actualizar la plantilla de correo electrónico, guarde su plantilla de correo electrónico y luego ejecute su aplicación. Puede llegar a ver la salida en la pantalla de abajo. 

Producción: 

Consulte el proyecto en el siguiente enlace: https://github.com/ChaitanyaMunje/GFG-Back4App/tree/EmailVerification