Autenticación de Firebase con número de teléfono OTP en Android

Muchas aplicaciones requieren que sus usuarios estén autenticados. Entonces, con el propósito de autenticar las aplicaciones, utiliza la autenticación del número de teléfono dentro de sus aplicaciones. En la autenticación telefónica, el usuario debe verificar su identidad con su número de teléfono. Dentro de la aplicación, el usuario debe ingresar su número de teléfono, luego recibirá un código de verificación en su número de teléfono móvil. Tiene que ingresar ese código de verificación y verificar su identidad. Así es como funciona la autenticación telefónica. Firebase ofrece muchas formas de autenticación de usuarios como Google, correo electrónico y contraseña, teléfono y muchas más. En este artículo, veremos la implementación de la autenticación telefónica dentro de nuestra aplicación usando Firebase. 

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

Vamos a crear una aplicación simple que tiene dos pantallas. La primera pantalla será nuestra pantalla de Verificación en la que el usuario debe agregar su número de teléfono. Después de agregar su número de teléfono, el usuario hará clic en el botón Obtener OTP y luego Firebase enviará OTP a ese número que se menciona anteriormente. Después de recibir esa OTP, el usuario debe ingresar esa OTP en el campo de texto a continuación y hacer clic en el botón a continuación para verificar con la OTP ingresada. Después de hacer clic en el botón de verificación, Firebase verificará que OTP y permitirá que el usuario ingrese a la pantalla de inicio solo cuando la OTP ingresada sea correcta; de lo contrario, el usuario recibirá un mensaje de error.

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 Firebase 

Después de crear un nuevo proyecto en Android Studio, conecte su aplicación a Firebase. Para conectar su aplicación a firebase. Navegue a Herramientas en la barra superior. Después de eso, haga clic en Firebase. Se abrirá una nueva ventana en el lado derecho. Dentro de esa ventana, haga clic en Autenticación y luego en Autenticación de correo electrónico y contraseña. 

Después de hacer clic en la autenticación de correo electrónico y contraseña, verá la siguiente pantalla. Dentro de esta pantalla, haga clic en la primera opción para conectarse a Firebase y luego haga clic en la segunda opción para agregar la autenticación de Firebase a su aplicación.  

Paso 3: Verifique que la dependencia para la autenticación de Firebase se agregue dentro de su aplicación

Después de conectar su aplicación a Firebase. Asegúrese de agregar esta dependencia en su archivo build.gradle si no se agregó. Después de agregar esta dependencia, sincronice su proyecto.  

Nota : asegúrese de agregar la versión de dependencia exacta en la imagen de arriba porque la dependencia más reciente no tiene la implementación para la detección automática de OTP . 

Paso 4: trabajar con el archivo activity_main.xml

Vaya al archivo activity_main.xml y consulte el siguiente código. 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"
    tools:context=".MainActivity">
 
    <!--Edittext for getting users phone number-->
    <EditText
        android:id="@+id/idEdtPhoneNumber"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_margin="10dp"
        android:hint="Enter your phone"
        android:importantForAutofill="no"
        android:inputType="phone" />
 
    <!--Button for getting OTP-->
    <Button
        android:id="@+id/idBtnGetOtp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idEdtPhoneNumber"
        android:layout_margin="10dp"
        android:text="Get OTP"
        android:textAllCaps="false" />
     
    <!--Edittext for getting otp from user-->
    <EditText
        android:id="@+id/idEdtOtp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idBtnGetOtp"
        android:layout_margin="10dp"
        android:hint="Enter OTP"
        android:importantForAutofill="no"
        android:inputType="phone" />
 
    <!--button for verifying user OTP-->
    <Button
        android:id="@+id/idBtnVerify"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idEdtOtp"
        android:layout_margin="10dp"
        android:text="Verify OTP"
        android:textAllCaps="false" />
 
</RelativeLayout>

 
 Paso 5: agregue permisos para Internet en su archivo Manifest.xml

Vaya a la aplicación > archivo AndroidManifest.xml y agréguele los siguientes permisos.  

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Paso 6: crea una nueva actividad para nuestra página de inicio 

Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en el nombre del paquete de su aplicación y haga clic en Nuevo > Actividad > Actividad vacía y asigne un nombre a su actividad. Aquí le hemos dado un nombre como HomeActivity .

Paso 7: 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.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
 
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.android.gms.tasks.TaskExecutors;
import com.google.firebase.FirebaseException;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.PhoneAuthCredential;
import com.google.firebase.auth.PhoneAuthProvider;
 
import java.util.concurrent.TimeUnit;
 
public class MainActivity extends AppCompatActivity {
 
    // variable for FirebaseAuth class
    private FirebaseAuth mAuth;
     
    // variable for our text input
    // field for phone and OTP.
    private EditText edtPhone, edtOTP;
     
    // buttons for generating OTP and verifying OTP
    private Button verifyOTPBtn, generateOTPBtn;
     
    // string for storing our verification ID
    private String verificationId;
     
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // below line is for getting instance
        // of our FirebaseAuth.
        mAuth = FirebaseAuth.getInstance();
         
        // initializing variables for button and Edittext.
        edtPhone = findViewById(R.id.idEdtPhoneNumber);
        edtOTP = findViewById(R.id.idEdtOtp);
        verifyOTPBtn = findViewById(R.id.idBtnVerify);
        generateOTPBtn = findViewById(R.id.idBtnGetOtp);
 
