¿Cómo usar la biblioteca de autenticación de Firebase UI en Android?

Firebase UI es una biblioteca proporcionada por Firebase para aplicaciones de Android que facilita tantas tareas al integrar Firebase en Android. Esta biblioteca proporciona tantas funciones adicionales que podemos integrar en nuestro Android muy fácilmente. En este artículo, veremos el uso de esta biblioteca para agregar autenticación en nuestras aplicaciones de Android. 

¿Cuáles son los beneficios de usar la biblioteca de autenticación de Firebase UI?

• Al usar esta biblioteca, el código que necesitamos para integrar cualquier autenticación específica se reduce y será más fácil para el flujo de autenticación del usuario.
• Al usar esta biblioteca, podemos usar múltiples proveedores de autenticación a la vez dentro de nuestras aplicaciones, como correo electrónico y contraseña, Facebook, teléfono, Google y muchos más.
• Las tareas de administración de cuentas se vuelven fáciles al usar esta biblioteca.
• La propia biblioteca crea la interfaz de usuario de inicio de sesión para cada proveedor de autenticación; puede personalizar la interfaz de usuario según los requisitos.
• Con esta biblioteca, podrá vincular de forma segura cuentas de usuario para diferentes identidades.
• Con esta biblioteca, puede agregar integración automática con Smart Lock para contraseñas para el inicio de sesión entre dispositivos.

¿Qué vamos a compilar con la biblioteca de autenticación de Firebase UI?

Usando esta biblioteca, simplemente estamos creando una aplicación en la que pediremos a los usuarios que inicien sesión utilizando diferentes opciones de inicio de sesión, como Google, correo electrónico y contraseña, y número de teléfono. Después de la autenticación exitosa de nuestro usuario. Redirigiremos a nuestro usuario a una nueva pantalla donde mostraremos un simple mensaje de bienvenida a nuestro usuario. Dentro de esa pantalla, agregaremos un botón simple que se usará para cerrar la sesión del usuario de la aplicación y redirigir a ese usuario a la pantalla de inicio de sesión para la autenticación. A continuación se muestra el GIF en el que conocerá lo que vamos a construir en esta aplicación.

1) Autenticación telefónica

2) Autenticación de correo electrónico

3) Autenticación de Google

Implementación paso a paso

Paso 1: crea un nuevo proyecto de Android Studio

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. Conecta tu 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: agregue la siguiente dependencia al archivo build.gradle

implementación ‘com.firebaseui:firebase-ui-auth:4.0.0’

Sus archivos Gradle deben tener las siguientes dependencias presentes en la sección de dependencias. 

Paso 4: agregue permisos de Internet en el archivo AndroidManifest.xml

Vaya a la aplicación > archivo AndroidManifest.xml dentro de ese archivo y agregue permiso para Internet. Agregue las siguientes líneas en el archivo  AndroidManifest.xml .

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

Paso 5: trabajar con el archivo activity_main.xml

No tiene que agregar ningún tipo de vista dentro de su activity_main.xml porque obtendremos nuestra interfaz de usuario de la dependencia de la interfaz de usuario de Firebase, solo personalizaremos esa interfaz de usuario de acuerdo con nuestros requisitos. Vaya a la aplicación > res > diseño > actividad_principal.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=".MainActivity">
</RelativeLayout>

Paso 6: Crear una nueva actividad para nuestra pantalla de inicio 

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

Paso 7: crear un estilo personalizado para nuestra interfaz de usuario de la pantalla de inicio de sesión

Usaremos un estilo personalizado para la interfaz de usuario, por lo que hemos creado un estilo personalizado para nuestra interfaz de usuario. Para agregar estilos a su interfaz de usuario de inicio de sesión. Vaya a aplicación > res > valores > themes.xml y agregue el siguiente código dentro de la etiqueta <resources>. 

<!--below is the custom theme which we will be using for our Login Screen-->
    <!--We are using no action bar theme for our Login screen-->
    <style name="Theme" parent="Theme.AppCompat.Light.NoActionBar">
        <!--below line is for setting our text color to black-->
        <item name="android:textColor">@color/black</item>
        <!--we are setting our primary color to green-->
        <item name="colorPrimary">@color/purple_500</item>
        <!--we are setting our primary color dark to green-->
        <item name="colorPrimaryDark">@color/purple_500</item>
        <!--we are setting our edittext color to black-->
        <item name="android:editTextColor">@color/black</item>
        <!--we are setting our window background color to white-->
        <item name="android:windowBackground">@color/white</item>
    </style>

Paso 8: trabajar con el archivo MainActivity.java

MainActivity.java MainActivity.java

import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Bundle;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
  
import com.firebase.ui.auth.AuthUI;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;
  
import java.util.Arrays;
import java.util.List;
  
public class MainActivity extends AppCompatActivity {
      
    // variable for Firebase Auth
    private FirebaseAuth mFirebaseAuth;
      
    // declaring a const int value which we
    // will be using in Firebase auth.
    public static final int RC_SIGN_IN = 1;
      
    // creating an auth listener for our Firebase auth
    private FirebaseAuth.AuthStateListener mAuthStateListner;
  
    // below is the list which we have created in which 
    // we can add the authentication which we have to 
    // display inside our app.
    List<AuthUI.IdpConfig> providers = Arrays.asList(
              
            // below is the line for adding 
            // email and password authentication.
            new AuthUI.IdpConfig.EmailBuilder().build(),
              
            // below line is used for adding google
            // authentication builder in our app.
            new AuthUI.IdpConfig.GoogleBuilder().build(),
              
            // below line is used for adding phone 
            // authentication builder in our app.
            new AuthUI.IdpConfig.PhoneBuilder().build());
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // below line is for getting instance 
        // for our firebase auth
        mFirebaseAuth = FirebaseAuth.getInstance();
          
