reactjs - React Native Firebase 验证码

Question

我正在关注关于电话授权的 React Native firebase 文档 ( https://rnfirebase.io/docs/v5.x.x/auth/phone-auth )，并且对是否需要(或不需要)reCAPTCHA 感到困惑。

文档没有将第二个参数传递给 signInWithPhoneNumber() 方法，但是在调用该方法时我收到一个错误，要求将 recaptchaVerifier 作为第二个参数。因为我正在为 iOs 和 Android 编写应用程序，所以我使用了与 Firebase 的 Web 连接，而不是使用生成的 JSON 文件。我相信这是我的问题，因为它认为我是从非移动设备调用 API。

Firebase Web 是连接 React Native 跨平台应用程序的最佳方式吗？如果是，有没有办法生成 reCAPTCHA 代码？

firebase 文档讨论了一个不可见的 reCAPTCHA，但它们只提供带有按钮 ID 等的 HTML 代码。 (我确实尝试提供 ID 作为 Prop ，但没有成功)https://firebase.google.com/docs/auth/web/phone-auth

我的配置文件:

import firebase from 'firebase';

class Config {
  constructor() {
    if (!firebase.apps.length) {
      firebase.initializeApp({
        apiKey: "AIaskdjf93rlaksdjf99999",
        authDomain: "myDomain.firebaseapp.com",
        databaseURL: "https://myDomain.firebaseio.com",
        projectId: "myDomain",
        storageBucket: "",
        messagingSenderId: "88827277272",
        appId: "somenumbersomitted",
        measurementId: "akjdsfkljad"
      });
    }
  }

  login = async (user, success_callback, failed_callback) => {
    await firebase
      .auth()
      .signInWithEmailAndPassword(user.userName, user.password)
      .then(success_callback, failed_callback);
  };

  //todo:: need to update signInWithPhoneNumber second param to be the recaptcha token
  loginWithPhone = async (phoneNumber, success_callback, failed_callback) => {
    var applicationVerifier = ?????;
    await firebase
    .auth()
    .signInWithPhoneNumber(phoneNumber, applicationVerifier)
    .then(success_callback, failed_callback);
  };

  //todo: figure out how to get this method to work in RN. Not able to take in button ID...
  recaptchaVerifier = async (phoneNumber, success_callback, failed_callback) =>{
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
      'size': 'invisible',
      'callback': function(response) {
        loginWithPhone(phoneNumber, success_callback, failed_callback);
      }
    });
  };
}
const config = new Config();
export default config;

Answer 1

我设法通过使用 https://rnfirebase.io/ 在 React Native 上进行电话号码身份验证和以下代码:

  const sendSmsCode = async (phoneNumber: string) => {
    const isUserPhoneNumberLinked = await getIsUserPhoneNumberLinked(
      phoneNumber
    );
    if (!isUserPhoneNumberLinked) {

    } else {
      try {
        let confirmationResult = await firebase
          .auth()
          .signInWithPhoneNumber(phoneNumber, true);

        Promise.resolve();
        setIsSmsCodeSent(true);
        confirmationRef.current = confirmationResult;
      } catch (error) {
        throw error;
      }
    }
  };

然后您可以使用 confirmationRef.current.confirm() 来确认短信代码:

  const verifySmsCode = async () => {
    const result = await confirmationRef.current.confirm(smsCode);
    if (result.user) {
      dispatch(authenticatedUserAction());
    }
  };