firebase - 如何使用 Firebase 的 'verifyPhoneNumber()' 确认电话 # 所有权而不使用 # 登录？

Question

我正在使用 react-native-firebase v5.6 在一个项目中。

目标:在注册流程中，我让用户输入他们的电话号码，然后我向该电话号码发送一个 OTP。我希望能够将用户输入的代码与 Firebase 发送的代码进行比较，以便能够进入注册的后续步骤。

问题:用户获取短信 OTP 和所有内容，但 phoneAuthSnapshot firebase.auth().verifyPhoneNumber(number).on('state_changed', (phoneAuthSnapshot => {}) 返回的对象，它没有为 firebase 发送的代码提供值，所以没有什么可以比较用户输入的代码。但是，verificationId 有一个值属性(property)。这是从上述方法返回的对象:

'Verification code sent', { 
  verificationId: 'AM5PThBmFvPRB6x_tySDSCBG-6tezCCm0Niwm2ohmtmYktNJALCkj11vpwyou3QGTg_lT4lkKme8UvMGhtDO5rfMM7U9SNq7duQ41T8TeJupuEkxWOelgUiKf_iGSjnodFv9Jee8gvHc50XeAJ3z7wj0_BRSg_gwlN6sumL1rXJQ6AdZwzvGetebXhZMb2gGVQ9J7_JZykCwREEPB-vC0lQcUVdSMBjtig',
  code: null,
  error: null,
  state: 'sent' 
}

这是我的屏幕实现:

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 });

              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));
  });

如何获取从 Firebase 发送的代码以便进行比较？

Answer 1

如 @christos-lytras曾在 their answer ，验证码不会暴露给您的应用程序。

这样做是出于安全原因，因为提供了用于 out of band authentication 的代码。设备本身将允许知识渊博的用户从内存中取出代码并进行身份验证，就好像他们有权访问该电话号码一样。

一般的操作流程是:

获取待验证电话号码

将该号码与 verifyPhoneNumber() 一起使用并缓存它返回的验证 ID

提示用户输入代码(或自动检索)

使用 firebase.auth.PhoneAuthProvider.credential(id, code) 将 ID 和用户的输入捆绑在一起作为凭证

尝试使用该凭据登录
firebase.auth().signInWithCredential(credential)

在您的源代码中，您还使用了 on(event, observer, errorCb, successCb) verifyPhoneNumber(phoneNumber) 的听众方法。但是这个方法也支持 listening to results使用 Promises，它允许您链接到您的 Firebase 查询。这如下所示。

发送验证码:

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
    });
  });

处理用户来源的验证码:

codeInputSubmitted(code) {
  const { verificationId } = this.state;

  const credential = firebase.auth.PhoneAuthProvider.credential(
    verificationId,
    code
  );

  // To verify phone number without interfering with the existing user
  // who is signed in, we offload the verification to a worker app.
  let fbWorkerApp = firebase.apps.find(app => app.name === 'auth-worker')
                 || 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. '
          + '\n\nIf the issue persists, please contact support.'
      }
      this.setState({
        codeInputErrorMessage: userErrorMessage
      });
    })
}

API引用:

verifyPhoneNumber() - React Native或 Firebase

PhoneAuthProvider.credential(id, code) - Firebase

signInWithCredential() - React Native或 Firebase

建议的代码输入组件:

react-native-confirmation-code-field