React Native Firebase的reCAPTCHA。

Question

我是按照react native firebase docs(https:/rnfirebase.iodocsv5.x.xauthphone-auth。)的电话授权，并对是否需要（或不需要）reCAPTCHA感到困惑。

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

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

firebase文档中谈到了一个不可见的reCAPTCHA，但他们只提供了HTML的代码和一个按钮ID之类的。(我曾试过给一个ID作为道具，但没有成功) https:/firebase.google.comdocsauthwebphone-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

我在React Native上使用以下方法让电话号码认证工作起来 https:/rnfirebase.io。 和下面的代码。

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