Verificación del número de teléfono usando Firebase en Android

Número de teléfono La autenticación de Firebase se usa para iniciar sesión en un usuario mediante el envío de un mensaje SMS al teléfono del usuario. El usuario inicia sesión con un código de un solo uso contenido en el mensaje SMS. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin .

Nota: para implementar esto en lenguaje Java , consulte este artículo Autenticación de Firebase con número de teléfono OTP en Android

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 Kotlin como lenguaje de programación.

Paso 2: conecta el proyecto a Firebase.

Paso 3: agregue la dependencia al archivo build.gradle y haga clic en «sincronizar ahora»

    plataforma de implementación(‘com.google.firebase:firebase-bom:26.5.0’)

   implementación ‘com.google.firebase:firebase-auth-ktx’

Paso 4: Crea dos nuevas actividades.

Cree dos nuevas actividades. Un PhoneNumberActivity.kt con el archivo de diseño activity_phone_number.xml para ingresar el número de teléfono e iniciar el proceso de autenticación. Segundo OtpActivity.kt con el archivo de diseño activity_otp.xml para ingresar OTP recibido de firebase.

Paso 5: trabajar con el diseño

Trabajando con activity_phone_number.xml . Vaya al archivo activity_phone_number.xml y escriba el siguiente código.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    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=".PhoneNumberActivity">
 
    <!--This will be used to enter the phone number-->
    <EditText
        android:id="@+id/et_phone_number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="200dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:ems="10"
        android:hint="Enter Phone Number"
        android:inputType="phone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteY="85dp" />
     
      <!--On click of this button OTP will be send to phone-->
    <Button
        android:id="@+id/button_otp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Send OTP"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_phone_number" />
   
</androidx.constraintlayout.widget.ConstraintLayout>

Trabajando con actividad_otp.xml. Vaya al archivo activity_otp.xml y escriba el siguiente código.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    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=".OtpActivity">
 
    <TextView
        android:id="@+id/tv_otp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="200dp"
        android:text="Enter OTP"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
     
      <!--We will use it to enter OTP after we receive OTP-->
    <EditText
        android:id="@+id/et_otp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:hint="Enter OTP"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_otp" />
 
    <!--On click of this button final authentication will start-->
    <Button
        android:id="@+id/login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/et_otp" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Trabajando con activity_main.xml . Ve al archivo activity_main.xml y escribe el siguiente código. Esta es la actividad final a la que llegamos después de completar la verificación.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    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=".MainActivity">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome To GFG!!"
        android:textSize="22sp"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 6: trabajar con el archivo PhoneNumberActivity.kt

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

Kotlin

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import com.google.firebase.FirebaseException
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.PhoneAuthCredential
import com.google.firebase.auth.PhoneAuthOptions
import com.google.firebase.auth.PhoneAuthProvider
import java.util.concurrent.TimeUnit
 
class PhoneNumberActivity : AppCompatActivity() {
   
    // this stores the phone number of the user
    var number : String =""
   
    // create instance of firebase auth
    lateinit var auth: FirebaseAuth
   
      // we will use this to match the sent otp from firebase
    lateinit var storedVerificationId:String
    lateinit var resendToken: PhoneAuthProvider.ForceResendingToken
    private lateinit var callbacks: PhoneAuthProvider.OnVerificationStateChangedCallbacks
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_phone_number)
 
        auth=FirebaseAuth.getInstance()
 
        // start verification on click of the button
        findViewById<Button>(R.id.button_otp).setOnClickListener {
            login()
        }
 
        // Callback function for Phone Auth
        callbacks = object : PhoneAuthProvider.OnVerificationStateChangedCallbacks() {
 
            // This method is called when the verification is completed
            override fun onVerificationCompleted(credential: PhoneAuthCredential) {
                startActivity(Intent(applicationContext, MainActivity::class.java))
                finish()
                Log.d("GFG" , "onVerificationCompleted Success")
            }
 
            // Called when verification is failed add log statement to see the exception
            override fun onVerificationFailed(e: FirebaseException) {
                Log.d("GFG" , "onVerificationFailed  $e")
            }
 
            // On code is sent by the firebase this method is called
            // in here we start a new activity where user can enter the OTP
            override fun onCodeSent(
                verificationId: String,
                token: PhoneAuthProvider.ForceResendingToken
            ) {
                Log.d("GFG","onCodeSent: $verificationId")
                storedVerificationId = verificationId
                resendToken = token
               
                // Start a new activity using intent
                // also send the storedVerificationId using intent
                // we will use this id to send the otp back to firebase
                val intent = Intent(applicationContext,OtpActivity::class.java)
                intent.putExtra("storedVerificationId",storedVerificationId)
                startActivity(intent)
                finish()
            }
        }
    }
 
    private fun login() {
        number = findViewById<EditText>(R.id.et_phone_number).text.trim().toString()
         
        // get the phone number from edit text and append the country cde with it
        if (number.isNotEmpty()){
            number = "+91$number"
            sendVerificationCode(number)
        }else{
            Toast.makeText(this,"Enter mobile number", Toast.LENGTH_SHORT).show()
        }
    }
 
    // this method sends the verification code
      // and starts the callback of verification
    // which is implemented above in onCreate
    private fun sendVerificationCode(number: String) {
        val options = PhoneAuthOptions.newBuilder(auth)
            .setPhoneNumber(number) // Phone number to verify
            .setTimeout(60L, TimeUnit.SECONDS) // Timeout and unit
            .setActivity(this) // Activity (for callback binding)
            .setCallbacks(callbacks) // OnVerificationStateChangedCallbacks
            .build()
        PhoneAuthProvider.verifyPhoneNumber(options)
        Log.d("GFG" , "Auth started")
    }
}