        // below line is used for calling auth listener
        // for oue Firebase authentication.
        mAuthStateListner = new FirebaseAuth.AuthStateListener() {
            @SuppressLint("ResourceType")
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
                  
                // we are calling method for on authentication state changed.
                // below line is used for getting current user which is
                // authenticated previously.
                FirebaseUser user = firebaseAuth.getCurrentUser();
                  
                // checking if the user 
                // is null or not.
                if (user != null) {
                    // if the user is already authenticated then we will
                    // redirect our user to next screen which is our home screen.
                    // we are redirecting to new screen via an intent.
                    Intent i = new Intent(MainActivity.this, HomeActivity.class);
                    startActivity(i);
                    // we are calling finish method to kill or 
                    // mainactivity which is displaying our login ui.
                    finish();
                } else {
                    // this method is called when our 
                    // user is not authenticated previously.
                    startActivityForResult(
                            // below line is used for getting 
                            // our authentication instance.
                            AuthUI.getInstance()
                                    // below line is used to 
                                    // create our sign in intent
                                    .createSignInIntentBuilder()
                                      
                                    // below line is used for adding smart 
                                    // lock for our authentication.
                                    // smart lock is used to check if the user 
                                    // is authentication through different devices.
                                    // currently we are disabling it.
                                    .setIsSmartLockEnabled(false)
                                      
                                    // we are adding different login providers which
                                    // we have mentioned above in our list.
                                    // we can add more providers according to our 
                                    // requirement which are available in firebase.
                                    .setAvailableProviders(providers)
                                      
                                    // below line is for customizing our theme for 
                                    // login screen and set logo method is used for
                                    // adding logo for our login page.
                                    .setLogo(R.drawable.gfgimage).setTheme(R.style.Theme)
                                      
                                    // after setting our theme and logo 
                                    // we are calling a build() method 
                                    // to build our login screen.
                                    .build(),
                            // and lastly we are passing our const 
                            // integer which is declared above.
                            RC_SIGN_IN
                    );
                }
            }
        };
    }
  
    @Override
    protected void onResume() {
        super.onResume();
        // we are calling our auth 
        // listener method on app resume.
        mFirebaseAuth.addAuthStateListener(mAuthStateListner);
    }
  
    @Override
    protected void onPause() {
        super.onPause();
        // here we are calling remove auth 
        // listener method on stop.
        mFirebaseAuth.removeAuthStateListener(mAuthStateListner);
    }
}

Paso 9: trabajar con el archivo activity_home.xml

inicio_actividad.xml inicio_actividad.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">
  
    <!--welcome message in text view-->
    <TextView
        android:id="@+id/idheadTV"
        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" />
  
    <!--Button for logout from the app-->
    <Button
        android:id="@+id/idBtnLogout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/idheadTV"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="Logout"
        android:textAllCaps="false" />
      
</RelativeLayout>

Paso 10: trabajar con el archivo HomeActivity.java

InicioActividad.java InicioActividad.java

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
  
import com.firebase.ui.auth.AuthUI;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
  
public class HomeActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
          
        // button for logout and initialing our button.
        Button logoutBtn = findViewById(R.id.idBtnLogout);
  
        // adding onclick listener for our logout button.
        logoutBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                  
                // below line is for getting instance
                // for AuthUi and after that calling a 
                // sign out method from FIrebase.
                AuthUI.getInstance()
                        .signOut(HomeActivity.this)
                          
                        // after sign out is executed we are redirecting
                        // our user to MainActivity where our login flow is being displayed.
                        .addOnCompleteListener(new OnCompleteListener<Void>() {
                            public void onComplete(@NonNull Task<Void> task) {
                                  
                                // below method is used after logout from device.
                                Toast.makeText(HomeActivity.this, "User Signed Out", Toast.LENGTH_SHORT).show();
                                  
                                // below line is to go to MainActivity via an intent.
                                Intent i = new Intent(HomeActivity.this, MainActivity.class);
                                startActivity(i);
                            }
                        });
            }
        });
    }
}

Paso 11: habilite los proveedores de autenticación en Firebase Console

Para habilitar la autenticación telefónica en Firebase console. Vaya a la consola de Firebase . 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á debajo la lista de pantallas de autenticación. Haga clic en la opción Correo electrónico y contraseña y actívela.  

Haga clic en la opción Contraseña de correo electrónico y verá la siguiente pantalla emergente. Dentro de esta pantalla, haga clic en la opción habilitar y guárdela.  

Ahora, de manera similar, haga clic en la opción Teléfono como se muestra a continuación

Ahora podrá ver la siguiente opción después de hacer clic en la autenticación del teléfono, habilitar la autenticación del teléfono y guardarla. 

Ahora habilitaremos la Autenticación de Google habilitándola simplemente haciendo clic en la opción de Google de la lista. 

Después de hacer clic en la opción de Google, verá el siguiente mensaje emergente, haga clic en habilitarlo y guardarlo. 

Después de habilitar todos los métodos de autenticación, verá la siguiente pantalla con autenticación. 

Después de habilitar esta opción en Firebase Console. Ahora ejecute su aplicación y pruebe toda la autenticación. Puede llegar a ver la salida en la siguiente pantalla. 

Producción:

Hemos creado tres vídeos de salida en los que hemos mostrado cada autenticación. 

1) El primero es para la opción de inicio de sesión de Google

2) El segundo es para la autenticación mediante un número de teléfono

3) El tercero está usando autenticación de correo electrónico y contraseña

Enlace GitHub: https://github.com/ChaitanyaMunje/FirebasePhoneAuthentication/tree/FirebaseUIAuthentication