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í .