时间戳

首页 > 解决方案 > 如何使用 Firebase 的“verifyPhoneNumber()”来确认电话号码的所有权而不使用 # 登录？

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

问题描述

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

目标：在注册流程中，我让用户输入他们的电话号码，然后我向所述电话号码发送 OTP。我希望能够将用户输入的代码与从 Firebase 发送的代码进行比较，以便能够授予进入注册后续步骤的权限。

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

'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 发送的代码以便进行比较？

标签： firebasefirebase-authenticationreact-native-firebase

解决方案

正如@christos-lytras在他们的回答中所说，验证码不会暴露给您的应用程序。

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

操作的一般流程是：

  1. 获取要验证的电话号码
  2. 使用该号码verifyPhoneNumber()并缓存它返回的验证 ID
  3. 提示用户输入代码（或自动检索）
  4. 将 ID 和用户的输入捆绑在一起作为凭证，使用firebase.auth.PhoneAuthProvider.credential(id, code)
  5. 尝试使用该凭据登录 firebase.auth().signInWithCredential(credential)

在您的源代码中，您还使用该方法的on(event, observer, errorCb, successCb)侦听器verifyPhoneNumber(phoneNumber)。但是，此方法还支持使用 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 参考：

建议的代码输入组件：

推荐阅读