React Native Firebase 电话身份验证问题答案

【问题标题】：React Native Firebase Phone Auth issuesReact Native Firebase 电话身份验证问题
【发布时间】：2020-10-04 02:42:15
【问题描述】：

我已经为 RN expo 电话身份验证苦苦挣扎了好几个星期，但似乎没有任何效果，谁能分享一个有效的代码？

【问题讨论】：

如果您有信息要在 Stack Overflow 上分享，最好的方式是针对手头的问题提出问题，然后以正式答案的形式回答您自己的问题，该问题可以独立投票并在对人们有帮助时被接受。不要在问题本身中回答你自己的问题。
谢谢你：D 我会按照你的建议删除帖子并重新发送。
看来我得发一篇关于“如何删除 Stackoverflow 上的帖子”的帖子：/
您也可以编辑自己的问题，然后回答。

标签： javascript firebase react-native firebase-authentication

【解决方案1】：

今天我也在为同样的事情苦苦挣扎，但我发现这个 Expo Doc 对我很有帮助（那里还有一个演示）。

这里是世博会文档：

https://docs.expo.io/versions/latest/sdk/firebase-recaptcha/

【讨论】：

【解决方案2】：

我找到了 RN Expo firebase 身份验证的解决方案。这是一个完整的工作代码，请记住安装这些依赖项yarn add expo-firebase-recaptcha 和expo install firebase。注意f 是我的配置文件夹中的firebase。祝你好运，我希望这对某人有所帮助。 :)

import React, { useRef, useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native';
import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha'
import { f } from './firebaseConfig/config'


export default App = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [code, setCode] = useState('');
  const [verificationId, setVerificationId] = useState();
  const recaptchaVerifier = useRef();

  const sendVerification = () => {
    const phoneProvider = new f.auth.PhoneAuthProvider();
    phoneProvider
      .verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
      .then(setVerificationId);
  };

  const confirmCode = () => {
    const credential = f.auth.PhoneAuthProvider.credential(
      verificationId,
      code
    );
    f
      .auth()
      .signInWithCredential(credential)
      .then((result) => {
        console.log(result);
      });
  };

  return (

      <View style={styles.container}>
        <FirebaseRecaptchaVerifierModal
          ref={recaptchaVerifier}
          firebaseConfig={f.app().options}
        />
        <TextInput
          placeholder="Phone Number"
          onChangeText={setPhoneNumber}
          keyboardType="phone-pad"
          autoCompleteType="tel"
          style={styles.textInput}
        />
        <TouchableOpacity
          style={styles.sendVerification}
          onPress={sendVerification}
        >
          <Text style={styles.buttonText}>Send Verification</Text>
        </TouchableOpacity>
        <TextInput
          placeholder="Confirmation Code"
          onChangeText={setCode}
          keyboardType="number-pad"
          style={styles.textInput}

        />
        <TouchableOpacity
          style={styles.setCode}
          onPress={confirmCode}>
          <Text style={styles.sendVerification}>Send Verification</Text>
        </TouchableOpacity>
      </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textInput: {
    paddingTop: 40,
    paddingBottom: 20,
    paddingHorizontal: 20,
    fontSize: 24,
    borderBottomColor: '#7f8c8d33',
    borderBottomWidth: 2,
    marginBottom: 10,
    textAlign: 'center',
  },
  sendVerification: {
    padding: 20,
    backgroundColor: '#3498db',
    borderRadius: 10,
  },
  sendCode: {
    padding: 20,
    backgroundColor: '#333',
    borderRadius: 10,
  },
  buttonText: {
    textAlign: 'center',
    color: '#fff',
  },
})

【讨论】：