        // setting onclick listener for generate OTP button.
        generateOTPBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // below line is for checking weather the user
                // has entered his mobile number or not.
                if (TextUtils.isEmpty(edtPhone.getText().toString())) {
                    // when mobile number text field is empty
                    // displaying a toast message.
                    Toast.makeText(MainActivity.this, "Please enter a valid phone number.", Toast.LENGTH_SHORT).show();
                } else {
                    // if the text field is not empty we are calling our
                    // send OTP method for getting OTP from Firebase.
                    String phone = "+91" + edtPhone.getText().toString();
                    sendVerificationCode(phone);
                }
            }
        });
 
        // initializing on click listener
        // for verify otp button
        verifyOTPBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // validating if the OTP text field is empty or not.
                if (TextUtils.isEmpty(edtOTP.getText().toString())) {
                    // if the OTP text field is empty display
                    // a message to user to enter OTP
                    Toast.makeText(MainActivity.this, "Please enter OTP", Toast.LENGTH_SHORT).show();
                } else {
                    // if OTP field is not empty calling
                    // method to verify the OTP.
                    verifyCode(edtOTP.getText().toString());
                }
            }
        });
    }
 
    private void signInWithCredential(PhoneAuthCredential credential) {
        // inside this method we are checking if
        // the code entered is correct or not.
        mAuth.signInWithCredential(credential)
                .addOnCompleteListener(new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            // if the code is correct and the task is successful
                            // we are sending our user to new activity.
                            Intent i = new Intent(MainActivity.this, HomeActivity.class);
                            startActivity(i);
                            finish();
                        } else {
                            // if the code is not correct then we are
                            // displaying an error message to the user.
                            Toast.makeText(MainActivity.this, task.getException().getMessage(), Toast.LENGTH_LONG).show();
                        }
                    }
                });
    }
 
 
    private void sendVerificationCode(String number) {
        // this method is used for getting
        // OTP on user phone number.
        PhoneAuthOptions options =
                PhoneAuthOptions.newBuilder(mAuth)
                        .setPhoneNumber(number)            // Phone number to verify
                        .setTimeout(60L, TimeUnit.SECONDS) // Timeout and unit
                        .setActivity(this)                 // Activity (for callback binding)
                        .setCallbacks(mCallBack)           // OnVerificationStateChangedCallbacks
                        .build();
        PhoneAuthProvider.verifyPhoneNumber(options);
    }
 
    // callback method is called on Phone auth provider.
    private PhoneAuthProvider.OnVerificationStateChangedCallbacks
             
            // initializing our callbacks for on
            // verification callback method.
            mCallBack = new PhoneAuthProvider.OnVerificationStateChangedCallbacks() {
 
        // below method is used when
        // OTP is sent from Firebase
        @Override
        public void onCodeSent(String s, PhoneAuthProvider.ForceResendingToken forceResendingToken) {
            super.onCodeSent(s, forceResendingToken);
            // when we receive the OTP it
            // contains a unique id which
            // we are storing in our string
            // which we have already created.
            verificationId = s;
        }
 
        // this method is called when user
        // receive OTP from Firebase.
        @Override
        public void onVerificationCompleted(PhoneAuthCredential phoneAuthCredential) {
            // below line is used for getting OTP code
            // which is sent in phone auth credentials.
            final String code = phoneAuthCredential.getSmsCode();
             
            // checking if the code
            // is null or not.
            if (code != null) {
                // if the code is not null then
                // we are setting that code to
                // our OTP edittext field.
                edtOTP.setText(code);
                 
                // after setting this code
                // to OTP edittext field we
                // are calling our verifycode method.
                verifyCode(code);
            }
        }
 
        // this method is called when firebase doesn't
        // sends our OTP code due to any error or issue.
        @Override
        public void onVerificationFailed(FirebaseException e) {
            // displaying error message with firebase exception.
            Toast.makeText(MainActivity.this, e.getMessage(), Toast.LENGTH_LONG).show();
        }
    };
 
    // below method is use to verify code from Firebase.
    private void verifyCode(String code) {
        // below line is used for getting 
        // credentials from our verification id and code.
        PhoneAuthCredential credential = PhoneAuthProvider.getCredential(verificationId, code);
         
        // after getting credential we are
        // calling sign in method.
        signInWithCredential(credential);
    }
}

Paso 8: Trabajando en HomeActivity

Ahora hemos autenticado a nuestro usuario y avanzamos hacia nuestra Actividad de inicio. Ahora mostraremos un mensaje de bienvenida a nuestro usuario en caso de autenticación exitosa. Para esto, vaya a la aplicación > res > diseño > actividad_inicio.xml y agréguele el siguiente código. 

<?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">
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="10dp"
        android:text="Geeks for Geeks \n Welcome to Home Screen"
        android:textAlignment="center"
        android:textColor="@color/purple_500"
        android:textSize="20sp" />
 
</RelativeLayout>

Paso 9: habilite la autenticación de teléfono de Firebase en nuestra consola de Firebase

Para habilitar la autenticación telefónica en Firebase console, vaya a Firebase Console . Ahora haga clic en la opción Ir a la consola y navegue hasta su proyecto. Después de eso, haga clic en su proyecto. Puede llegar a ver la siguiente pantalla. 

Después de hacer clic en Autenticación, verá la siguiente pantalla. En esta pantalla, haga clic en la pestaña Método de inicio de sesión.

Después de hacer clic en el método de inicio de sesión, verá la siguiente lista de pantallas de autenticación. Haz clic en la opción Teléfono y actívala. 

Haga clic en la opción Teléfono y verá la siguiente pantalla emergente. Dentro de esta pantalla, haga clic en la opción habilitar y guárdela. 

Nota: Para obtener OTP, no ingrese su número de teléfono con el código de país porque ya estamos agregando ese código de país en nuestro propio código. 

Producción:

Fuente : Haga clic aquí para descargar los archivos del proyecto .