¿Cómo usar ‘verifyPhoneNumber ()’ de Firebase para confirmar la propiedad del teléfono # sin usar # para iniciar sesión?

Posterior a de una extensa selección de datos solucionamos esta problema que pueden tener ciertos los usuarios. Te brindamos la solución y esperamos serte de gran apoyo.

Solución:

Como dijo @ christos-lytras en su respuesta, el código de verificación no está expuesto a su aplicación.

Esto se hace por razones de seguridad, ya que proporcionar el código utilizado para la autenticación fuera de banda en el dispositivo mismo permitiría a un usuario informado simplemente sacar el código de la memoria y autenticarse como si tuviera acceso a ese número de teléfono.

El flujo general de operaciones es:

1. Obtenga el número de teléfono para ser verificado
2. Usa ese número con verifyPhoneNumber() y almacenar en caché el ID de verificación que devuelve
3. Solicitar al usuario que ingrese el código (o recuperarlo automáticamente)
4. Agrupe el ID y la entrada del usuario juntos como una credencial usando firebase.auth.PhoneAuthProvider.credential(id, code)
5. Intente iniciar sesión con esa credencial usando
   firebase.auth().signInWithCredential(credential)

En su código fuente, también usa el on(event, observer, errorCb, successCb) oyente del verifyPhoneNumber(phoneNumber) método. Sin embargo, este método también admite la escucha de resultados mediante Promises, lo que le permite encadenar a su consulta de Firebase. Esto se muestra a continuación.

Envío del código de verificación:

firebase
  .firestore()
  .collection('users')
  .where('phoneNumber', '==', this.state.phoneNumber)
  .get()
  .then((querySnapshot) => 
    if (!querySnapshot.empty) 
      // User found with this phone number.
      throw new Error('already-exists');
    

    // change status
    this.setState( status: 'Sending confirmation code...' );

    // send confirmation OTP
    return firebase.auth().verifyPhoneNumber(this.state.phoneNumber)
  )
  .then((phoneAuthSnapshot) => 
    // verification sent
    this.setState(
      status: 'Confirmation code sent.',
      verificationId: phoneAuthSnapshot.verificationId,
      showCodeInput: true // shows input field such as react-native-confirmation-code-field
    );
  )
  .catch((error) => 
    // there was an error
    let newStatus;
    if (error.message === 'already-exists') 
      newStatus = 'Sorry, this phone number is already in use.';
     else 
      // Other internal error
      // see https://firebase.google.com/docs/reference/js/firebase.firestore.html#firestore-error-code
      // see https://firebase.google.com/docs/reference/js/firebase.auth.PhoneAuthProvider#verify-phone-number
      // probably 'unavailable' or 'deadline-exceeded' for loss of connection while querying users
      newStatus = 'Failed to send verification code.';
      console.log('Unexpected error during firebase operation: ' + JSON.stringify(error));
    

    this.setState(
      status: newStatus,
      processing: false
    );
  );

Manejo de un código de verificación proporcionado por el usuario:

codeInputSubmitted(code)  firebase.initializeApp(firebase.app().options, 'auth-worker');
  fbWorkerAuth = fbWorkerApp.auth();  
  fbWorkerAuth.setPersistence(firebase.auth.Auth.Persistence.NONE); // disables caching of account credentials

  fbWorkerAuth.signInWithCredential(credential)
    .then((userCredential) => 
      // userCredential.additionalUserInfo.isNewUser may be present
      // userCredential.credential can be used to link to an existing user account

      // successful
      this.setState(
        status: 'Phone number verified!',
        verificationId: null,
        showCodeInput: false,
        user: userCredential.user;
      );

      return fbWorkerAuth.signOut().catch(err => console.error('Ignored sign out error: ', err);
    )
    .catch((err) => 
      // failed
      let userErrorMessage;
      if (error.code === 'auth/invalid-verification-code') 
        userErrorMessage = 'Sorry, that code was incorrect.'
       else if (error.code === 'auth/user-disabled') 
        userErrorMessage = 'Sorry, this phone number has been blocked.';
       else 
        // other internal error
        // see https://firebase.google.com/docs/reference/js/firebase.auth.Auth.html#sign-inwith-credential
        userErrorMessage = 'Sorry, we couldn't verify that phone number at the moment. '
          + 'Please try again later. '
          + 'nnIf the issue persists, please contact support.'
      
      this.setState(
        codeInputErrorMessage: userErrorMessage
      );
    )

Referencias API:

• verifyPhoneNumber() – Reaccionar nativo o Firebase
• PhoneAuthProvider.credential(id, code) – Firebase
• signInWithCredential() – Reaccionar nativo o Firebase

Componente de entrada de código sugerido:

• react-native-confirmation-code-field

Firebase firebase.auth.PhoneAuthProvider no le dará el código para comparar, tendrá que usar verificationId para verificar el verificationCode que ingresa el usuario. Hay un ejemplo básico en la documentación de firebase que usa firebase.auth.PhoneAuthProvider.credential y luego intenta iniciar sesión con estas credenciales con firebase.auth().signInWithCredential(phoneCredential):

firebase
  .firestore()
  .collection('users')
  .where('phoneNumber', '==', this.state.phoneNumber)
  .get()
  .then((querySnapshot) => 
    if (querySnapshot.empty === true) 
      // change status
      this.setState( status: 'Sending confirmation code...' );
      // send confirmation OTP
      firebase.auth().verifyPhoneNumber(this.state.phoneNumber).on(
        'state_changed',
        (phoneAuthSnapshot) => 
          switch (phoneAuthSnapshot.state) 
            case firebase.auth.PhoneAuthState.CODE_SENT:
              console.log('Verification code sent', phoneAuthSnapshot);
              // this.setState( status: 'Confirmation code sent.', confirmationCode: phoneAuthSnapshot.code );

              // Prompt the user the enter the verification code they get and save it to state
              const userVerificationCodeInput = this.state.userVerificationCode;
              const phoneCredentials = firebase.auth.PhoneAuthProvider.credential(
                phoneAuthSnapshot.verificationId, 
                userVerificationCodeInput
              );

              // Try to sign in with the phone credentials
              firebase.auth().signInWithCredential(phoneCredentials)
                .then(userCredentials => 
                  // Sign in successfull
                  // Use userCredentials.user and userCredentials.additionalUserInfo 
                )
                .catch(error => 
                  // Check error code to see the reason
                  // Expect something like:
                  // auth/invalid-verification-code
                  // auth/invalid-verification-id
                );

              break;
            case firebase.auth.PhoneAuthState.ERROR:
              console.log('Verification error: ' + JSON.stringify(phoneAuthSnapshot));
              this.setState( status: 'Error sending code.', processing: false );
              break;
          
        ,
        (error) => 
          console.log('Error verifying phone number: ' + error);
        
      );
    
  )
  .catch((error) => 
    // there was an error
    console.log('Error during firebase operation: ' + JSON.stringify(error));
  );

Nos puedes animar nuestro quehacer mostrando un comentario y puntuándolo te lo agradecemos.

---

---

Utiliza Nuestro Buscador