React Native Firebase reCAPTCHA答案

【问题标题】：React Native Firebase reCAPTCHAReact Native Firebase reCAPTCHA
【发布时间】：2020-02-08 01:42:26
【问题描述】：

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

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

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

firebase 文档讨论了一种不可见的 reCAPTCHA，但它们只提供带有按钮 ID 之类的 HTML 代码。（我确实尝试过提供一个 ID 作为道具，但没有成功）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;

【问题讨论】：

标签： reactjs firebase react-native authorization recaptcha

【解决方案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());
    }
  };

【讨论】：