Paso 7: trabajar con el archivo OtpActivity.kt

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

Kotlin

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.FirebaseAuthInvalidCredentialsException
import com.google.firebase.auth.PhoneAuthCredential
import com.google.firebase.auth.PhoneAuthProvider
 
class OtpActivity : AppCompatActivity() {
   
    // get reference of the firebase auth
    lateinit var auth: FirebaseAuth
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_otp)
 
        auth=FirebaseAuth.getInstance()
 
        // get storedVerificationId from the intent
        val storedVerificationId= intent.getStringExtra("storedVerificationId")
 
        // fill otp and call the on click on button
        findViewById<Button>(R.id.login).setOnClickListener {
            val otp = findViewById<EditText>(R.id.et_otp).text.trim().toString()
            if(otp.isNotEmpty()){
                val credential : PhoneAuthCredential = PhoneAuthProvider.getCredential(
                    storedVerificationId.toString(), otp)
                signInWithPhoneAuthCredential(credential)
            }else{
                Toast.makeText(this,"Enter OTP", Toast.LENGTH_SHORT).show()
            }
        }
    }
    // verifies if the code matches sent by firebase
    // if success start the new activity in our case it is main Activity
    private fun signInWithPhoneAuthCredential(credential: PhoneAuthCredential) {
        auth.signInWithCredential(credential)
            .addOnCompleteListener(this) { task ->
                if (task.isSuccessful) {
                    val intent = Intent(this , MainActivity::class.java)
                    startActivity(intent)
                    finish()
                } else {
                    // Sign in failed, display a message and update the UI
                    if (task.exception is FirebaseAuthInvalidCredentialsException) {
                        // The verification code entered was invalid
                        Toast.makeText(this,"Invalid OTP", Toast.LENGTH_SHORT).show()
                    }
                }
            }
    }
}

Paso 8: Vaya a AndroidManifest.xml y agregue el siguiente código

XML

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.geeksforgeeks.phoneauth">
 
    <uses-permission android:name="android.permission.INTERNET"/>
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.PhoneAuth">
        <activity android:name=".OtpActivity"></activity>
        <activity android:name=".PhoneNumberActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
 
        </activity>
        <activity android:name=".MainActivity">
 
        </activity>
    </application>
 
</manifest>

Paso 9: habilite la API DeviceCheck de Android para su proyecto

En Google Cloud Console, habilite la API de Android DeviceCheck para su proyecto. Se utilizará la clave de API de Firebase predeterminada y se debe permitir el acceso a la API de DeviceCheck.

Paso 10: agregue claves SHA de Android Studio a Firebase

Copie las claves SHA1 y SHA-256 de su proyecto y péguelas en Firebase Console. A continuación se muestra la captura de pantalla para guiarlo.

Nota: Consulte este artículo ¿Cómo generar claves SHA1, MD5 y SHA-256 en Android Studio?

En la consola de Firebase , vaya a Descripción general del proyecto -> Configuración del proyecto, haga clic en el botón Agregar huella digital y agregue sus claves SHA copiadas de Firebase

Paso 11: habilite el inicio de sesión con número de teléfono para su proyecto de Firebase

En la consola Firebase, elija su proyecto, abra la sección Autenticación. En la página Método de inicio de sesión, habilite el método de inicio de sesión Número de teléfono.

Producción:

Repositorio de Github aquí .

Publicación traducida automáticamente

Artículo escrito por introidx y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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